Websocket sending blob object instead of string

Question

I am somehow able to run Websocket but the problem is that it is sending me object blob on on message event while i want to send the text.

Here is my websocket server code:

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!')
})

Client side Code Excerpt

connection.onmessage = (e) => {
  document.getElementById("ReceivedText").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));
  
}

I found that I can convert blob to string using file reader but it returning null.

Where are you initializing the connection server side ?

edkeveked
– edkeveked

2018-12-25 09:55:44 +00:00
Commented Dec 25, 2018 at 9:55 — edkeveked
– edkeveked, Commented Dec 25, 2018 at 9:55

D V S SAI REDDY · Accepted Answer · 2022-07-07 07:33:34Z

8

I also faced the same issue. I can fix it by adding {binary:isBinary} in Server.

Here is my code:-

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

answered Jul 7, 2022 at 7:33

D V S SAI REDDY

811 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stéphane M. Over a year ago

I don't understand this tip but it works.

Tomas Vancoillie · Accepted Answer · 2019-10-01 08:06:09Z

4

I had the same issue with an object array. Fixed it by converting the data as a JSON string with JSON.stringify. On the client, you can get the data with JSON.parse.

Server

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

Client

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

answered Oct 1, 2019 at 8:06

Tomas Vancoillie

3,8682 gold badges36 silver badges51 bronze badges

1 Comment

martinho Over a year ago

we can use message.toString() in place JSON.stringify(message)

yongchang · Accepted Answer · 2022-01-18 07:31:04Z

I had the same issue when I send the message via firefox web socket client extension. On the server side, I fixed it by converting the data as a JSON string with JSON.stringify. On the client, you can get the data with JSON.parse.

Server

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

Client

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

Sven Eberth · Accepted Answer · 2021-08-22 21:23:47Z

I have resolved this issue..:

//index.js (Server)

const express = require('express');
const http = require('http');
const WebSocket = require("ws");
const PORT = 3000;

const server = http.createServer(express);
const wss = new WebSocket.Server({server});

wss.on('connection',function connection(ws){
    ws.on('message',function incoming(message){
        console.log("Received: "+message);
        
        wss.clients.forEach(function each(client){
            if(client!==ws && client.readyState===WebSocket.OPEN)
            {
                client.send(JSON.stringify(message));
            }
        });
    });
});

server.listen(PORT,()=>console.log(`Server is listening to PORT ${PORT}`));

<!-- index.html page -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Client 1</title>
</head>
<body>
   <input type="text" name="messageBox" id="messageBox">
   <button type="button" id="sendBtn">Send</button>

   <div class="container">
       <div class="receive-message">
           <p id="message"></p>
       </div>
   </div>
</body>
<script type="text/javascript">

    var sendBtn = document.getElementById("sendBtn");
    var messageBox = document.getElementById("messageBox");

    var socket = new WebSocket("ws://localhost:3000");

    sendBtn.addEventListener("click",()=>{
        let val = messageBox.value;
        socket.send(val);
    });

    socket.addEventListener("open",function(event){
        socket.send("Connected.....");
    });

    socket.addEventListener('message',function(event){
        var string_arr =JSON.parse(event['data']).data;
        var string = "";

        string_arr.forEach(element => {
            string+=String.fromCharCode(element);
        });
        
        console.log(string);
    });
</script>
</html>

starriet 차주녕 · Accepted Answer · 2022-02-07 14:52:55Z

0

FileReader.readAsText() is an event based API, as mentioned in MDN docs.

So you need to set reader.onload:

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

Also, Blob.text() can be used.

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

Docs describes the difference between these two:

Blob.text() returns a promise, whereas FileReader.readAsText() is an event based API. Blob.text() always uses UTF-8 as encoding, while FileReader.readAsText() can use a different encoding depending on the blob's type and a specified encoding name.

answered Feb 7, 2022 at 14:52

starriet 차주녕

4,23634 silver badges33 bronze badges

Comments

Harry Who · Accepted Answer · 2022-03-07 20:39:42Z

0

on the server side

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

and on the client side

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

the isBinary parameter solved the problem for me

answered Mar 7, 2022 at 20:39

Harry Who

1

Comments

Aaron · Accepted Answer · 2022-08-26 15:58:07Z

0

I had a particularly confusing situation, while using Koa, that required the client side to do double duty:

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

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

On the server if I just sent the message, it would show up as a blob on the client side.

On the client side, after I parsed the event.data the data was a binary array, [ 123, 34, 116...] so had to do the String.fromCharCode() call. The three dots ... is the javascript spreader operator, to get the whole array.

edited Aug 26, 2022 at 15:58

answered Aug 26, 2022 at 15:52

Aaron

4595 silver badges17 bronze badges

Comments

MarkDen Becu · Accepted Answer · 2023-08-08 13:57:56Z

I don't really know if this is the right way to fix this problem, but it works. I'm just starting to study websocket.

client.send(`Message : ${message}`);

(Server side)----------------------------------

    for(let client of clients) {
      client.send(`Message : ${message}`);
    }
  });

(Client side)-----------------------------------

// handle incoming messages
socket.onmessage = function(event) {
  let incomingMessage = event.data;
  showMessage(incomingMessage);
};

socket.onclose = event => console.log(`Closed ${event.code}`);

// show message in div#messages

function showMessage(message) {
  let messageElem = document.createElement('div');
  messageElem.textContent = message;
  document.getElementById('messages').prepend(messageElem);
}

Try this tutorial, I got the code from here: https://javascript.info/websocket?fbclid=IwAR2KhRORI8OBUnFPQI0qmIjigq9B9m4Z-fHGqDPNWPmxfa4eraj8Tw9O-l4#:~:text=A%20simple%20example,also%20encrypted%20wss%3A%2F%2F%20protocol

Collectives™ on Stack Overflow

Websocket sending blob object instead of string

8 Answers 8

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related