Sunday 30 April 2017

When opening multilple clients, old client does not get new message using websocketM

My goal is when I open a new browser(client), the message sent from the server in the previous client gets updated as well.

The clients message to the server, the server stores it and redistribute it to all the clients.All clients should get the same list of messages.

As of right now, when I open the first browser, the message is sent successfully, and then I open the second one(it works) but the message is not updated in the first browser.

Here's my code for server:

<html>
<head>
<!-- This is the websocket SERVER -->
<script src="http://localhost:5000/socket.io/socket.io.js"></script>

</head>
<body>
<div id="msg"></div> 
<script>
  // connect to WEBSOCKET server
  var socket = io.connect('http://localhost:5000',{'forceNew':true} );

  // Fire an event (that the server will handle
  socket.emit('myEvent', 'Hello Message from the client');

  // Attach event handler for event fired by server
  socket.on('server', function(data) {
     var elem = document.getElementById('msg'); 
     console.log(data);
     elem.innerHTML += "<br>" + data; // append data that we got back
  });
</script>
</body>
</html>

Here's for client:

//---------------------------------------------------------------
// The purpose is to introduce you to websockets
// This is a SERVER that is SEPARATE from the http server.
//
// Your webpage (in this case the index.html in this directory)
// will be SERVED by the http server. THEN, it will connect to the 
// websocket server. Then - they will talk to each other!
//
// Note that in regular http - the server cannot initiate a conversation
// Here, the websocket server sends a message to the client browser.
//
// This example has THREE parts
// 1) The http server code (which is same as what we did earlier)
// 2) This code - this is the web socket server
// It prints what it got from client. It also sends a message to the
// client after every 1 second.
// 3) The html or client code. Note how it connects to the websocket
// and how it sends and receives messages
//
// To RUN THIS EXAMPLE
// First, run node httpServer.js on one terminal
// Next, run node 1_ws.js on another terminal
// Next, type localhost:4000/index.html on some browser
//
//---------------------------------------------------------------
var items=[];
var io = require('socket.io').listen(5000);
if (typeof localStorage === "undefined" || localStorage === null) {
  var LocalStorage = require('node-localstorage').LocalStorage;
  localStorage = new LocalStorage('./scratch');
}

io.sockets.on('connection', function(socket) {
  socket.on('myEvent', function(content) {
      //i need to store the content
      items.push(content);
    localStorage.setItem("list",JSON.stringify(items)); 
    socket.emit('server', JSON.parse(localStorage.getItem("list")));

  });
});

I'm running on the local server:

//---------------------------------------------------------------
// The purpose is to serve a file!
//---------------------------------------------------------------

var util = require('util');
var path = require('path');
var http = require('http');
var fs   = require('fs');
var server = http.createServer();

// attach handler
server.on('request', function (req,res) {
  var file = path.normalize('.' + req.url);

  fs.exists(file, function(exists) {
    if (exists) {
      var rs = fs.createReadStream(file);

      rs.on('error', function() {
        res.writeHead(500); // error status
        res.end('Internal Server Error');
      });


      res.writeHead(200); // ok status

      // PIPE the read stream with the RESPONSE stream
      rs.pipe(res);
    } 
    else {
      res.writeHead(404); // error status
      res.end('NOT FOUND');
    }
  });

}); // end server on handler

server.listen(4000);
console.log("start");



via Zac Uwyo H

No comments:

Post a Comment