小程序的架构很是简朴，，，，这里有两条网络同步，，，，一条是 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 通讯举行抓包以及研究其客户端源码，，，，笔者封装了一个约莫 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 乘以连胜次数

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

　　复制代码

　　微信端实现

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

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