微信小程序中如何使用WebSocket实现长连接(含完整源码)

Posted on 2018-06-25 15:46 Jack Jiang 阅读(437) 评论(0) 编辑收藏

本文由腾讯云技术团队原创，感谢作者的分享。

1、前言

微信小程序提供了一套在微信上运行小程序的解决方案，有比较完整的框架、组件以及 API，在这个平台上面的想象空间很大。腾讯云研究了一番之后，发现微信支持 WebSocket 还是很值得玩味的。这个特性意味着我们可以做一些实时同步或者协作的小程序。

这篇文章分享了一个基于WebSocket长连接的微信小程序——简单的剪刀石头布小游戏的制作过程，希望能对想要在微信小程序中使用 WebSocket 的开发者有所帮助。

学习交流：

- 即时通讯开发交流3群：185926912[推荐]
- 移动端IM开发入门文章：《新手入门一篇就够：从零开发移动端IM》

（说明：本文完整源码请从此文末附件下载：http://www.52im.net/thread-1703-1-1.html）

2、相关文章

《新手入门贴：史上最全Web端即时通讯技术原理详解》
《Web端即时通讯技术盘点：短轮询、Comet、Websocket、SSE》
《新手快速入门：WebSocket简明教程》
《WebSocket详解（一）：初步认识WebSocket技术》
《WebSocket详解（二）：技术原理、代码演示和应用案例》
《WebSocket详解（三）：深入WebSocket通信协议细节》
《WebSocket详解（四）：刨根问底HTTP与WebSocket的关系(上篇)》
《WebSocket详解（五）：刨根问底HTTP与WebSocket的关系(下篇)》
《WebSocket详解（六）：刨根问底WebSocket与Socket的关系》
《socket.io实现消息推送的一点实践及思路》
《Web端即时通讯技术的发展与WebSocket、Socket.io的技术实践》
《Web端即时通讯安全：跨站点WebSocket劫持漏洞详解(含示例代码)》
《开源框架Pomelo实践：搭建Web端高性能分布式IM聊天服务器》
《使用WebSocket和SSE技术实现Web端消息推送》
《详解Web端通信方式的演进：从Ajax、JSONP 到 SSE、Websocket》
《MobileIMSDK-Web的网络层框架为何使用的是Socket.io而不是Netty？》
《理论联系实际：从零理解WebSocket的通信原理、协议格式、安全性》
>> 更多同类文章 ……

3、运行效果

整个游戏非常简单，连接到服务器后自动匹配在线玩家（没有则分配一个机器人），然后两人进行剪刀石头布的对抗游戏。当对方进行拳头选择的时候，头像会旋转，这个过程使用 WebSocket 会变得简单快速。

剪刀石头布游戏效果如下图所示：

4、为什么要用 WebSocket

使用传统的 HTTP 轮询或者长连接的方式也可以实现类似服务器推送的效果，但是这类方式都存在资源消耗过大或推送延迟等问题（详见文章《新手入门贴：史上最全Web端即时通讯技术原理详解》）。而 WebSocket 直接使用 TCP 连接保持全双工的传输，可以有效地减少连接的建立，实现真正的服务器通信，对于有低延迟有要求的应用是一个很好的选择。

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

Server 端需要实现 WebSocket 协议，才能支持微信小程序的 WebSocket 请求。鉴于 SocketIO 被广泛使用（详见《Socket.IO介绍：支持WebSocket、用于WEB端的即时通讯的框架》），剪刀石头布的小程序，我们选用了比较著名的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 = newServer();
server.init("/applet/ws/socket.io");
server.start();

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

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

const socket = newWxSocketIO();
socket.on('hi', packet => console.log('server say hi: '+ packet.message));
socket.emit('hello', { from: 'techird'});

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

5、通信协议设计

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

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

6、服务器逻辑

服务器的逻辑很简单：

收到用户请求加入房间（join），就寻找还没满的房间：
- 找到房间，则加入；
- 没找到房间，创建新房间。
有用户加入的房间检查是否已满，如果已满，则：
- 给房间里每个用户发送开始游戏的信号（start）；
- 启动计时器，计时器结束后进行游戏结算。
游戏结算：
- 两两之间 PK，赢方分数加一，输方减一，最终得每个玩家基本得分 x；
- 对于每个玩家，如果分数 x 大于 0，则视为胜利，连胜次数加一，否则连胜次数归零；
- 本局得分为分数 x 乘以连胜次数。
发送本局游戏结果给房间里的每位玩家。