socket.io get data from onclick action then pass the data to other pages to execute the data

Question

socket.io get data from onclick action then pass the data to other pages to execute the data

I want to create a page using node.js and socket.io.

There are two buttons inside the page, when I click one of them, it will change a variable which defines the animation-duration(I omit the CSS animation codes here).

When I open the same page on another web-browser and click one of the buttons, I hope to see the change in both of the webpages. I don't know how to write the code inside the socket.on('chat', function(data){???}); to make two pages communicate with each other.

Client side:

//socket.io codes--

<script type="text/javascript" charset="utf-8">

    var socket = io.connect('http://localhost:3000');

    socket.on('chat', function  (data)
    {
         function change_position(data)
          {
           document.getElementById("animation1").style.WebkitAnimationDuration=data;
          }
    });

 </script>

.....

//action--

<body>
<button id="1b" type="button" style="position:absolute; left:377px; top:220px;" value="2s"; onclick="change_position(value)"> - 1 - </button>

<button id="2b" type="button" style="position:absolute; left:477px; top:220px;" value="15s"; onclick="change_position(value)"> - 2 - </button>
</body>

server side:

var io = require('socket.io'),
  connect = require('connect');

var app = connect().use(connect.static('public')).listen(3000);
var chat_room = io.listen(app);

chat_room.sockets.on('connection', function (socket) {

  socket.on('chat', function  (data) {
    chat_room.sockets.emit('chat', data);
  });
});

node.js
socket.io
communicate

Answer 1

If your want a message to propagate to all clients/sockets, in your server you should have something like:

chat_room.sockets.on('connection', function (socket) {

  socket.on('chat', function  (data) {
    socket.broadcast.emit('chat', data);
    socket.emit('chat',data);
  });

});

The line socket.emit('chat',data); allows you to send the message back also to the sender of it, because broadcast will send it all other sockets.

Of course, you could ommit that line and handle the message sending logic in the client; i.e. adding some JavaScript code that makes the changes you want just after sending the message to the server.

Answer 2

You can emit on your client using socket.emit('message', data). Then on the server get it with chat_room.socket.on('message', data). Emit it to the clients using chat_room.sockets.emit('message', data).