Hướng dẫn convert json to binary javascript - chuyển đổi json sang javascript nhị phân

Question

Tôi muốn gửi mảng ví dụ này

Nội dung chính Show

Chỉnh sửa mới nhất đọc từ đây
Nhận dữ liệu nhị phân trong các trình duyệt cũ hơn
Gửi dữ liệu nhị phân
Gửi các mảng được đánh máy dưới dạng dữ liệu nhị phân
Gửi biểu mẫu và tải lên các tệp
ArrayBuffer trong JavaScript là gì?
JavaScript có hỗ trợ dữ liệu nhị phân không?
Kiểu dữ liệu nhị phân trong JavaScript là gì?
Những dòng mã nào sau đây cho phép XMLHTTPRequest trả về dữ liệu nhị phân?

[{
    id: 1,
    name: "test",
    position: [1234,850], //random position on the map
    points: 100 //example points
}];

đến máy chủ WebSocket của tôi dưới dạng dữ liệu nhị phân. Ở phía máy chủ, tôi muốn giải mã dữ liệu nhị phân trở lại mảng, thực hiện các thay đổi và gửi lại dữ liệu nhị phân cho máy khách. Và cuối cùng ở phía máy khách làm thế nào để giải mã dữ liệu nhị phân trở lại thành mảng?

Ví dụ ảnh chụp màn hình ý nghĩa của tôi:

Đây là mã thực tế của tôi:

var connection = new WebSocket('wss://my_website.eu:1234');
connection.binaryType = "ArrayBuffer";
connection.onmessage = function (event) {

    // console.log(event);
    if (event.data instanceof window["ArrayBuffer"]) {
        var data3 = JSON.parse(String.fromCharCode.apply(null, new Uint16Array(event.data)));
        console.log(data3);
    } else {
        console.log(event.data); // Blob {size: 0, type: ""}
    }
};

$("body").mousemove(function( event ) {

    var data = {
        name: "lol",
        pos: [event.pageX, event.pageY]
    };

    //convert to binary frame
    var data2 = new Uint16Array(data);
    console.log(data2); // []

    //try to convert back to array
    var data3 = String.fromCharCode.apply(null, new Uint16Array(data2));
    console.log(data3); // empty

    connection.send(data2); // Binary Frame (Opcode 2, mask) | length: 0

});

Mã phía máy chủ:

connection.on('message', function(message) {
    for (var i = players.length - 1; i >= 0; i--) {
        players[i].connection.send(message.binaryData);
    }
});

Chỉnh sửa mới nhất đọc từ đây

Bây giờ tôi có thể gửi tin nhắn dưới dạng khung nhị phân đến máy chủ WebSocket. Tôi tìm thấy các chức năng để chuyển đổi chuỗi thành loại nhị phân và gửi nó đến máy chủ WS.

Bây giờ tôi có vấn đề. Các chức năng này (bên dưới) không hoạt động ở phía máy chủ. Mã ví dụ:

var data = {
    name: "value"
};

connection.send(JSON.stringify(data));

Mã này hoạt động tốt. Bây giờ, khi tôi cố gắng gửi dưới dạng bộ đệm mảng:

var data = {
    name: "value"
};

connection.send(StringToArrayBuffer(JSON.stringify(data)));

Đầu ra không phải là khung nhị phân, chỉ là chuỗi "[ArrayBuffer đối tượng]":

Hướng dẫn convert json to binary javascript - chuyển đổi json sang javascript nhị phân

Tôi cũng đã thử:

connection.send(JSON.stringify(data), {binary: true, mask: false});

Nhưng thông báo gửi này là chuỗi bình thường, không phải khung nhị phân.

Vì vậy, làm thế nào tôi có thể gửi khung nhị phân từ máy chủ webSocket đến máy khách? Khi tôi gửi lại nhận được tin nhắn nhị phân:how I can send Binary frame from websocket server to client? When I send back received binary message:

