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

Question

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

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

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

但我也希望有音频和其他页面数据.

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

Answer 1

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

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

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

您可以使用instanceof检查是否收到二进制或短信.

如果要传输不同类型的二进制数据,可以在消息开头使用标头告诉客户端消息包含的内容.例如,将二进制数据的第一个字节声明为标头.如果第一个字节包含1,那么剩下的数据就是一个图片,如果第一个字节包含2,那么剩下的数据就是一个短的音频样本,等等.但是由于你需要拆分或组合二进制文件,所以两边都要困难一些.数据数组.

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