JavaScript 中 WebSocket 怎么处理黏包与分包解析逻辑-js教程-PHP中文网

websocket帧层自动处理tcp黏包，但业务消息需应用层解决帧内黏包；推荐长度前缀+二进制帧方案，发送时加4字节大端长度头，接收端依头解析。

javascript 中 websocket 怎么处理黏包与分包解析逻辑

WebSocket 协议本身不解决黏包与分包问题，但它的帧层（frame layer）已由浏览器和服务器底层（如 Netty、Node.js 的 ws 库）自动处理 TCP 层的粘包/拆包。真正需要你关注和编码的，是 WebSocket 帧 payload 内部的业务消息如何切分——也就是“帧内黏包”。

浏览器端 WebSocket 默认不暴露帧边界，需自行协议设计

浏览器原生 WebSocket API 只提供 message 事件，且：

文本帧（TextWebSocketFrame）会自动转成 string 或 DOMString，但若后端拼了多个 JSON，前端收到的就是一串无分隔的字符串（如 '{"id":1}{"id":2}'），无法直接 JSON.parse
二进制帧（BinaryWebSocketFrame）传入的是 ArrayBuffer 或 Blob，内容完全由你定义，没有内置长度或分隔符

这意味着：你不能依赖 event.data 天然对应一条业务消息；必须在应用层约定解析规则。

推荐方案：长度前缀 + 二进制帧（最健壮）

在发送前对每条业务消息加 4 字节大端序长度头（Uint32BE），再拼接 body。例如：

// 发送端（JS）
function sendPacket(data) {
  const encoder = new TextEncoder();
  const body = encoder.encode(JSON.stringify(data));
  const header = new ArrayBuffer(4);
  const view = new DataView(header);
  view.setUint32(0, body.length, false); // false = big-endian

  const packet = new Uint8Array(header.byteLength + body.length);
  packet.set(new Uint8Array(header), 0);
  packet.set(body, 4);

  ws.send(packet.buffer);
}

接收端维护一个缓冲区，按长度头逐步切包：

Miller CSV TSV JSON 数据处理器

Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。

下载

// 接收端（JS）
let buffer = new Uint8Array(0);

ws.onmessage = (e) => {
  const chunk = new Uint8Array(e.data);
  buffer = concatUint8Array(buffer, chunk);

  while (buffer.length >= 4) {
    const view = new DataView(buffer.buffer, buffer.byteOffset);
    const len = view.getUint32(0, false); // 读长度头

    if (buffer.length 

<h3>备选方案：分隔符（适合纯文本，慎用于二进制）</h3>
<p>若只传 UTF-8 文本且不含换行符，可用 <code>\n</code> 分隔：</p>