最近因為項目需要，所以研究了一下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 app = http.createServer().listen(9091);
var ws = io.listen(app);
然后定義一個全局的坐標對象
開始監聽客戶端的連接,并新增廣播函數(其實可用socket.io自帶的廣播方法io.sockets.broadcast.emit),核心代碼如下：
分析上面的代碼，關鍵點在于
1.新的客戶端連接成功，發送其它客戶端的坐標信息
2.客戶端更新坐標信息的時候，通知其它客戶端
3.客戶端斷開連接，通知其它客戶端
4.廣播消息類型分為修改坐標與移除坐標
編寫客戶端html頁面
由于socket.io是自定義的框架，所以客戶端需要引用socket.io.js，這個js可以從socket.io模塊里查找，路徑一般為node_modules/socket.io/node_modules/socket.io-client/dist,里面有合并與壓縮兩個版本，開發的時候可以用合并版.
完整代碼如下:
<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的朋友們，可以看看這本書。
新聞熱點
疑難解答
