欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Nodejs實現(xiàn)多人同時在線移動鼠標的小游戲分享

 更新時間：2014年12月06日 14:54:50   投稿：junjie  
這篇文章主要介紹了Nodejs實現(xiàn)多人同時在線移動鼠標的小游戲分享,本文給出了服務(wù)器端和客戶端代碼以及運行方法,需要的朋友可以參考下

最近因為項目需要，所以研究了一下nodejs的websocket實現(xiàn),socket.io,這是nodejs后臺應(yīng)用websocket廣泛使用的框架。

準備工作

1.安裝socket.io,使用命令npm install socket.io
2.windows系統(tǒng)的話，需要vc編譯環(huán)境,因為安裝socket.io的時候，會編譯vc代碼

游戲基本原理

1.服務(wù)器監(jiān)聽客戶端的連接
2.客戶端連接成功時候，綁定頁面移動鼠標事件,事件里處理發(fā)送當前坐標給服務(wù)器
3.服務(wù)器保存一個全局的坐標對象，并以客戶端唯一編號為鍵值
4.有新連接來的時候，把坐標廣播給其它客戶端
5.客戶端斷開連接的時候，服務(wù)端刪除它的坐標信息，并廣播給其它客戶端

開始實現(xiàn)服務(wù)端代碼

scoket.io建立服務(wù)器監(jiān)聽的時候，需要依賴一個http連接，用來處理升級協(xié)議用，所以也需要一個http模塊，代碼如下：

復制代碼 代碼如下:

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


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

var ws = io.listen(app);

然后定義一個全局的坐標對象

復制代碼 代碼如下:

var postions = {};

開始監(jiān)聽客戶端的連接,并新增廣播函數(shù)(其實可用socket.io自帶的廣播方法io.sockets.broadcast.emit),核心代碼如下：

復制代碼 代碼如下:

ws.on('connection', function(client){
    // 廣播函數(shù)
    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);
    // 客戶端連接成功之后，就發(fā)送其它客戶端的坐標信息
    client.emit('position.change', postions);
    // 接收客戶端發(fā)送消息
    client.on('position.change', function(msg){
        // 目前客戶端的消息就只有坐標消息
        postions[client.id] = msg;
        // 把消息廣播給其它所有的客戶端
        broadcast({
            type: 'position',
            postion: msg,
            id: client.id
        }, client);
    });
    // 接收客戶端關(guān)閉連接消息
    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);
    })
});

分析上面的代碼，關(guān)鍵點在于

1.新的客戶端連接成功，發(fā)送其它客戶端的坐標信息
2.客戶端更新坐標信息的時候，通知其它客戶端
3.客戶端斷開連接，通知其它客戶端
4.廣播消息類型分為修改坐標與移除坐標

編寫客戶端html頁面

由于socket.io是自定義的框架，所以客戶端需要引用socket.io.js，這個js可以從socket.io模塊里查找，路徑一般為node_modules\socket.io\node_modules\socket.io-client\dist,里面有合并與壓縮兩個版本，開發(fā)的時候可以用合并版.

完整代碼如下:

復制代碼 代碼如下:

<!DOCTYPE html>
<html>
<head>
    <title>socket.io 多人同時在線互動 例子</title>
    <meta charset="utf-8">
</head>
<body>

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

    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){
            // 不存在，則創(chuàng)建
            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);
    }

</script>
</body>
</html>

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

1.連接成功時，綁定頁面mousemove事件，里面處理發(fā)送新坐標消息
2.收到消息根據(jù)消息類型，處理是修改其它客戶端消息，還是移除其它客戶端消息
3.定義添加其它客戶端cursor圖標與移除cursor圖標
4.處理客戶端異常消息，并添加斷開連接，以讓服務(wù)端移除坐標信息

運行例子

1.保存服務(wù)器代碼為io_multigame.js
2.保存客戶端代碼為io_multigame.html
3.運行服務(wù)器代碼node io_multigame.js
4.打開多個io_multigame.html頁面，即可看到效果

總結(jié)

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

相關(guān)文章

最新評論