javascript - 如何解析数据和二进制 websocket 消息？

Question

我发现这个很棒的页面展示了如何流式传输视频。

他的代码假设onmessage数据是jpg这样的

ws.onmessage = function (e) {
    $("#image").attr('src',  'data:image/jpg;base64,'+e.data);
}

但我也想要音频和其他页面数据。

如何让 WebSockets 解析消息类型和二进制类型？

score 9 · Accepted Answer

Websocket 消息中的数据可以是字符串（文本消息）或二进制数据。在您的情况下，它是字符串数据，其中字符串内容是二进制图像的 base64 编码。在更好的优化程序中，图像也可以二进制传输。

根据消息类型，e.data 将属于另一种类型。

如果消息是文本消息，则 e.data 将是字符串类型。
如果消息是二进制消息，则 e.data 将包含一个ArrayBuffer或一个Blob对象。WebSocket.binaryType您可以通过设置属性（例如 to "arraybuffer"）自行决定要接收的二进制数据的表示形式。

您可以使用它instanceof来检查您是否收到了二进制或文本消息。

如果你想传输不同类型的二进制数据，你可以在消息的开头使用一个头来告诉客户端消息包含什么。例如，将二进制数据的第一个字节声明为标头。如果第一个字节包含 1，则剩余数据为图片，如果第一个字节包含 2，则剩余数据为短音频样本，依此类推。但是双方都比较困难，因为您需要拆分或合并二进制文件数据数组。

或者，您可以在客户端和服务器之间使用多个并行 websocket 连接。视频数据打开，音频数据打开，一般消息打开，等等。

1 回答 1