Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

websockets, updating div with messages from server

websockets, updating div with messages from server

Problem

websocket.onmessage = function (evt) { 
    console.log('Retrieved data from server: ' + evt.data); 
    $('#someDiv').append(evt.data);
};

If i open 2 tabs in my browser, why does this event only fire in the active tab that i send the Message from? Since the data is recieved from the server, shouldnt this fire in both tabs simultaneously?

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,
    // You should not use autoAcceptConnections for production
    // applications, as it defeats all standard cross-origin protection
    // facilities built into the protocol and the browser.  You should
    // *always* verify the connection's origin and decide whether or not
    // to accept it.
    autoAcceptConnections: false
});

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

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('echo-protocol', request.origin);
    console.log((new Date()) + ' Connection accepted.');
    connection.on('message', function(message) {
        if (message.type === 'utf8') {
            console.log('Received Message: ' + message.utf8Data);
            connection.sendUTF(message.utf8Data);
        }
        else if (message.type === 'binary') {
            console.log('Received Binary Message of ' + message.binaryData.length + ' bytes');
            connection.sendBytes(message.binaryData);
        }
    });
    connection.on('close', function(reasonCode, description) {
        console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' disconnected.');
    });
});

Thanks

Problem courtesy of: Johan

Solution

Each tab/window opens own websocket with own identifier and your server should send messages to all websockets opened by current user.

In your case when you're sending the messages only to first connected websocket you can share the data between tabs/windows on same domain using window.localStorage as messages buffer. store.js could help you to put objects to localStorage and retrieve them, and also ensure cross-browser compatibility). Then set an interval for function invocation which will look for new messages periodically.

Solution courtesy of: Eugene Naydenov

Discussion

View additional discussion.



This post first appeared on Node.js Recipes, please read the originial post: here

Share the post

websockets, updating div with messages from server

×

Subscribe to Node.js Recipes

Get updates delivered right to your inbox!

Thank you for your subscription

×