WebSocket正在发送blob对象而不是字符串

ct2axkht  于 2022-11-11  发布在  其他
关注(0)|答案(7)|浏览(272)

我可以运行Websocket,但问题是,当我想发送文本时,它在on message事件上向我发送对象blob。
下面是我的WebSocket服务器代码:

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 })

var sockets = [];

wss.on('connection', ws => {
    //var id = ws.upgradeReq.headers['sec-websocket-key'];
    //console.log("New connection id ::", id);
    //w.send(id);
    sockets.push(ws);
    console.log("New client connected"+ ws);

  ws.on('message', message => {

    console.log(`Received message => ${message}`)

    //var id = ws.upgradeReq.headers['sec-websocket-key'];
    //var mes = JSON.parse(message);

    //sockets[message.to].send(mes.message);
     // console.log('Message on :: ', id);
    //console.log('On message :: ', message);
    sockets.forEach(w=> {
        w.send(message);
    });
  })

  ws.send('Welcome by server!')
})

客户端代码摘录

connection.onmessage = (e) => {
  document.getElementById("ReceviedText").innerHTML += ("<li>" + e.data + "</li>");

   // ReceviedText
  console.log(e.data);
  console.log(e);

  var reader = new FileReader(e.data);
  console.log(reader.result);

  //console.log(reader.readAsText());
  console.log(reader.readAsText(e.data));

}

我发现我可以使用文件读取器将blob转换为字符串,但它返回null。

syqv5f0l

syqv5f0l1#

我在对象数组上也遇到了同样的问题。通过使用JSON.stringify将数据转换为JSON字符串来修复它。在客户端上,您可以使用JSON.parse获取数据。

服务器

sockets.forEach(w => {
  w.send(JSON.stringify(message));
});

客户端

connection.onmessage = (message: object) => {
  console.log(JSON.parse(message['data']));
}
6l7fqoea

6l7fqoea2#

我也遇到了同样的问题。我可以通过在服务器中添加**{binary:isBinary}**来修复它。
下面是我的代码:-

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(data,isBinary) {
    wss.clients.forEach(function each(client) {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(data, { binary: isBinary });
      }
    })
  })
})
vaqhlq81

vaqhlq813#

当我通过firefox Web Socket客户端扩展发送消息时,也遇到了同样的问题。在服务器端,我通过使用JSON.stringify将数据转换为JSON字符串来修复这个问题。在客户端,您可以使用JSON.parse获取数据。

服务器

wss.clients.forEach(function each(client) {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        console.log('data %s', data);
        // client.send(data);
        // this is to solve the issue where web socket client
        // send data as blob instead of string
        client.send(JSON.stringify(data));
      }
    });

客户端

ws.onmessage = (e) => {
      const arr = JSON.parse(e.data).data;
      let newData = '';
      arr.forEach((element) => {
        newData+=String.fromCharCode(element);
      });
      console.log('newData ', newData);
    };
vc6uscn9

vc6uscn94#

我已解决此问题..:
第一个

rvpgvaaj

rvpgvaaj5#

FileReader.readAsText()是一个 * 基于事件的 * API,如MDN文档中所述。
因此,您需要设置reader.onload

const reader = new FileReader();
  reader.onload = function(evt) {
    console.log(evt.target.result);
  };
  reader.readAsText(e.data);

此外,还可以使用Blob.text()

websocket.addEventListener("message", e => {        
    e.data.text().then(txt=>console.log(txt))   
});

Docs描述了这两者之间的区别:
Blob.text()返回一个承诺,而FileReader.readAsText()是一个基于事件的API。Blob.text()总是使用UTF-8作为编码,而FileReader.readAsText()可以根据blob的类型和指定的编码名称使用不同的编码。

e4yzc0pl

e4yzc0pl6#

在服务器端

ws.on('message', function message(data, isBinary) {
    wss.clients.forEach(function each(client) {
        if (client !== ws && client.readyState === WebSocket.OPEN) {
            client.send(data, { binary: isBinary });
        }
    });
});

而在客户端

socket.addEventListener('message', (event, isBinary) => 
    console.log(event.data)
})

isBinary参数为我解决了这个问题

zrfyljdw

zrfyljdw7#

在使用Koa时,我遇到了一个特别令人困惑的情况,它要求客户端执行双重任务:

//server side
myCtx.websocket.send( JSON.stringify( message ) );

// client side
let msg = JSON.parse( event.data );
let data = JSON.parse( String.fromCharCode( ...msg.data ) );

在服务器上,如果我只是发送消息,它将在客户端显示为blob
在客户端,我解析了event.data之后,数据是一个二进制数组,[ 123, 34, 116...],所以必须调用String.fromCharCode()。三个点...是javascript扩展器操作符,用于获取整个数组。

相关问题