如何從一個不是圖像的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