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

   
   

<script type="text/javascript" src="socket.io.js"></script>
<script type="text/javascript"><br>     var ws = io.connect('http://localhost:9091/');<br>     var isfirst;</script>

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