Websocket server prints object Object instead of a string

Question

I'm creating a website with node.js and using websocket. The client send an image as string to the server and the server prints object Object instead of a string. Where is the problem?

app.js

#!/usr/bin/env node
var WebSocketServer = require('websocket').server;
var http = require('http');

var server = http.createServer(function(request, response) {
    console.log((new Date()) + ' Received request for ' + request.url);
    response.writeHead(404);
    response.end();
});
server.listen(8080, function() {
    console.log((new Date()) + ' Server is listening on port 8080');
});

wsServer = new WebSocketServer({ 
    httpServer: server });

function originIsAllowed(origin) {
  // put logic here to detect whether the specified origin is allowed.
  return true;
}

var connections = {};
var connectionIDCounter = 0;

wsServer.on('request', function(request) {
    if (!originIsAllowed(request.origin)) {
      // Make sure we only accept requests from an allowed origin
      request.reject();
      console.log((new Date()) + ' Connection from origin ' + request.origin + ' rejected.');
      return;
    }

    var connection = request.accept(null, request.origin);

    // Store a reference to the connection using an incrementing ID
    connection.id = connectionIDCounter ++;
    connections[connection.id] = connection;

    // Now you can access the connection with connections[id] and find out
    // the id for a connection with connection.id

    console.log((new Date()) + ' Connection ID ' + connection.id + ' accepted.');
    connection.on('close', function(reasonCode, description) {
        console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' disconnected. ' +
                    "Connection ID: " + connection.id);

        // Make sure to remove closed connections from the global pool
        delete connections[connection.id];
    });

    connection.on('message', function(message) {
        console.log((new Date()) + "Message received: " + message);//this prints object Object
        //sendToConnectionId(1, message);
    });
});



// Send a message to a connection by its connectionID
function sendToConnectionId(connectionID, data) {
    var connection = connections[connectionID];
    if (connection && connection.connected) {
        connection.send(data);
    }
}

and this is the javascript client

window.addEventListener("load", function() {

var ws;

var video = document.getElementById("videoElement");

var canvas = document.getElementById("canvas");

var playButton = document.getElementById("playButton");
var closeButton = document.getElementById("closeButton");

//log function
var log = function(msg){
    document.getElementById("log").innerHTML = msg;
}

navigator.getUserMedia = navigator.getUserMedia 
                        || navigator.webkitGetUserMedia 
                        || navigator.mozGetUserMedia 
                        || navigator.msGetUserMedia 
                        || navigator.oGetUserMedia;

if (navigator.getUserMedia) {       
    navigator.getUserMedia({video: true}, handleVideo, videoError);
}


function handleVideo(stream) {
    video.src = window.URL.createObjectURL(stream);
    video.play();
}

function videoError(e) {
    // do something
}

function disableButtons(disPlay, disClose){
    playButton.disabled = disPlay;
    closeButton.disabled = disClose;
}

//websocket connection
if('WebSocket' in window){
    connect("ws://127.0.0.1:8080");
}else{
    log("WebSocket not supported");
}
function connect(host){
    ws = new WebSocket(host);
    ws.onopen = function(){
        log("Connected to the server " + host);
    }
    ws.onclose = function(){
        log("Socket closed");
    }
    ws.onerror = function(evt){
        log('<span style="color: red;">ERROR:</span> ' + evt.data); 
    }
}
playButton.addEventListener("click", function() {
    disableButtons(true, false);
    video.play();
    setInterval(function() {
        canvas.getContext('2d').drawImage(video, 0, 0, 720, 480);
        var data = canvas.toDataURL('image/png').toString();
        ws.send(JSON.stringify(data.substr(0,50000)));

        //for test
        log(data.substr(0,50000));//this prints a string

    }, 100);

});

closeButton.addEventListener("click", function() {
    disableButtons(false, true);
    video.pause();
}, false);

}, false);

Just use JSON.stringify(message) and observe what actual data you are receiving. I doubt it is string — binariedMe, May 01 '17 at 21:42
It's not. `message` there is an object that contains a couple properties. You want `message.utf8Data` — Brennan, May 01 '17 at 21:43

Scott Schupbach · Accepted Answer · 2017-05-01T22:14:03.153

2

This has nothing to do with Websocket. It's because using the "string" + variableName syntax causes the variable to be stringified, and the default string value of an object is [object Object]. To get the actual contents of the object, change

console.log((new Date()) + "Message received: " + message);

to

console.log(new Date(), "Message received:", message);

edited May 01 '17 at 22:14

answered May 01 '17 at 21:44

Scott Schupbach

1,284
9
21

1

It works, dude! So, if now I want to send the message the server receive to other client, what should I do? – Tzeentch1987 May 01 '17 at 22:27

score 0 · Answer 2 · answered May 01 '17 at 21:46

Not tested but I think in JSON you have to send key+value pairs, so on client side js:

ws.send(JSON.stringify({imgdata: data.substr(0,50000)}));

and on server side try to get it by:

  connection.on('message', function(message) {
        console.log((new Date()) + "Message received: " + message.imgdata);
        //sendToConnectionId(1, message);
    });

score 0 · Answer 3 · answered May 01 '17 at 21:50

If you look at the source of the Websocket library you are using, you can see the object that is sent to the callback

message there has two properties, the type of data in the message, and the actual data. This indicates that you actually want message.utf8Data instead of just message

Websocket server prints object Object instead of a string

3 Answers3