【联机对战】微信小程序联机游戏开发流程详解

TA远方

已于 2023-07-22 15:33:51 修改

阅读量6.6k

点赞数 14

分类专栏：微信小程序源码文章标签：微信小程序小程序联机游戏中国象棋游戏源码

于 2023-02-28 20:00:00 首次发布

本文链接：https://blog.csdn.net/zs1028/article/details/129105834

版权

微信小程序源码专栏收录该内容

23 篇文章 22 订阅

订阅专栏

现有一个微信小程序叫中国象棋项目，棋盘类的单机游戏看着有缺少了什么，现在给补上了，加个联机对战的功能，增加了可玩性，对新手来说，实现联机游戏还是有难度的，那要怎么实现的呢，接下来给大家讲一下。

考虑到搭建联机游戏的服务器成本不小，第一个想法是用小程序的蓝牙功能实现游戏联机的，但是其API接口提供的蓝牙硬件支持兼容问题不少，暂时不去折腾了，现在采用UDP通信就很容易实现，可以在WIFI局域网内让两个以上小程序实现通信。

UDP通信

先来了解一下 UDP通信的工作原理，这是一个面向无连接的传输协议，是UDP通信，与之对应的是面向可连接的传输协议，是 TCP通信

从上图看出来，UDP通信的方式很简单，可以想象它们能充当其中一个角色，

client客户端：只负责发送报文
server服务端：只负责接收报文

小程序实现UDP通信，要创建client客户端和服务端server，各占一个socket端口，
对初学者来说，第一次接触不好理解，端口，可比喻成线路一端的接口。

TCP通信的面向连接是比UDP通信最可靠的，那为什么不优先采用TCP通信呢

小程序的TCP通信实现过程中，需要绑定到wifi，这一点获取wifi信息的处理有遇到问题，对新手来说是比较麻烦的，暂且避之，能正常获取到wifi信息再来考虑

client客户端

直接在一个模块文件中实现，这个在项目中的文件是lan.js，可以理解它为局域网工具模块，

负责发送

要向server服务端发送报文（消息），就写一个方法sendMessage(e)来调用，传入服务端的remoteInfo，实现代码如下

import Util from './util';

function sendMessage(e){
  //需要传入的参数
  const { message, port, remoteInfo, fail, success, autoClose } = e;
  let udp = wx.createUDPSocket();
  udp.onError(err=>{
  	//...这里处理初始化udp的错误
  });
  udp.onMessage(res=>{
    const { remoteInfo, localInfo } = res;
    if(autoClose) udp.close();//默认自动关闭udp
    //消息res.message是ArrayBuffer对象，要转换为json object对象才好处理
    let message = Util.arrayBufferToString({data:res.message});
    message = Util.parseJSON(message);
    //返回服务端响应的数据
    success(message,remoteInfo,localInfo);
  });
  //绑定端口
  udp.bind(port);
  //发送消息message 到服务端 `address（IP）`和`port(端口)`
  udp.send({
    address:remoteInfo.address,
    port:remoteInfo.port,
    message:toStringMesssage(message)
  });
  return udp;
}

客户端向服务端发出消息，没必要加请求超时的处理，后面有个逻辑是处理连接的，用它代替连接超时处理的判断

连接服务端

客户端连接到服务端方法是connectServer(remoteInfo,e)，实现代码如下，加了定时连接请求，如果请求超时了，就会提示用户连接超时（连接断开）

const Timeout = 6000;//超时6s

function connectServer(remoteInfo,e){
  const { config, onReceive, onError, onConnect, onDisconnect } = e;
  let connectInfo;
  let timer,timer2;
  //关闭定时器
  const closeTimer = function(){
    if(timer) {
      clearTimeout(timer);
      timer=undefined;
    }
    if(timer2) {
      clearTimeout(timer2);
      timer2=undefined;
    }
  };
  const clientUdp = wx.createUDPSocket();
  clientUdp.onClose(function(){
    closeTimer();
  });
  clientUdp.onError(function(err){
    closeTimer();
    //...这里处理udp抛出的错误，回调onError
    onError(err);
  });
  //默认不传port，就绑定一个随机的port(端口号)
  clientUdp.bind();
  let time;
  let sendSign = function(){
	//定时发送
    timer = setTimeout(function(){
      let message = {
        intent:'keep_connect',
        ntime:Date.now(),
      };
      if(!connectInfo){
        message.intent='create_connect';
        message.data=config;
      }
      //定时向服务端发送连接信息
      clientUdp.send({
        address:remoteInfo.address,
        port:remoteInfo.port,
        message:JSON.stringify(message)
      });
      //加个定时器，用于超时判断
      timer2 = setTimeout(function(){    
        connectInfo = null;
        onDisconnect({ errMsg:'the request timeout' });
      },Timeout);
    },config.time || 3000);
  };
  clientUdp.onMessage(function(res){
    //防抖处理
    closeTimer();
    const { localInfo,remoteInfo } = res;
    let message = Util.arrayBufferToString({data:res.message});
    message = Util.parseJSON(message);
    if(message.intent=='create_connect'){
      connectInfo = remoteInfo;
      //回调连接事件
      onConnect({message:message.data,localInfo,remoteInfo});
    }else{
      if(time && message.otime==undefined) message.otime = Date.now() - time;
      //回调接收事件
      onReceive({message,localInfo,remoteInfo});
      time = Date.now(); 
    }
    sendSign();
  });
  //开始发送
  sendSign();
  return clientUdp;
}

方法sendSign()就是发送信号的意思，可以这样认为，在网络上冒个泡，可以让对方知道你在线，主动找你沟通，如果超过时间还不吐泡泡，就认为你潜水了(隐身)

请添加图片描述

server服务端

负责接收

接下来，写一个叫服务端server的创建方法createServer()，用于监听客户端发来的连接请求，还要处理其它的请求，稍微复杂一点，实现代码如下

import Util from './util';

function createServer(e){
  const { config, onReceive, onError, onConnect, onDisconnect } = e;

  let udp = wx.createUDPSocket();
  udp.onError(function(err){
  	//...这里处理udp抛出错误，回调onError
    onError(err);
  });
  udp.onClose(function(){
    closeTimer();
  });
  udp.onMessage(function(res){
    const { localInfo, remoteInfo } = res;
    let message = Util.arrayBufferToString({data:res.message});
    message = Util.parseJSON(message);
    let response;
    switch(message?.intent){
      case 'create_connect':
        //...处理创建连接请求
        break;
      case 'keep_connect':
        //...处理保持连接请求
        break;
      default:
	    //如果没处理，就交给回调onReceive处理
	    response = onReceive({ localInfo, remoteInfo, message });
    }
    //如果还没处理，就不需要响应了（不理睬）
    if(!response) return;
    //服务端响应数据发给客户端
    udp.send({
      address:remoteInfo.address,
      port:remoteInfo.port,
      message:toStringMesssage(response)
    });
  });
  //绑定一个服务器端口
  let port = udp.bind(config.port);
  return {
    getPort(){
      return port;
    },
    close(){
      udp.close();
    }
  };
}

有没有觉得，服务端的处理逻辑很像web的服务器处理请求，处理响应来自客户端（浏览器）的请求

管理客户端连接

再具体一点，处理创建和保持连接请求的方法，将上面的代码改一下，添加后的代码如下

const Timeout = 6000;//超时6s
//...
 let connectInfo;
 let timer;
 //保持连接（定时连接检查）
 const keepConnectInfo = function(){
   timer = setTimeout(function(){
     if(connectInfo){
       let otime = Date.now()-connectInfo.utime;
       //未超时
       if(otime<Timeout){
         keepConnectInfo();
         onReceive({ 
           //...回调接收事件，返回连接状态
         });
         return;
       }
     }
     connectInfo=null;
     //若连接超时了，就回调断开连接的方法
     onDisconnect({ errMsg:'wait update is timeout'});
   },Timeout);
 };
 //关闭定时器
 const closeTimer = function(){
   //...
 };

switch(message?.intent){
  case 'create_connect'://创建连接请求
     {
       let data = message.data;
       connectInfo = {
       	//...记录连接信息
       };
       //回调连接事件
       onConnect({
         //...传连接数据
       });
       response = {
         intent:message.intent,
         //...返回连接后获取的初始化数据
       };
       //防抖处理
       closeTimer();
       keepConnectInfo();
       break;
     }
   case 'keep_connect'://保持连接请求
     {
       if(connectInfo) {
         connectInfo.utime = Date.now();
         response = {
           intent:message.intent,
           //...
         };
       }else{
         response = {
           intent:'create_connect',
           //...返回配置数据
           data:config,
         };
       }
       //记录时间差
       if(message.ntime) response.utime = response.time - message.ntime;
       break;
     }
   default:
  //如果没处理，就交给回调onReceive处理
  response = onReceive({ localInfo, remoteInfo, message });
 }
 //...

可以看出来，这里连接的逻辑是定时检查客户端连接更新的状态，如果超过时间不更新，就判断为连接超时

局域网广播

两个小程序之间是怎么知道对方的IP和端口呢，这就要借助广播IP地址了，

发送广播IP地址，就可以在局域网发现在线的设备，然后请求连接，广播过程是这样的

来打个比喻：

客户端A（你）发送广播消息（点餐订单），交给路由器（平台）处理，路由器会转发消息，附带了你的IP(家)地址和端口（门号），到其余的客户端（抢单），
如果有客户端（抢到单的外卖服务员）对方想回应你，就会给你发消息：你的外卖到了…（票据上有写了对方的IP（店铺）地址和端口（门牌号））

请添加图片描述

发送广播

客户端怎样发送广播呢，这个方法是sendBroadcast()，很容易实现，代码如下

function sendBroadcast(e){
  const { port, fail, success, showLoading } = e;
  let udp = wx.createUDPSocket();
  let timer;
  let list = [];//记录接收的列表
  function complete(callback){
    //...
    udp.close();//处理完要关闭
    callback();
  }
  if(fail instanceof Function){
    udp.onError(function(err){
      complete(function(){
        fail(err);
      });
    });
  }
  udp.onMessage(function(res){
  	//将接收的消息转换成json对象
    res.message = toDataJSON(res.message);
    list.push(res);
  });
  udp.bind();
  //发送广播消息，其中port是指定小程序的服务端接收端口
  udp.send({
    address:'255.255.255.255',
    port: port,
    message: JSON.stringify({ intent: 'scan' })
  });
  //加上定时
  timer = setTimeout(function(){
  	//到时结束
    complete(function(){
      if(success instanceof Function) success({ list });
    })
  }, e.timeout || 3000);
  //...
}

广播IP是255.255.255.255，就是发给局域网内的路由器，需要注意的是，不是所有的路由器都是支持广播IP的，要确保支持它，需要登录路由器的控制页面，找看有没有其中的隔离AP项，取消勾选即可

发送的广播消息是{ intent: 'scan' }，需要从另一个小程序的服务端负责接收那方法onReceive()中处理这个广播消息，返回响应数据

游戏联机

实现游戏的联机方式分两种，上面开始讲过，用其中的一个角色：服务端或者客户端

主动加入

一种是主动加入游戏，就用客户端发送问候消息方法sendMessage(e)去请求服务端，服务端会处理响应请求

加入前，客户端需要先知道对方的IP地址和端口，从上面讲得发送广播方法sendBroadcast(e)来扫描一下，找到对方后，然后发送加入请求
在对方的服务端返回同意消息时，附带了游戏入口消息，告诉客户端加入游戏的途径

主动等待

另一种，是主动创建好游戏地盘，创建好服务端，用一个接收数据的绑定的端口，去负责监听客户端发来的请求，然后处理响应数据

这里注意不要搞错，当另一个小程序客户端发来加入游戏的请求时，要留点心，别把客户端的端口号当作服务端的端口号（接收数据）

关于项目

好了，UDP通信的方法就讲到这里，这样有了大致的方向，

如需要看项目源码的请在下载列表点这里找联机游戏相关的项目，那些联机游戏项目里都有应用，有对应的介绍，请放心下载，多谢支持，愿学有所获！

打开项目源码，如果遇到微信开发工具提示Error: 登录用户不是该小程序的开发者 ，需要替换项目的测试号替换为自己的，点击开发工具右边的详情，里面有AppID，可修改替换，

这里有一个中国象棋-单机游戏开发流程详解文章，需要的同学可以先看看，

这里是在原单机游戏项目的基础上增加了联机功能，联机游戏运行的动图效果如下
请添加图片描述

联机测试

项目还没有自己的测试号，就前往申请一个测试号，申请成功后，登录如下图，其中AppID的就是
在这里插入图片描述

申请测试号 🔗传送门

开发工具上扫码预览出来的小程序是开发版，只能在自己的微信上体验，想测试联机游戏就这样做，选择里面的真机调试项，这样就可以模拟两个用户来体验了，一个在开发工具上模拟器上，另一个就是自己的真机微信上

如果有两个手机微信就这样试试，用两个手机微信分别登录开发工具弄一个开发版小程序来，这样两个手机微信上就能测试游戏联机，

上面操作有点麻烦，就用自己申请好的一个小程序来测试，发布一个体验版小程序就可以让很多人参与测试了。

在这里插入图片描述

TA远方

关注

14
点赞
踩
53

收藏

觉得还不错? 一键收藏
打赏
0
评论
【联机对战】微信小程序联机游戏开发流程详解

现有一个微信小程序叫中国象棋项目，棋盘类的单机游戏看着有缺少了什么，现在给补上了，加个联机对战的功能，增加了可玩性，对新手来说，实现联机游戏还是有难度的，那要怎么实现的呢，接下来给大家讲一下。
复制链接

扫一扫