NodeJS实现的一个多人同时在线移动鼠标的小游戏

2017-08-02

感觉写的很好，所以分享给大家~主要还是有程序

最近因为项目需要，所以研究了一下nodejs的websocket实现,socket.io,这是nodejs后台应用websocket广泛使用的框架。

准备工作

安装socket.io,使用命令npm install socket.io
windows系统的话，需要vc编译环境,因为安装socket.io的时候，会编译vc代码

游戏基本原理

服务器监听客户端的连接
客户端连接成功时候，绑定页面移动鼠标事件,事件里处理发送当前坐标给服务器
服务器保存一个全局的坐标对象，并以客户端唯一编号为键值
有新连接来的时候，把坐标广播给其它客户端
客户端断开连接的时候，服务端删除它的坐标信息，并广播给其它客户端

开始实现服务端代码

写的比较随意，参考了nodejs相关书籍，node\前端交流群550392000，大家多多交流~

scoket.io建立服务器监听的时候，需要依赖一个http连接，用来处理升级协议用，所以也需要一个http模块，代码如下

分析上面的代码，关键点在于

新的客户端连接成功，发送其它客户端的坐标信息
客户端更新坐标信息的时候，通知其它客户端
客户端断开连接，通知其它客户端
广播消息类型分为修改坐标与移除坐标

编写客户端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,这里也有很多其它的鼠标图标,前端的原理比较简单，简单的分析如下