Home/ Questions/Q 8686327
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T22:48:59+00:00

So I am writing a small ‘co-browsing’ demo. Mostly for educational purposes. Anyway, the

  • 0

So I am writing a small ‘co-browsing’ demo. Mostly for educational purposes.

Anyway, the plan is this. Users open their browser to my server and move their mouse around. When doing so, the browser sends the mouse coordinates to the server and the server relays the coordinates back to any browser subscribing to the channel. The coordinates are then displayed in a text box.

I am using nodejs and socket.io.

Here is my server.js:

var app = require('http').createServer(handler),
    io = require('socket.io').listen(app),
    fs = require('fs');


app.listen(80);

function handler(req, res) {
    var file = __dirname + '/public/index.html';
    fs.readFile(file, 
        function(err, data) {
            if(err) {
                res.writeHead(500);
                return res.end('Error loading index.html');
            }

            res.writeHead(200);
            res.end(data);
        }
    );
}


io.sockets.on('connection', function(socket) {
    socket.on('m', function(data) {
        socket.emit('relay', {msg: 'MouseX: ' + data.x + ' MouseY: ' + data.y});
    });
});

Here is my client:

<!doctype html>
<html>
    <head>
    </head>
    <body>

        <input id='box' type='text' size='200' />

        <script src='/socket.io/lib/socket.io.js'></script>
        <script>

            var socket = io.connect('http://localhost');
            var b = document.getElementById('box');

            socket.on('relay', function(data) {
                b.setAttribute('value', data.msg);
            });

            document.onmousemove = function(event) {
                event = event || window.event;
                socket.emit('m', {x: event.clientX, y: event.clientY});
            }


        </script>

    </body>
</html>

Now, if I open two browsers and point both to localhost I can move the mouse over a window and the textbox at the top works. It shows the coordinates. However, the OTHER browser doesn’t do anything. But if I move the mouse over to the other browser, it then displays the coordinates on its window. It’s like it only relays to the browser I am currently hovering over. The server console shows movements on both browsers.

But since both browser windows are responding to the relay event (channel), shouldn’t both browsers echo the coordinates? So that browser 1’s mouse movement is echoed to browser 2 and when I go over to browser two, its coordinates are echoed over to browser 1?

Hope that makes sense.

Thanks

** SOLUTION **

Thanks to Victor Stanciu for the quick answer. Here is what I did to fix the server. 

var app = require('http').createServer(handler),
    io = require('socket.io').listen(app),
    fs = require('fs');


app.listen(80);

function handler(req, res) {
    var file = __dirname + '/public/index.html';
    fs.readFile(file, 
        function(err, data) {
            if(err) {
                res.writeHead(500);
                return res.end('Error loading index.html');
            }

            res.writeHead(200);
            res.end(data);
        }
    );
}

var sockets = [];
io.sockets.on('connection', function(socket) {
    sockets.push(socket);

    socket.on('m', function(data) {
        io.sockets.emit('relay', {msg: 'MouseX: ' + data.x + ' MouseY: ' + data.y});
    });
});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    That’s because you are only emmiting to the socket that you receive the signal from:

    io.sockets.on('connection', function(socket) {
    socket.on('m', function(data) {
        socket.emit('relay', {msg: 'MouseX: ' + data.x + ' MouseY: ' + data.y});
    });
});

    This says: “When the ‘m’ signal is received from ‘socket’, emit the ‘relay’ signal to it”.

    What you have to do is this
    – when a new socket is connected, add it to an array
    – when a socket emits a signal, iterate over all the connected sockets and emit the ‘relay’ signal to each of them

    var sockets =  [];
io.sockets.on('connection', function(socket) {
    sockets.push(socket);

    socket.on('m', function(data) {
        sockets.forEach(function (socket) {
            socket.emit('relay', {msg: 'MouseX: ' + data.x + ' MouseY: ' + data.y});
        });
    });
});

    Alternatively, rather that manually iterating through the connected sockets, socket.io provides a way to do this:

     io.sockets.emit('this', { will: 'be received by everyone'});
    • 0