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

Question

我创建了一个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"
}

Answer 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);
    }
});

Answer 2

您可以在 JavaScript 中设置 tye，binaryType如下WebSocket所示：

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

或者分别在 CoffeeScript 中

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

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