如何从不是图像的 WebSocket 读取 BLOB 数据答案

【问题标题】：How to read BLOB data from a WebSocket which is not an image如何从不是图像的 WebSocket 读取 BLOB 数据
【发布时间】：2014-02-15 18:39:09
【问题描述】：

我创建了一个到我的网络服务器的 WebSocket 连接来接收一些数据。但是，当我记录在onmessage 函数中收到的事件时，我看不到数据的真实内容。

当我复制 Chrome 浏览器 v32 作为 curl 命令打开的网络连接并在我的操作系统控制台上运行它时，一切正常。所以我认为我的 WebSocket 设置一定是错误的。 event.data 对象是 Blob 的一个实例。

这是我的代码（实际上是 CoffeeScript，但容易理解）：

socket = new WebSocket "wss://myserverurl/some-endpoint"

socket.onopen = (event) ->
    console.log 'Connection opened (WebSocket)'

socket.onclose = (event) ->
    console.log 'Connection closed (WebSocket)'
    code = event.code
    reason = event.reason
    wasClean = event.wasClean

socket.onmessage = (event) ->
    console.log JSON.stringify event

我得到的event：

{
    "ports": [],
    "data": {
        "type": "",
        "size": 594
    },
    ...
    "cancelBubble": false,
    "returnValue": true,
    "srcElement": {
        "binaryType": "blob",
        "extensions": "",
        "protocol": "",
        "onerror": null,
        "bufferedAmount": 0,
        "readyState": 1
    },
    "defaultPrevented": false,
    "timeStamp": 1390578698613,
    "cancelable": false,
    "bubbles": false,
    "eventPhase": 2,
    "currentTarget": {
        "binaryType": "blob",
        "extensions": "",
        "protocol": "",
        "onerror": null,
        "bufferedAmount": 0,
        "readyState": 1
    },
    "target": {
        "binaryType": "blob",
        "extensions": "",
        "protocol": "",
        "onerror": null,
        "bufferedAmount": 0,
        "readyState": 1
    },
    "type": "message"
}

【问题讨论】：

标签： javascript websocket coffeescript blob

【解决方案1】：

好的，我找到了解决方案！我必须读取Blob 和FileReader 提供的数据：

socket = new WebSocket 'wss://myserverurl/some-endpoint'
socket.binaryType = 'blob'

socket.onopen = (event) ->
    console.log 'Connection opened (WebSocket)'

socket.onclose = (event) ->
    console.log 'Connection closed (WebSocket)'
    code = event.code
    reason = event.reason
    wasClean = event.wasClean

socket.onmessage = (event) ->
    if event.data instanceof Blob
        reader = new FileReader()
        reader.onload = ->
            console.log reader.result
        reader.readAsText event.data

或者，在 ES2015 中：

// Create socket
socket = new WebSocket("wss://example.org/ws");
socket.binaryType = "blob";

// Log socket opening and closing
socket.addEventListener("open", event => {
    console.log("Websocket connection opened");
});
socket.addEventListener("close", event => {
    console.log("Websocket connection closed");
});

// Handle the message
socket.addEventListener("message", event => {
    if (event.data instanceof Blob) {
        reader = new FileReader();

        reader.onload = () => {
            console.log("Result: " + reader.result);
        };

        reader.readAsText(event.data);
    } else {
        console.log("Result: " + event.data);
    }
});

【讨论】：

当我尝试获取 reader.result 时，为什么会收到类似 ��.(�ǣ��.8��Z@M`D�� 的内容？跨度>

【解决方案2】：

您可以在 JavaScript 中设置 binaryType 的 WebSocket，如：

var socket = new WebSocket(url);
socket.binaryType = "arraybuffer";

或者分别在 CoffeeScript 中

socket = new WebSocket url
socket.binaryType = "arraybuffer"

你会得到ArrayBuffers 而不是Blobs。通过new Uint8Array(event.data);将它们转换为Uint8Array

【讨论】：

【解决方案3】：

您也可以使用Blob.text()。

socket.addEventListener("message", event => {
    // event.data is Blob
    event.data.text().then(txt=>console.log(txt))   
});

【讨论】：

【解决方案4】：

基本上我可以说最好的答案是只在 websocket 中发送字符串消息。

所以解决方案是发送消息时我强烈建议您使用：

JSON.stringify(data)

所以，它所做的就是将数组或对象或任何类型的数据转换为字符串

因此，当您获得数据或消息时，您应该将它们转换回原来的状态，这样做很容易：

JSON.parse(msg)

【讨论】：

试过了，没用。以某种方式将 37 损坏为 [50, 55]？