我创建了一个到我的网络服务器的 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
我得到的事件
:
{
"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"
}
最佳答案
好的,我找到了解决方案!我必须使用 FileReader
读取作为 Blob
的数据:
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);
}
});
关于javascript - 如何从非图像的 WebSocket 读取 BLOB 数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21338263/