基于socket.io的实时在线HTML5游戏思路

2017-07-30 3,826 阅读2分钟

Github博客: github.com/aototo/blog
喜欢的朋友star 支持一下

有2个月没怎么写文章了，这次项目做了一个HTML5的在线实时游戏，游戏是基于
Socket.IO架构写的，网上的资料也很多，比较零散，啰嗦。在这里总结下整个流程，开拓思路。（PS: 主要是整个流程的思路，不讲框架的基础用法）

创建node服务端

 var app = require('http').createServer(handler)
 var io = require('socket.io')(app);
 var fs = require('fs');

 app.listen(8080, function() {
   console.log('Listening at localhost:8080')
 });

 var room = {};
 // 客户端连接后处理事件
 io.on('connection', function(client) {
     ....  
 });

创建游戏房间

 // 客户端：随机生成一个房间的keyId，然后发送到后端
 var socket = io.connect();
 socket.emit('create', roomId);

 // 服务端：
 io.sockets.on('connection', function(client) {
     //接受create事件 ,并且加入roomId
   client.on('create', function(roomId) {
     // 可以在这里记录roomId, 并且保存到rooms数组里
     // rooms.push(roomId)
     client.join(roomId);
   });
 });

生成房间链接，或者二维码

可以使用qrcodejs来生成二维码。具体的步骤就是生成一个带有code的Url。玩家根据Code来判断是否有房间。有则加入，没有则创建。

生成Url
```
 new QRCode(document.getElementById("qrcode"), location.href + 'play.html?id=' + ID);
```

玩家加入房间

通过扫描二维码，得到location.search里roomId，然后发送到后端，加入房间

 var roomId = location.search.replace('?id=', '');

 // 客户端： 得到room id
 socket.emit('join', {
     roomId: roomId,
     ...
 });

 // 服务端
 io.sockets.on('connection', function(client) {
     ...
     client.on('join', function(data) {
         client.join(data.roomId);
         // 通知room房间里面的其他玩家
         io.in(data.roomId).emit('new_player', data);
     });
     ...
 }

服务端接收join事件，客户端加入房间后，同时通知房间里面的其他玩家。

通过获取客户端request ,获取玩家请求的room id
```
 //node.js
 var url = client.request.headers.referer
```
每次玩家发送一次请求的时候，无需每次都带上房间的id。
创建玩家数据

每个玩家都会生成一个固定的user Id，保存在server 和客户端的localStorage 里面
```
 user = {
     id: null,
     rooms: [
         { roomId: null, data: null}
     ]
 }
```
每一个玩家在连接后端的时候都可以创建一份数据，用来恢复掉线后的数据。

具体大概的流程都在上面了，socket的具体使用可以参考官网的demo, 这边只是一个大概的流程思路。具体的逻辑代码也没什么好讲的，比如玩家做了动作
emit (客户端) -> on (服务端) - emit -> on(客户端)，很简单的。

友情链接：