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 乘以連勝次數。

發送本局游戲結果給房間里的每位玩家。