1

所以我正在写一个小的“共同浏览”演示。主要用于教育目的。

无论如何，计划是这样的。用户打开他们的浏览器到我的服务器并移动他们的鼠标。这样做时，浏览器将鼠标坐标发送到服务器，服务器将坐标转发回订阅频道的任何浏览器。然后坐标将显示在文本框中。

我正在使用nodejs和socket.io。

这是我的 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});
    });
});

这是我的客户：

<!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>

现在，如果我打开两个浏览器并将它们都指向本地主机，我可以将鼠标移到一个窗口上，顶部的文本框就可以工作了。它显示坐标。但是，其他浏览器不执行任何操作。但是，如果我将鼠标移到另一个浏览器上，它就会在其窗口上显示坐标。就像它只中继到我当前悬停的浏览器一样。服务器控制台显示两个浏览器上的动作。

但是由于两个浏览器窗口都响应relay事件（通道），两个浏览器不应该回显坐标吗？这样浏览器 1 的鼠标移动会回显到浏览器 2，当我转到浏览器 2 时，它的坐标会回显到浏览器 1？

希望这是有道理的。

谢谢

** 解决方案 **

感谢 Victor Stanciu 的快速回答。这是我为修复服务器所做的。 

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});
    });
});
4

1 回答 1

5

那是因为您只向从以下位置接收信号的套接字发出信号：

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

这表示：“当从 'socket' 接收到 'm' 信号时，向它发出 'relay' 信号”。

你需要做的是——当一个新的套接字被连接时，将它添加到一个数组中——当一个套接字发出一个信号时，遍历所有连接的套接字并向它们中的每一个发出“中继”信号

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});
        });
    });
});

或者，而不是手动迭代连接的套接字，socket.io 提供了一种方法来做到这一点：

 io.sockets.emit('this', { will: 'be received by everyone'});
于 2012-10-17T13:28:32.420 回答