Tôi muốn gửi mảng ví dụ này
[{
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]":
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
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 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, 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.connection.on['message', function[message] {
for [var i = players.length - 1; i >= 0; i--] {
players[i].connection.send[message.binaryData];
}
}];
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 [//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
}];
0Ví 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
}];
1Gử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.