小程序的架构很是简朴，，，，，
，这里有两条网络同步，，，，，
，一条是 HTTPS 通路，，，，，
，用于通例请求。
。关于 WebSocket 请求，，，，，
，会先走 HTTPS 后再切换协议到 WebSocket 的 TCP 毗连，，，，，
，从而实现全双工通讯。
。

　　1. 准备域名和证书

　　在微信小程序中，，，，，
，所有的网路请求受到严酷限制，，，，，
，不知足条件的域名和协议无法请求，，，，，
，详细包括：

　　只允许和在 MP 中设置好的域名举行通讯，，，，，
，若是还没有域名，，，，，
，需要注册一个。
。

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

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

　　2. 云主机和镜像安排

　　铰剪石头布的服务器运行代码和设置已经打包成腾讯云 CVM 镜像，，，，，
，各人可以直接使用。
。

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

　　镜像安排完成之后，，，，，
，云主机上就有运行 WebSocket 服务的基本情形、代码和设置了。
。

　　镜像已包括「铰剪石头布」和「小相册」两个小程序的服务器情形与代码，，，，，
，需要体验两个小程序的朋侪无需重复安排

　　3. 设置 HTTPS

　　镜像中已经安排了 nginx，，，，，
，需要在 /etc/nginx/conf.d 下修改设置中的域名、证书、私钥。
。

　　设置完成后，，，，，
，即可启动 nginx。
。

　　nginx

　　4. 域名剖析

　　我们还需要添加域名纪录剖析到pp电子云服务器上，，，，，
，这样才可以使用域名举行 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 乘以连胜次数

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

　　复制代码

　　微信端实现

　　微信小程序直接使用上面的协议，，，，，
，针对差别的场景举行渲染。
。整体的状态机如下。
。

　　状态机整理清晰后，，，，，
，就是凭证状态机来控制什么时间发送新闻，，，，，
，接到新闻后如那里置的问题了。
？？⑽⑿判〕绦蚩凑饫。
。