沒事打開小程序，和附近的人剪刀石頭布，想來就來，想走就走。誰能成為(wei) 武林高手？！

微信小程序提供了一套在微信上運行小程序的解決(jue) 方案，有比較完整的框架、組件以及 API，在這個(ge) 平台上麵的想象空間很大。

騰訊雲(yun) 拿到了小程序內(nei) 測資格，研究了一番之後，發現微信支持 WebSocket 還是很值得玩味的。這個(ge) 特性意味著我們(men) 可以做一些實時同步或者協作的小程序。

這篇文章分享一個(ge) 簡單的剪刀石頭布的小遊戲的製作，希望能對想要在小程序中使用 WebSocket 的開發者有幫助。

整個(ge) 遊戲非常簡單，連接到服務器後自動匹配在線玩家（沒有則分配一個(ge) 機器人），然後兩(liang) 人進行剪刀石頭布的對抗遊戲。當對方進行拳頭選擇的時候，頭像會(hui) 旋轉，這個(ge) 過程使用 WebSocket 會(hui) 變得簡單快速。

部署和運行

拿到了本小程序源碼的朋友可以嚐試自己運行起來。

整體架構

小程序的架構非常簡單，這裏有兩(liang) 條網絡同步，一條是 HTTPS 通路，用於(yu) 常規請求。對於(yu) WebSocket 請求，會(hui) 先走 HTTPS 後再切換協議到 WebSocket 的 TCP 連接，從(cong) 而實現全雙工通信。

1. 準備域名和證書

在微信小程序中，所有的網路請求受到嚴(yan) 格限製，不滿足條件的域名和協議無法請求，具體(ti) 包括：

• 隻允許和在 MP 中配置好的域名進行通信，如果還沒有域名，需要注冊一個。
• 網絡請求必須走 HTTPS 協議，所以你還需要為你的域名申請一個證書。

域名注冊(ce) 好之後，可以登錄微信公眾(zhong) 平台配置通信域名了。

2. 雲主機和鏡像部署

剪刀石頭布的服務器運行代碼和配置已經打包成騰訊雲(yun) CVM 鏡像，大家可以直接使用。

騰訊雲(yun) 用戶可以免費領取禮包，體(ti) 驗騰訊雲(yun) 小程序解決(jue) 方案。

鏡像部署完成之後，雲(yun) 主機上就有運行 WebSocket 服務的基本環境、代碼和配置了。

鏡像已包含所有小程序的服務器環境與(yu) 代碼，需要體(ti) 驗其它小程序的朋友無需重複部署

3. 配置 HTTPS

鏡像中已經部署了 nginx，需要在 /etc/nginx/conf.d 下修改配置中的域名、證書(shu) 、私鑰。

配置完成後，即可啟動 nginx。

nginx

4. 域名解析

我們(men) 還需要添加域名記錄解析到我們(men) 的雲(yun) 服務器上，這樣才可以使用域名進行 HTTPS 服務。

在騰訊雲(yun) 注冊(ce) 的域名，可以直接使用雲(yun) 解析控製台來添加主機記錄，直接選擇上麵購買(mai) 的 CVM。

解析生效後，我們(men) 在瀏覽器使用域名就可以進行 HTTPS 訪問。

5. 啟動 WebSocket 服務

在鏡像的 nginx 配置中（/etc/nginx/conf.d），已經把 /applet/websocket 的請求轉發到 https://127.0.0.1:9595 處理。我們(men) 需要把 Node 實現的 WebSocket 服務在這個(ge) 端口裏運行起來。

進入鏡像中源碼位置：

cd /data/release/qcloud-applet-websocket

使用 pm2 啟動服務：

pm2 start process.json

6. 啟動微信小程序

在微信開發者工具中修改小程序源碼中的 config.js 配置，把通訊域名修改成上麵申請的域名。完成後點擊調試即可連接到 WebSocket 服務進行遊戲。

配置完成後，運行小程序就可以看到成功搭建的提示！

為什麽要用 WebSocket

使用傳(chuan) 統的 HTTP 輪詢或者長連接的方式也可以實現類似服務器推送的效果，但是這類方式都存在資源消耗過大或推送延遲等問題。而 WebSocket 直接使用 TCP 連接保持全雙工的傳(chuan) 輸，可以有效地減少連接的建立，實現真正的服務器通信，對於(yu) 有低延遲有要求的應用是一個(ge) 很好的選擇。

目前瀏覽器對 WebSocket 的支持程度已經很好，加上微信小程序的平台支持，這種可以極大提高客戶端體(ti) 驗的通信方式將會(hui) 變得更加主流。

Server 端需要實現 WebSocket 協議，才能支持微信小程序的 WebSocket 請求。鑒於(yu)  SocketIO 被廣泛使用，剪刀石頭布的小程序，我們(men) 選用了比較著名的 SocketIO 作為(wei) 服務端的實現。

Socket IO 的使用比較簡單，僅(jin) 需幾行代碼就可啟動服務。

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 和一些其它的服務器端實現，都有其配套的客戶端來完成上層協議的編碼解碼。但是由於(yu) 微信的限製（不能使用 window 等對象）， SocketIO 的客戶端代碼在微信小程序平台上是無法運行的。

經過對 SocketIO 通信進行抓包以及研究其客戶端源碼，筆者封裝了一個(ge) 大約 100 行適用於(yu) 微信小程序平台的 WxSocketIO 類，可以幫助開發者快速使用 SocketIO 來進行 WebSocket 通信。

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

如果想要使用微信原生的 API，那麽(me) 在服務器端也可以直接使用 ws 來實現 W3C 標準的接口。不過 SocketIO 支持多進程的特性，對於(yu) 後續做橫向擴張是很有幫助的。騰訊雲(yun) 在後麵也會(hui) 有計劃推出支持大規模業(ye) 務需求的 WebSocket 連接服務，減小業(ye) 務的部署成本。

通信協議設計

實現一個(ge) 多客戶端交互的服務，是需要把中間涉及到所有的消息類型都設計清楚的，就像是類似剪刀石頭布這樣一個(ge) 小程序，都有下麵這些消息類型。

消息	方向	說明
hello anjular2和微信小程序的對比 微信小程序官方文檔裏看不到的小Tips 相關資訊RELEVANT NEWS 實戰教程：如何有效開發小程序 視頻號運營策略及內容創新 醫療健康小程序開發：在線問診、預約掛號與健康管理 創新小程序開發技術，打造優質用戶體驗 We分析數據助力微信用戶行為洞察 小程序開發解決方案：為您的業務量身定製最佳方案 Kaiyun体育官方全站入口服務SERVICE 小程序定製 商城小程序 / 點餐小程序 / O2O小程序 / / / 最新案例LATEST CASES 精銳教育 教育節能專場 體檢無憂網小程序 材易多商城 谘詢 微信掃碼谘詢 電話谘詢 400-888-9358 立即谘詢