分类导航

JavaScript 发布时间：2022-04-16 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了javascript – 如何从不是图像的WebSocket读取BLOB数据，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我创建了一个WebSocket连接到我的网络服务器以接收一些数据.但是,当我在on@R_874_8798@ge函数中记录我收到的事件时,我无法看到数据的真实内容.

当我将我的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.on@R_874_8798@ge = (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","target": {
        "binaryType": "blob","type": "@R_874_8798@ge"
}

解决方法

好的,我找到了解决方案！我必须读取带有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.on@R_874_8798@ge = (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 @R_874_8798@ge
socket.addEventListener("@R_874_8798@ge",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);
    }
});