javascript - 如何同时解析数据和二进制Websocket消息？

我发现this great page显示了如何流式传输视频。

他的代码假定onmessage数据像jpg一样

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

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

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

最佳答案

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

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

如果消息是文本消息，则e.data将为字符串类型。

如果消息是二进制消息，则e.data将包含ArrayBuffer或Blob对象。您可以通过设置WebSocket.binaryType属性(例如，设置为"arraybuffer")自行决定要接收的二进制数据的表示形式。

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

如果要传输不同类型的二进制数据，则可以在消息开头使用 header 来告诉客户端消息中包含的内容。例如。声明二进制数据的第一个字节为 header 。如果第一个字节包含1，则其余数据为图片，如果第一个字节包含2，则其余数据为简短音频样本，依此类推。
但是，由于需要拆分或合并二进制数据数组，因此在双方上都比较困难。

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