所以我正在写一个小的'共同浏览'演示.主要用于教育目的.
无论如何,计划是这样的.用户将浏览器打开到我的服务器并移动鼠标.这样做时,浏览器将鼠标坐标发送到服务器,服务器将坐标转发回订阅该频道的任何浏览器.然后坐标显示在文本框中.
我正在使用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});
});
});
那是因为你只是向你收到来自以下信号的套接字发送:
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'});