基於socket.io的實時線上HTML5遊戲思路

凹凸卿發表於2017-07-30
HTML遊戲

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

相關文章