基於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(客戶端)，很簡單的。