connection.on('message', function(message) {
    for (var i = players.length - 1; i >= 0; i--) {
        playerConnection[i].send(message.binaryData);
    }
}

Chỉ điều này hoạt động.

Thuộc tính

var connection = new WebSocket('wss://my_website.eu:1234');
connection.binaryType = "ArrayBuffer";
connection.onmessage = function (event) {

    // console.log(event);
    if (event.data instanceof window["ArrayBuffer"]) {
        var data3 = JSON.parse(String.fromCharCode.apply(null, new Uint16Array(event.data)));
        console.log(data3);
    } else {
        console.log(event.data); // Blob {size: 0, type: ""}
    }
};

$("body").mousemove(function( event ) {

    var data = {
        name: "lol",
        pos: [event.pageX, event.pageY]
    };

    //convert to binary frame
    var data2 = new Uint16Array(data);
    console.log(data2); // []

    //try to convert back to array
    var data3 = String.fromCharCode.apply(null, new Uint16Array(data2));
    console.log(data3); // empty

    connection.send(data2); // Binary Frame (Opcode 2, mask) | length: 0

});

3 của đối tượng XMLHTTPREQUEST có thể được đặt để thay đổi loại phản hồi dự kiến từ máy chủ. Các giá trị có thể là chuỗi trống (mặc định),

var connection = new WebSocket('wss://my_website.eu:1234');
connection.binaryType = "ArrayBuffer";
connection.onmessage = function (event) {

    // console.log(event);
    if (event.data instanceof window["ArrayBuffer"]) {
        var data3 = JSON.parse(String.fromCharCode.apply(null, new Uint16Array(event.data)));
        console.log(data3);
    } else {
        console.log(event.data); // Blob {size: 0, type: ""}
    }
};

$("body").mousemove(function( event ) {

    var data = {
        name: "lol",
        pos: [event.pageX, event.pageY]
    };

    //convert to binary frame
    var data2 = new Uint16Array(data);
    console.log(data2); // []

    //try to convert back to array
    var data3 = String.fromCharCode.apply(null, new Uint16Array(data2));
    console.log(data3); // empty

    connection.send(data2); // Binary Frame (Opcode 2, mask) | length: 0

});

4,

var connection = new WebSocket('wss://my_website.eu:1234');
connection.binaryType = "ArrayBuffer";
connection.onmessage = function (event) {

    // console.log(event);
    if (event.data instanceof window["ArrayBuffer"]) {
        var data3 = JSON.parse(String.fromCharCode.apply(null, new Uint16Array(event.data)));
        console.log(data3);
    } else {
        console.log(event.data); // Blob {size: 0, type: ""}
    }
};

$("body").mousemove(function( event ) {

    var data = {
        name: "lol",
        pos: [event.pageX, event.pageY]
    };

    //convert to binary frame
    var data2 = new Uint16Array(data);
    console.log(data2); // []

    //try to convert back to array
    var data3 = String.fromCharCode.apply(null, new Uint16Array(data2));
    console.log(data3); // empty

    connection.send(data2); // Binary Frame (Opcode 2, mask) | length: 0

});

5,

var connection = new WebSocket('wss://my_website.eu:1234');
connection.binaryType = "ArrayBuffer";
connection.onmessage = function (event) {

    // console.log(event);
    if (event.data instanceof window["ArrayBuffer"]) {
        var data3 = JSON.parse(String.fromCharCode.apply(null, new Uint16Array(event.data)));
        console.log(data3);
    } else {
        console.log(event.data); // Blob {size: 0, type: ""}
    }
};

$("body").mousemove(function( event ) {

    var data = {
        name: "lol",
        pos: [event.pageX, event.pageY]
    };

    //convert to binary frame
    var data2 = new Uint16Array(data);
    console.log(data2); // []

    //try to convert back to array
    var data3 = String.fromCharCode.apply(null, new Uint16Array(data2));
    console.log(data3); // empty

    connection.send(data2); // Binary Frame (Opcode 2, mask) | length: 0

});

6,

var connection = new WebSocket('wss://my_website.eu:1234');
connection.binaryType = "ArrayBuffer";
connection.onmessage = function (event) {

    // console.log(event);
    if (event.data instanceof window["ArrayBuffer"]) {
        var data3 = JSON.parse(String.fromCharCode.apply(null, new Uint16Array(event.data)));
        console.log(data3);
    } else {
        console.log(event.data); // Blob {size: 0, type: ""}
    }
};

$("body").mousemove(function( event ) {

    var data = {
        name: "lol",
        pos: [event.pageX, event.pageY]
    };

    //convert to binary frame
    var data2 = new Uint16Array(data);
    console.log(data2); // []

    //try to convert back to array
    var data3 = String.fromCharCode.apply(null, new Uint16Array(data2));
    console.log(data3); // empty

    connection.send(data2); // Binary Frame (Opcode 2, mask) | length: 0

});

7 và

var connection = new WebSocket('wss://my_website.eu:1234');
connection.binaryType = "ArrayBuffer";
connection.onmessage = function (event) {

    // console.log(event);
    if (event.data instanceof window["ArrayBuffer"]) {
        var data3 = JSON.parse(String.fromCharCode.apply(null, new Uint16Array(event.data)));
        console.log(data3);
    } else {
        console.log(event.data); // Blob {size: 0, type: ""}
    }
};

$("body").mousemove(function( event ) {

    var data = {
        name: "lol",
        pos: [event.pageX, event.pageY]
    };

    //convert to binary frame
    var data2 = new Uint16Array(data);
    console.log(data2); // []

    //try to convert back to array
    var data3 = String.fromCharCode.apply(null, new Uint16Array(data2));
    console.log(data3); // empty

    connection.send(data2); // Binary Frame (Opcode 2, mask) | length: 0

});

8. Thuộc tính

var connection = new WebSocket('wss://my_website.eu:1234');
connection.binaryType = "ArrayBuffer";
connection.onmessage = function (event) {

    // console.log(event);
    if (event.data instanceof window["ArrayBuffer"]) {
        var data3 = JSON.parse(String.fromCharCode.apply(null, new Uint16Array(event.data)));
        console.log(data3);
    } else {
        console.log(event.data); // Blob {size: 0, type: ""}
    }
};

$("body").mousemove(function( event ) {

    var data = {
        name: "lol",
        pos: [event.pageX, event.pageY]
    };

    //convert to binary frame
    var data2 = new Uint16Array(data);
    console.log(data2); // []

    //try to convert back to array
    var data3 = String.fromCharCode.apply(null, new Uint16Array(data2));
    console.log(data3); // empty

    connection.send(data2); // Binary Frame (Opcode 2, mask) | length: 0

});

9 sẽ chứa cơ thể thực thể theo

var connection = new WebSocket('wss://my_website.eu:1234');
connection.binaryType = "ArrayBuffer";
connection.onmessage = function (event) {

    // console.log(event);
    if (event.data instanceof window["ArrayBuffer"]) {
        var data3 = JSON.parse(String.fromCharCode.apply(null, new Uint16Array(event.data)));
        console.log(data3);
    } else {
        console.log(event.data); // Blob {size: 0, type: ""}
    }
};

$("body").mousemove(function( event ) {

    var data = {
        name: "lol",
        pos: [event.pageX, event.pageY]
    };

    //convert to binary frame
    var data2 = new Uint16Array(data);
    console.log(data2); // []

    //try to convert back to array
    var data3 = String.fromCharCode.apply(null, new Uint16Array(data2));
    console.log(data3); // empty

    connection.send(data2); // Binary Frame (Opcode 2, mask) | length: 0

});

3, dưới dạng

connection.on('message', function(message) {
    for (var i = players.length - 1; i >= 0; i--) {
        players[i].connection.send(message.binaryData);
    }
});

1,

connection.on('message', function(message) {
    for (var i = players.length - 1; i >= 0; i--) {
        players[i].connection.send(message.binaryData);
    }
});

2,

connection.on('message', function(message) {
    for (var i = players.length - 1; i >= 0; i--) {
        players[i].connection.send(message.binaryData);
    }
});

3,

connection.on('message', function(message) {
    for (var i = players.length - 1; i >= 0; i--) {
        players[i].connection.send(message.binaryData);
    }
});

4 hoặc chuỗi. Đây là

connection.on('message', function(message) {
    for (var i = players.length - 1; i >= 0; i--) {
        players[i].connection.send(message.binaryData);
    }
});

5 nếu yêu cầu không hoàn thành hoặc không thành công.

Ví dụ này đọc một hình ảnh dưới dạng tệp nhị phân và tạo một mảng số nguyên không dấu 8 bit từ các byte thô. Lưu ý rằng điều này sẽ không giải mã được hình ảnh và đọc các pixel. Bạn sẽ cần một thư viện giải mã PNG cho điều đó.

const req = new XMLHttpRequest();
req.open("GET", "/myfile.png", true);
req.responseType = "arraybuffer";

req.onload = (event) => {
  const arrayBuffer = req.response; // Note: not req.responseText
  if (arrayBuffer) {
    const byteArray = new Uint8Array(arrayBuffer);
    byteArray.forEach((element, index) => {
      // do something with each byte in the array
    });
  }
};

req.send(null);

Bạn cũng có thể đọc một tệp nhị phân dưới dạng

connection.on('message', function(message) {
    for (var i = players.length - 1; i >= 0; i--) {
        players[i].connection.send(message.binaryData);
    }
});

2 bằng cách đặt chuỗi

var connection = new WebSocket('wss://my_website.eu:1234');
connection.binaryType = "ArrayBuffer";
connection.onmessage = function (event) {

    // console.log(event);
    if (event.data instanceof window["ArrayBuffer"]) {
        var data3 = JSON.parse(String.fromCharCode.apply(null, new Uint16Array(event.data)));
        console.log(data3);
    } else {
        console.log(event.data); // Blob {size: 0, type: ""}
    }
};

$("body").mousemove(function( event ) {

    var data = {
        name: "lol",
        pos: [event.pageX, event.pageY]
    };

    //convert to binary frame
    var data2 = new Uint16Array(data);
    console.log(data2); // []

    //try to convert back to array
    var data3 = String.fromCharCode.apply(null, new Uint16Array(data2));
    console.log(data3); // empty

    connection.send(data2); // Binary Frame (Opcode 2, mask) | length: 0

});

5 thành thuộc tính

var connection = new WebSocket('wss://my_website.eu:1234');
connection.binaryType = "ArrayBuffer";
connection.onmessage = function (event) {

    // console.log(event);
    if (event.data instanceof window["ArrayBuffer"]) {
        var data3 = JSON.parse(String.fromCharCode.apply(null, new Uint16Array(event.data)));
        console.log(data3);
    } else {
        console.log(event.data); // Blob {size: 0, type: ""}
    }
};

$("body").mousemove(function( event ) {

    var data = {
        name: "lol",
        pos: [event.pageX, event.pageY]
    };

    //convert to binary frame
    var data2 = new Uint16Array(data);
    console.log(data2); // []

    //try to convert back to array
    var data3 = String.fromCharCode.apply(null, new Uint16Array(data2));
    console.log(data3); // empty

    connection.send(data2); // Binary Frame (Opcode 2, mask) | length: 0

});

3.

const req = new XMLHttpRequest();
req.open("GET", "/myfile.png", true);
req.responseType = "blob";

req.onload = (event) => {
  const blob = req.response;
  // ...
};

oReq.send();

Nhận dữ liệu nhị phân trong các trình duyệt cũ hơn

Hàm

connection.on('message', function(message) {
    for (var i = players.length - 1; i >= 0; i--) {
        players[i].connection.send(message.binaryData);
    }
});

9 được hiển thị bên dưới tải dữ liệu nhị phân từ URL được chỉ định, trả lại cho người gọi.

function loadBinaryResource(url) {
  const req = new XMLHttpRequest();
  req.open("GET", url, false);

  // XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]
  req.overrideMimeType("text/plain; charset=x-user-defined");
  req.send(null);
  return req.status === 200 ? req.responseText : "";
}

Phép thuật xảy ra trong dòng 5, ghi đè loại MIME, buộc trình duyệt phải coi nó là văn bản thuần túy, sử dụng bộ ký tự do người dùng định nghĩa. Điều này nói với trình duyệt không phân tích nó, và để cho các byte đi qua chưa được xử lý.

var connection = new WebSocket('wss://my_website.eu:1234');
connection.binaryType = "ArrayBuffer";
connection.onmessage = function (event) {

    // console.log(event);
    if (event.data instanceof window["ArrayBuffer"]) {
        var data3 = JSON.parse(String.fromCharCode.apply(null, new Uint16Array(event.data)));
        console.log(data3);
    } else {
        console.log(event.data); // Blob {size: 0, type: ""}
    }
};

$("body").mousemove(function( event ) {

    var data = {
        name: "lol",
        pos: [event.pageX, event.pageY]
    };

    //convert to binary frame
    var data2 = new Uint16Array(data);
    console.log(data2); // []

    //try to convert back to array
    var data3 = String.fromCharCode.apply(null, new Uint16Array(data2));
    console.log(data3); // empty

    connection.send(data2); // Binary Frame (Opcode 2, mask) | length: 0

});

0

Ví dụ trên tìm nạp byte tại Offset

var data = {
    name: "value"
};

connection.send(JSON.stringify(data));

0 trong dữ liệu nhị phân được tải. Phạm vi hợp lệ cho

var data = {
    name: "value"
};

connection.send(JSON.stringify(data));

0 là từ 0 đến

var data = {
    name: "value"
};

connection.send(JSON.stringify(data));

2.

Xem tải xuống các luồng nhị phân với xmlhttprequest để biết giải thích chi tiết. Xem thêm Tải xuống các tập tin.

Gửi dữ liệu nhị phân

Phương pháp

var data = {
    name: "value"
};

connection.send(JSON.stringify(data));

3 của XMLHTTPREQUEST đã được mở rộng để cho phép truyền dữ liệu nhị phân dễ dàng bằng cách chấp nhận đối tượng

connection.on('message', function(message) {
    for (var i = players.length - 1; i >= 0; i--) {
        players[i].connection.send(message.binaryData);
    }
});

1,

connection.on('message', function(message) {
    for (var i = players.length - 1; i >= 0; i--) {
        players[i].connection.send(message.binaryData);
    }
});

2 hoặc

var data = {
    name: "value"
};

connection.send(JSON.stringify(data));

6.

Ví dụ sau tạo một tệp văn bản trên đường và sử dụng phương thức

var data = {
    name: "value"
};

connection.send(JSON.stringify(data));

7 để gửi "tệp" đến máy chủ. Ví dụ này sử dụng văn bản thuần túy, nhưng bạn có thể tưởng tượng dữ liệu là một tệp nhị phân thay thế.

var connection = new WebSocket('wss://my_website.eu:1234');
connection.binaryType = "ArrayBuffer";
connection.onmessage = function (event) {

    // console.log(event);
    if (event.data instanceof window["ArrayBuffer"]) {
        var data3 = JSON.parse(String.fromCharCode.apply(null, new Uint16Array(event.data)));
        console.log(data3);
    } else {
        console.log(event.data); // Blob {size: 0, type: ""}
    }
};

$("body").mousemove(function( event ) {

    var data = {
        name: "lol",
        pos: [event.pageX, event.pageY]
    };

    //convert to binary frame
    var data2 = new Uint16Array(data);
    console.log(data2); // []

    //try to convert back to array
    var data3 = String.fromCharCode.apply(null, new Uint16Array(data2));
    console.log(data3); // empty

    connection.send(data2); // Binary Frame (Opcode 2, mask) | length: 0

});

1

Gửi các mảng được đánh máy dưới dạng dữ liệu nhị phân

Bạn cũng có thể gửi các mảng được đánh máy JavaScript dưới dạng dữ liệu nhị phân.

var connection = new WebSocket('wss://my_website.eu:1234');
connection.binaryType = "ArrayBuffer";
connection.onmessage = function (event) {

    // console.log(event);
    if (event.data instanceof window["ArrayBuffer"]) {
        var data3 = JSON.parse(String.fromCharCode.apply(null, new Uint16Array(event.data)));
        console.log(data3);
    } else {
        console.log(event.data); // Blob {size: 0, type: ""}
    }
};

$("body").mousemove(function( event ) {

    var data = {
        name: "lol",
        pos: [event.pageX, event.pageY]
    };

    //convert to binary frame
    var data2 = new Uint16Array(data);
    console.log(data2); // []

    //try to convert back to array
    var data3 = String.fromCharCode.apply(null, new Uint16Array(data2));
    console.log(data3); // empty

    connection.send(data2); // Binary Frame (Opcode 2, mask) | length: 0

});

2

Đây là xây dựng một mảng 512 byte của số nguyên 8 bit và gửi nó; Tất nhiên, bạn có thể sử dụng bất kỳ dữ liệu nhị phân nào bạn muốn.

Gửi biểu mẫu và tải lên các tệp

Xin vui lòng, đọc đoạn này.

ArrayBuffer trong JavaScript là gì?

Đối tượng ArrayBuffer được sử dụng để biểu diễn bộ đệm dữ liệu nhị phân thô chung, có độ dài cố định.Nó là một mảng các byte, thường được gọi bằng các ngôn ngữ khác là "mảng byte".used to represent a generic, fixed-length raw binary data buffer. It is an array of bytes, often referred to in other languages as a "byte array".

JavaScript có hỗ trợ dữ liệu nhị phân không?

Bạn cũng có thể gửi các mảng được đánh máy JavaScript dưới dạng dữ liệu nhị phân.Đây là xây dựng một mảng 512 byte của số nguyên 8 bit và gửi nó;Tất nhiên, bạn có thể sử dụng bất kỳ dữ liệu nhị phân nào bạn muốn.. This is building a 512-byte array of 8-bit integers and sending it; you can use any binary data you'd like, of course.

Kiểu dữ liệu nhị phân trong JavaScript là gì?

Dữ liệu nhị phân trong JavaScript được triển khai theo cách không chuẩn, so với các ngôn ngữ khác.Nhưng khi chúng ta sắp xếp mọi thứ, mọi thứ trở nên khá đơn giản.Đối tượng nhị phân cơ bản là ArrayBuffer-một tham chiếu đến vùng bộ nhớ liên tục có độ dài cố định.ArrayBuffer – a reference to a fixed-length contiguous memory area.

Những dòng mã nào sau đây cho phép XMLHTTPRequest trả về dữ liệu nhị phân?

Những dòng mã nào sau đây cho phép XMLHTTPRequest trả về dữ liệu nhị phân?request.responsetype = 'nhị phân'; yêu cầu.request. responseType = 'binary'; request.

programming javascript JavaScript parse binary

Hướng dẫn convert json to binary javascript - chuyển đổi json sang javascript nhị phân

Chỉnh sửa mới nhất đọc từ đây

Nhận dữ liệu nhị phân trong các trình duyệt cũ hơn

Gửi dữ liệu nhị phân

Gửi các mảng được đánh máy dưới dạng dữ liệu nhị phân

Gửi biểu mẫu và tải lên các tệp

ArrayBuffer trong JavaScript là gì?

JavaScript có hỗ trợ dữ liệu nhị phân không?

Kiểu dữ liệu nhị phân trong JavaScript là gì?

Những dòng mã nào sau đây cho phép XMLHTTPRequest trả về dữ liệu nhị phân?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội