小程序WebSocket长连接应用场景,剪刀石头布小程序怎么开发

  小程序的架构非常简单,这里有两条网络同步,一条是 HTTPS 通路,用于常规请求。对于 WebSocket 请求,会先走 HTTPS 后再切换协议到 WebSocket 的 TCP 连接,从而实现全双工通信。

  1. 准备域名和证书

  在微信小程序中,所有的网路请求受到严格限制,不满足条件的域名和协议无法请求,具体包括:

  只允许和在 MP 中配置好的域名进行通信,如果还没有域名,需要注册一个。

  网络请求必须走 HTTPS 协议,所以你还需要为你的域名申请一个证书。

  域名注册好之后,可以登录微信公众平台配置通信域名了。

小程序WebSocket长连接应用场景,剪刀石头布小程序怎么开发

  2. 云主机和镜像部署

  剪刀石头布的服务器运行代码和配置已经打包成腾讯云 CVM 镜像,大家可以直接使用。

  腾讯云用户可以免费领取礼包,体验腾讯云小程序解决方案。

  镜像部署完成之后,云主机上就有运行 WebSocket 服务的基本环境、代码和配置了。

  镜像已包含「剪刀石头布」和「小相册」两个小程序的服务器环境与代码,需要体验两个小程序的朋友无需重复部署

  3. 配置 HTTPS

  镜像中已经部署了 nginx,需要在 /etc/nginx/conf.d 下修改配置中的域名、证书、私钥。

  配置完成后,即可启动 nginx。

  nginx

  4. 域名解析

  我们还需要添加域名记录解析到我们的云服务器上,这样才可以使用域名进行 HTTPS 服务。

  在腾讯云注册的域名,可以直接使用云解析控制台来添加主机记录,直接选择上面购买的 CVM。

  解析生效后,我们在浏览器使用域名就可以进行 HTTPS 访问。

  5. 启动 WebSocket 服务

  在镜像的 nginx 配置中(/etc/nginx/conf.d),已经把 /applet/websocket 的请求转发到 http://127.0.0.1:9595 处理。我们需要把 Node 实现的 WebSocket 服务在这个端口里运行起来。

  进入镜像中源码位置:

  cd /data/release/qcloud-applet-websocket

  复制代码

  使用 pm2 启动服务:

  pm2 start process.json

  复制代码

  6. 启动微信小程序

  在微信开发者工具中修改小程序源码中的 config.js 配置,把通讯域名修改成上面申请的域名。完成后点击调试即可连接到 WebSocket 服务进行游戏。

  配置完成后,运行小程序就可以看到成功搭建的提示!

  为什么要用 WebSocket

  使用传统的 HTTP 轮询或者长连接的方式也可以实现类似服务器推送的效果,但是这类方式都存在资源消耗过大或推送延迟等问题。而 WebSocket 直接使用 TCP 连接保持全双工的传输,可以有效地减少连接的建立,实现真正的服务器通信,对于有低延迟有要求的应用是一个很好的选择。

  目前浏览器对 WebSocket 的支持程度已经很好,加上微信小程序的平台支持,这种可以极大提高客户端体验的通信方式将会变得更加主流。

  Server 端需要实现 WebSocket 协议,才能支持微信小程序的 WebSocket 请求。鉴于 SocketIO 被广泛使用,剪刀石头布的小程序,我们选用了比较著名的 SocketIO 作为服务端的实现。

  Socket IO 的使用比较简单,仅需几行代码就可启动服务。

  export class Server {

  init(path: string) {

  /** Port that server listen on */

  this.port = process.env.PORT;

  /** HTTP Server instance for both express and socket io */

  this.http = http.createServer();

  /** Socket io instance */

  this.io = SocketIO(this.http, { path });

  /** Handle incomming connection */

  this.io.on("connection", socket => {

  // handle connection

  });

  }

  start() {

  this.http.listen(this.port);

  console.log(`---- server started. listen : ${this.port} ----`);

  }

  }

  const server = new Server();

  server.init("/applet/ws/socket.io");

  server.start();

  复制代码

  但是,SocketIO 和一些其它的服务器端实现,都有其配套的客户端来完成上层协议的编码解码。但是由于微信的限制(不能使用 window 等对象), SocketIO 的客户端代码在微信小程序平台上是无法运行的。

  经过对 SocketIO 通信进行抓包以及研究其客户端源码,笔者封装了一个大约 100 行适用于微信小程序平台的 WxSocketIO 类,可以帮助开发者快速使用 SocketIO 来进行 WebSocket 通信。

  const socket = new WxSocketIO();

  socket.on('hi', packet => console.log('server say hi: ' + packet.message));

  socket.emit('hello', { from: 'techird' });

  复制代码

  如果想要使用微信原生的 API,那么在服务器端也可以直接使用 ws 来实现 W3C 标准的接口。不过 SocketIO 支持多进程的特性,对于后续做横向扩张是很有帮助的。腾讯云在后面也会有计划推出支持大规模业务需求的 WebSocket 连接服务,减小业务的部署成本。

  通信协议设计

  实现一个多客户端交互的服务,是需要把中间涉及到所有的消息类型都设计清楚的,就像是类似剪刀石头布这样一个小程序,都有下面这些消息类型。

  具体每个消息的参数可以参考源码里的 server/protocol.brief.md

  服务器逻辑

  服务器的逻辑很简单:

  收到用户请求加入房间(join),就寻找还没满的房间

  找到房间,则加入

  没找到房间,创建新房间

  有用户加入的房间检查是否已满,如果已满,则:

  给房间里每个用户发送开始游戏的信号(start)

  启动计时器,计时器结束后进行游戏结算

  游戏结算

  两两之间 PK,赢方分数加一,输方减一,最终得每个玩家基本得分 x

  对于每个玩家,如果分数 x 大于 0,则视为胜利,连胜次数加一,否则连胜次数归零

  本局得分为分数 x 乘以连胜次数

  发送本局游戏结果给房间里的每位玩家

  复制代码

  微信端实现

  微信小程序直接使用上面的协议,针对不同的场景进行渲染。整体的状态机如下。

  状态机整理清楚后,就是根据状态机来控制什么时候发送消息,接到消息后如何处理的问题了。开发微信小程序看这里。


【本站声明】
  1、本站文章中所选用的图片及文字来源于网络以及用户投稿,由于未联系到知识产权人或未发现有关知识产权的登记,如有知识产权人并不愿意我们使用,如果有侵权请立即联系。
  2、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责,仅系客观性描述,如您需要了解该类商品/服务详细的资讯,请您直接与该类商品/服务的提供者联系。


KESION 科汛软件

KESION 科汛软件是国内领先的在线教育软件及私域社交电商软件服务提供商,长期专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。
公司核心产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化独立部署品牌网校和在线教育咨询等。

KESION 不断通过技术创新,提供产品和服务,助力企业向数字化转型,通过科技驱动商业革新,让商业变得更智慧!



▼点击进入科汛官网了解更多



上/下篇
换一换相关推荐
精选内容
热点精选