websocket消息序列化

yiranlater
726 阅读2分钟

WebSocket通信可以传输两种基本类型的数据：文本和二进制

  1. 文本消息：这是字符串形式的消息，通常用于发送JSON或XML等格式的数据。你可以使用 JSON.stringify 方法将JavaScript对象转换为JSON字符串，然后通过WebSocket发送，并在接收端使用 JSON.parse 来解析该字符串。
// 发送文本消息
let message = { type: 'greeting', content: 'Hello, server!' };
socket.send(JSON.stringify(message));

// 接收文本消息
socket.onmessage = function(event) {
  let receivedMessage = JSON.parse(event.data);
  console.log(receivedMessage.type); // "greeting"
  console.log(receivedMessage.content); // "Hello, server!"
};
  1. 二进制消息：用于发送二进制数据，如图像、音频、视频等。二进制数据可以是Blob对象或ArrayBuffer对象。ArrayBuffer是一种通用的、固定长度的原始二进制数据缓冲区。Blob对象表示一个不可改变的、原始数据的类文件对象。Blob表示的数据不一定是一个JavaScript原生格式。
// 发送二进制消息
let buffer = new ArrayBuffer(100);
socket.send(buffer);

// 接收二进制消息
socket.binaryType = 'arraybuffer';
socket.onmessage = function(event) {
  let arrayBuffer = event.data;
  // 处理ArrayBuffer...
};

注意，无论发送什么类型的数据，在接收端都需要正确地解析并处理这些数据。例如，如果你发送了一个二进制消息，那么在接收端你需要有适当的代码来解码和处理这个二进制数据。同样，如果你发送了一个JSON字符串，那么在接收端你需要将它解析回JavaScript对象。

  1. ArrayBuffer和Blob都是用于处理二进制数据的JavaScript对象，但它们之间存在一些关键区别：

  • ArrayBuffer：这是一种通用的、固定长度的原始二进制数据缓冲区。你不能直接操作ArrayBuffer的内容，而是要通过类型数组对象或DataView对象来读写。

    let buffer = new ArrayBuffer(8); // 创建一个长度为8字节的ArrayBuffer
let view = new Int32Array(buffer); // 创建一个32位整型数组视图
view[0] = 42;

    ArrayBuffer主要用于处理TCP套接字、文件操作、以及处理图片、音频、视频等数据流。

  • Blob：Blob对象表示一个不可改变的、原始数据的类文件对象。Blob表示的数据并不一定是JavaScript原生格式。常见的应用场景有文件操作（例如File API、XMLHttpRequest.send()、Fetch API等）、创建URL（URL.createObjectURL）、以及存储/读取大块数据。

    let text = 'Hello, world!';
let blob = new Blob([text], { type: 'text/plain' });

    Blob对象可以用于任何需要使用到大型二进制对象的地方，例如前端用于读取本地图片，然后通过HTML5的Canvas进行处理，或者将其上传到服务器。

总的来说，ArrayBuffer更底层，提供了一种简单灵活的方式来处理二进制数据。而Blob则更高级一些，通常在处理文件或者大型数据以及需要切片处理的时候使用

avatar
文章
阅读
粉丝