Nodejs实现多人同时在线移动鼠标的小游戏分享_node.js

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

var app = http.createServer().listen(9091);

var ws = io.listen(app);

var postions = {};

ws.on('connection', function(client){
// 广播函数
var broadcast = function(msg, cl){
for(var k in ws.sockets.sockets){
if(ws.sockets.sockets.hasOwnProperty(k)){
if(ws.sockets.sockets[k] && ws.sockets.sockets[k].id != cl.id){
ws.sockets.sockets[k].emit('position.change', msg);
}
}
}
};
console.log('\033[92m有新的连接来:\033[39m', postions);
// 客户端连接成功之后，就发送其它客户端的坐标信息
client.emit('position.change', postions);
// 接收客户端发送消息
client.on('position.change', function(msg){
// 目前客户端的消息就只有坐标消息
postions[client.id] = msg;
// 把消息广播给其它所有的客户端
broadcast({
type: 'position',
postion: msg,
id: client.id
}, client);
});
// 接收客户端关闭连接消息
client.on('close', function(){
console.log('close!');
// 删除客户端，并通知其它客户端
delete postions[client.id];
// 把消息广播给其它所有的客户端
broadcast({
type: 'disconnect',
id: client.id
}, client);
});
// 断开连接
client.on('disconnect', function(){
console.log('disconnect!');
// 删除客户端，并通知其它客户端
delete postions[client.id];
// 把消息广播给其它所有的客户端
broadcast({
type: 'disconnect',
id: client.id
}, client);
})
// 定义客户端异常处理
client.on('error', function(err){
console.log('error->', err);
})
});

ws.on('connect', function(){
console.log(ws);
// 开始绑定mousemove事件
document.onmousemove = function(ev){
if(ws.socket.transport.isOpen){
ws.emit('position.change', { x: ev.clientX, y: ev.clientY });
}
}
})

ws.on('position.change', function(data){
// 开始同时在线的别的客户端
if(!isfirst){
isfirst = true;
// 第一条消息是收到别个所有客户端的坐标
for(var i in data){
move(i, data[i]);
}
}else{
// 否则，要不就是别个断开连接的消息，或者别个更新坐标的消息
if('position' == data.type){
move(data.id, data.postion);
}else{
remove(data.id);
}
}
})

ws.on('error', function(){
console.log('error:', ws);
ws.disconnect();
})

function move(id, pos){
var ele = document.querySelector('#cursor_' + id);
if(!ele){
// 不存在，则创建
ele = document.createElement('img');
ele.id = 'cursor_' + id;
ele.src = 'img/cursor.png';
ele.style.position = 'absolute';
document.body.appendChild(ele);
}

ele.style.left = pos.x + 'px';
ele.style.top = pos.y + 'px';
}

function remove(id){
var ele = document.querySelector('#cursor_' + id);
ele.parentNode.removeChild(ele);
}