阅读 2653

基于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(客户端),很简单的。