Question

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

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

我正在使用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>

现在，如果我打开两个浏览器并指向localhost，我可以将鼠标移到窗口上，顶部的文本框也可以。它显示了坐标。但是，OTHER浏览器不执行任何操作。但是，如果我将鼠标移动到另一个浏览器，它会在其窗口上显示坐标。它就像它只转发到我目前正在盘旋的浏览器。服务器控制台显示两个浏览器的移动。

但由于两个浏览器窗口都响应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});
    });
});

Answer 1

那是因为你只是向接收到来自以下信号的套接字发送：

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

这说：“当'插座'收到'm'信号时，向它发出'继电器'信号”。

你要做的就是这个 - 连接新套接字时，将其添加到阵列中 - 当套接字发出信号时，迭代所有连接的套接字并向每个套接字发出“中继”信号

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

为什么我的socket.io事件没有在多个浏览器上处理？

1 个答案: