微信小程序云端解决方案教程二：WebSocket长连接应用场景

部署和运转

1. 准备工作域名和证书

2. 云主机和镜像部署

3. 布局 HTTPS

4. 域名解析

5. 启动 WebSocket 服务

6. 启动微信小程序

为什么必须用 WebSocket

通信协议设计

服务器逻辑

微信端的同时实现

呀关上小程序，和附近的人剪刀石头布，说实话就去，想要跑就跑。谁能够沦为武林高手？！

微信小程序提供更多了一套在微信上运转小程序的解决方案，存有比较完备的框架、组件以及 API，在这个平台上面的想象空间非常大。

腾讯云领到了小程序公测资格，研究了一番之后，辨认出微信积极支持 WebSocket 还是很应该玩味的。这个特性意味著我们可以搞一些实时同步或者协作的小程序。

这篇文章互动一个直观的剪刀石头布的小游戏的制作，期望能够对想在小程序中采用 WebSocket 的开发者存有协助。

整个游戏非常简单，相连接至服务器后自动相匹配在线玩家（没则分配一个机器人），然后两人展开剪刀石头布的对付游戏。当对方展开拳头挑选的时候，头像可以转动，这个过程采用 WebSocket 可以显得直观快速。

部署和运转

领到利斯勒小程序源码的朋友可以尝试自己运转出来。

整体架构

小程序的架构非常简单，这里存有两条网络同步，一条就是 HTTPS 通路，用作常规命令。对于 WebSocket 命令，可以先跑 HTTPS 后再转换协议至 WebSocket 的 TCP 相连接，从而同时实现全双工通信。

1. 准备工作域名和证书

在微信小程序中，所有的网路命令受严苛管制，不满足条件的域名和协议无法命令，具体内容包含：

只容许和在 MP 中布局不好的域名展开通信，如果还没域名，须要登记注册一个。

网络命令必须跑 HTTPS 协议，所以你还须要为你的域名提出申请一个证书。

域名登记注册不好之后，可以登入微信公众平台布局通信域名了。

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 通信展开抓包以及研究其客户端源码，笔者PCB了一个大约 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 标准的USB。不过 SocketIO 积极支持多进程的特性，对于时程搞纵向收缩就是很存有协助的。腾讯云在后面也可以存有计划面世积极支持大规模业务市场需求的 WebSocket 相连接服务，增大业务的部署成本。

通信协议设计

同时实现一个多客户端可视化的服务，就是须要把中间牵涉至所有的消息类型都设计确切的，就像相似剪刀石头布这样一个小程序，都存有下面这些消息类型。

消息

方向

hello