Nodejs實作多人同時在線上移動滑鼠的小遊戲分享_node.js

最近因為專案需要，所以研究了一下nodejs的websocket實作,socket.io,這是nodejs後台應用websocket廣泛使用的框架。

準備工作

1.安裝socket.io,使用指令npm install socket.io
2.windows系統的話，需要vc編譯環境,因為安裝socket.io的時候，會編譯vc碼

遊戲基本原理

1.伺服器監聽客戶端的連線
2.客戶端連線成功時候，綁定頁面移動滑鼠事件,事件裡處理發送當前座標給伺服器
3.伺服器保存一個全域的座標對象，並以客戶端唯一編號為鍵值
4.有新連結來的時候，把座標廣播給其它客戶端
5.客戶端斷開連線的時候，服務端刪除它的座標訊息，並廣播給其它客戶端

開始實作服務端程式碼

scoket.io建立伺服器監聽的時候，需要依賴一個http連接，用來處理升級協定用，所以也需要一個http模組，程式碼如下：

複製程式碼 程式碼如下:

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

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

var ws = io.listen(app);

然後定義一個全域的座標物件

複製程式碼 程式碼如下:

var postions = {};

開始監聽客戶端的連線,並新增廣播函數(其實可用socket.io自帶的廣播方法io.sockets.broadcast.emit),核心程式碼如下：

複製程式碼 程式碼如下:

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){
                                    }
            }
        }
    };
    console.log('     // 客戶端連線成功之後，就傳送其它客戶端的座標資訊
    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);
    })
});

分析上面的程式碼，重點在於

1.新的客戶端連線成功，發送其它客戶端的座標資訊

2.客戶端更新座標資訊的時候，通知其它客戶端

3.客戶端斷開連接，通知其它客戶端
4.廣播訊息類型分為修改座標與移除座標

寫客戶端html頁

由於socket.io是自訂的框架，所以客戶端需要引用socket.io.js，這個js可以從socket.io模組裡找，路徑一般為node_modulessocket.ionode_modulessocket.io-clientdist,裡面有合併與壓縮兩個版本，開發的時候可以用合併版.

完整程式碼如下:

複製程式碼 程式碼如下:

   
   

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

頁面中的img/cursor.png,可以這裡找到,cursor.png,這裡也有很多其它的滑鼠圖示,前端的原理比較簡單，簡單的分析如下

1.連線成功時，綁定頁面mousemove事件，裡面處理傳送新座標訊息
2.收到訊息根據訊息類型，處理是修改其它客戶端訊息，還是移除其它客戶端訊息
3.定義新增其它客戶端cursor圖示與移除cursor圖示
4.處理客戶端異常訊息，並加入斷開連接，讓服務端移除座標資訊

運行範例

1.儲存伺服器程式碼為io_multigame.js
2.儲存客戶端程式碼為io_multigame.html
3.運行伺服器程式碼node io_multigame.js
4.開啟多個io_multigame.html頁面，即可看到效果

總結

寫的比較隨意，參考了了不起的nodejs,這是一本好書，想了解nodejs的朋友們，可以看看這本書。