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

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

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

1. 建立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) {
        ....  
    });复制代码

2. 建立游戏房间

   // 客户端：随机生成一个房间的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);
      });
    });复制代码

3. 生成房间连接，或者二维码

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

   生成Url

   new QRCode(document.getElementById("qrcode"), location.href + 'play.html?id=' + ID);复制代码

4. 玩家加入房间

   经过扫描二维码，获得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事件，客户端加入房间后，同时通知房间里面的其余玩家。

5. 经过获取客户端request ,获取玩家请求的room id

   //node.js
    var url = client.request.headers.referer复制代码

   每次玩家发送一次请求的时候，无需每次都带上房间的id。

6. 建立玩家数据

   每一个玩家都会生成一个固定的user Id， 保存在server 和 客户端的localStorage 里面

   user = {
        id: null,
        rooms: [
            { roomId: null, data: null}
        ]
    }复制代码

   每个玩家在链接后端的时候均可以建立一份数据，用来恢复掉线后的数据。

---

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