首頁 > 開發者 > JavaScript
Nodejs實現多人同時線上移動滑鼠的小遊戲分享，nodejs同時線上
最近因為項目需要，所以研究了一下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){
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);
})
});
分析上面的代碼，關鍵點在於
1.新的用戶端串連成功，發送其它用戶端的座標資訊
2.用戶端更新座標資訊的時候，通知其它用戶端
3.用戶端中斷連線，通知其它用戶端
4.廣播訊息類型分為修改座標與移除座標
編寫用戶端html頁面
由於socket.io是自訂的架構，所以用戶端需要引用socket.io.js，這個js可以從socket.io模組裡尋找，路徑一般為node_modules\socket.io\node_modules\socket.io-client\dist,裡面有合并與壓縮兩個版本，開發的時候可以用合并版.
完整代碼如下:
複製代碼 代碼如下:
<!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){
// 不存在，則建立
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事件，裡面處理髮送新座標訊息
2.收到訊息根據訊息類型，處理是修改其它用戶端訊息，還是移除其它用戶端訊息
3.定義添加其它用戶端cursor表徵圖與移除cursor表徵圖
4.處理用戶端異常訊息，並添加中斷連線，以讓服務端移除座標資訊
運行例子
1.儲存伺服器代碼為io_multigame.js
2.儲存用戶端代碼為io_multigame.html
3.運行伺服器代碼node io_multigame.js
4.開啟多個io_multigame.html頁面，即可看到效果
總結
寫的比較隨意，參考了了不起的nodejs,這是一本好書，想瞭解nodejs的朋友們，可以看看這本書。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
