Nodejs實(shí)現(xiàn)多人同時(shí)在線移動(dòng)鼠標(biāo)的小游戲分享
最近因?yàn)轫?xiàng)目需要，所以研究了一下nodejs的websocket實(shí)現(xiàn),socket.io,這是nodejs后臺(tái)應(yīng)用websocket廣泛使用的框架。
準(zhǔn)備工作
1.安裝socket.io,使用命令npm install socket.io
2.windows系統(tǒng)的話，需要vc編譯環(huán)境,因?yàn)榘惭bsocket.io的時(shí)候，會(huì)編譯vc代碼
游戲基本原理
1.服務(wù)器監(jiān)聽客戶端的連接
2.客戶端連接成功時(shí)候，綁定頁(yè)面移動(dòng)鼠標(biāo)事件,事件里處理發(fā)送當(dāng)前坐標(biāo)給服務(wù)器
3.服務(wù)器保存一個(gè)全局的坐標(biāo)對(duì)象，并以客戶端唯一編號(hào)為鍵值
4.有新連接來的時(shí)候，把坐標(biāo)廣播給其它客戶端
5.客戶端斷開連接的時(shí)候，服務(wù)端刪除它的坐標(biāo)信息，并廣播給其它客戶端
開始實(shí)現(xiàn)服務(wù)端代碼
scoket.io建立服務(wù)器監(jiān)聽的時(shí)候，需要依賴一個(gè)http連接，用來處理升級(jí)協(xié)議用，所以也需要一個(gè)http模塊，代碼如下：
var http = require('http'),
io = require('socket.io');
var app = http.createServer().listen(9091);
var ws = io.listen(app);
然后定義一個(gè)全局的坐標(biāo)對(duì)象
var postions = {};
開始監(jiān)聽客戶端的連接,并新增廣播函數(shù)(其實(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ā)送其它客戶端的坐標(biāo)信息
client.emit('position.change', postions);
// 接收客戶端發(fā)送消息
client.on('position.change', function(msg){
// 目前客戶端的消息就只有坐標(biāo)消息
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)鍵點(diǎn)在于
1.新的客戶端連接成功，發(fā)送其它客戶端的坐標(biāo)信息
2.客戶端更新坐標(biāo)信息的時(shí)候，通知其它客戶端
3.客戶端斷開連接，通知其它客戶端
4.廣播消息類型分為修改坐標(biāo)與移除坐標(biāo)
編寫客戶端html頁(yè)面
由于socket.io是自定義的框架，所以客戶端需要引用socket.io.js，這個(gè)js可以從socket.io模塊里查找，路徑一般為node_modules\socket.io\node_modules\socket.io-client\dist,里面有合并與壓縮兩個(gè)版本，開發(fā)的時(shí)候可以用合并版.
完整代碼如下:
<!DOCTYPE html>
<html>
<head>
<title>socket.io 多人同時(shí)在線互動(dòng) 例子</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){
// 開始同時(shí)在線的別的客戶端
if(!isfirst){
isfirst = true;
// 第一條消息是收到別個(gè)所有客戶端的坐標(biāo)
for(var i in data){
move(i, data[i]);
}
}else{
// 否則，要不就是別個(gè)斷開連接的消息，或者別個(gè)更新坐標(biāo)的消息
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>
頁(yè)面中的img/cursor.png,可以這里找到,cursor.png,這里也有很多其它的鼠標(biāo)圖標(biāo),前端的原理比較簡(jiǎn)單，簡(jiǎn)單的分析如下
1.連接成功時(shí)，綁定頁(yè)面mousemove事件，里面處理發(fā)送新坐標(biāo)消息
2.收到消息根據(jù)消息類型，處理是修改其它客戶端消息，還是移除其它客戶端消息
3.定義添加其它客戶端cursor圖標(biāo)與移除cursor圖標(biāo)
4.處理客戶端異常消息，并添加斷開連接，以讓服務(wù)端移除坐標(biāo)信息
運(yùn)行例子
1.保存服務(wù)器代碼為io_multigame.js
2.保存客戶端代碼為io_multigame.html
3.運(yùn)行服務(wù)器代碼node io_multigame.js
4.打開多個(gè)io_multigame.html頁(yè)面，即可看到效果
總結(jié)
寫的比較隨意，參考了了不起的nodejs,這是一本好書，想了解nodejs的朋友們，可以看看這本書。
相關(guān)文章
在Linux系統(tǒng)上更新Node.js到最新版本的3種方法小結(jié)
這篇文章主要介紹了在Linux系統(tǒng)上更新Node.js到最新版本的3種方法,使用NVM,使用NPM,用二進(jìn)制包更新Node.js,文中有詳解更新方法,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Node.js 基礎(chǔ)教程之全局對(duì)象的相關(guān)資料,Node.js 中的全局對(duì)象是 global，所有全局變量（除了 global 本身以外）都是 global 對(duì)象的屬性，需要的朋友可以參考下2017-08-08
Node.js 中正確使用 async/await 與 Promise
在Node.js中,async/await是ES2017引入的一種更簡(jiǎn)潔的處理異步操作的方式,它基于Promise來進(jìn)行編寫,使得異步代碼看起來更像同步代碼,易于理解和維護(hù),這篇文章主要介紹了Node.js 中正確使用 async/await 與 Promise 對(duì)象配合,需要的朋友可以參考下2024-07-07
node省市區(qū)三級(jí)數(shù)據(jù)性能測(cè)評(píng)實(shí)例分析
這篇文章主要介紹了node省市區(qū)三級(jí)數(shù)據(jù)性能,結(jié)合具體實(shí)例形式評(píng)測(cè)分析了node省市區(qū)三級(jí)數(shù)據(jù)的實(shí)現(xiàn)、改進(jìn)方法與運(yùn)行效率,需要的朋友可以參考下2019-11-11
配置node服務(wù)器并且鏈接微信公眾號(hào)接口配置步驟詳解
這篇文章主要介紹了配置node服務(wù)器并且鏈接微信公眾號(hào)接口配置步驟詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06
如何在Node.js中使用async函數(shù)的方法詳解
這篇文章主要為大家介紹了如何在Node.js中使用async函數(shù)的方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要介紹了nodejs多版本管理的相關(guān)知識(shí)點(diǎn)，以及實(shí)際操作方法和代碼，有需要的朋友參考下。2018-04-04
Node.js的特點(diǎn)和應(yīng)用場(chǎng)景介紹
這篇文章主要介紹了Node.js的特點(diǎn)和應(yīng)用場(chǎng)景介紹,本文講解了Node.js的異步I/O、 事件循環(huán)與回調(diào)函數(shù)、單線程、 跨平臺(tái)等特性,然后總結(jié)了它的使用場(chǎng)景,需要的朋友可以參考下2014-11-11
今天做項(xiàng)目的時(shí)候需要的一個(gè)問題，想查找一個(gè)字符串，但是忘記了，具體在那個(gè)文件里了，于是就想起來了node.js，毫無(wú)壓力的找到了這個(gè)字符串，分享給大家2014-09-09
這篇文章主要介紹了發(fā)布一款npm包幫助理解npm的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01