注冊

小程序WebSocket長連接應用場景,剪刀石頭布小程序怎么開發(fā)

2020-09-27
導讀:小程序的架構非常簡單,這里有兩條網絡同步,一條是 HTTPS 通路,用于常規(guī)請求。對于 WebSocket 請求,會先走 HTTPS 后再切換協議到 WebSocket 的 TCP 連接,從而實現全雙工通信。...

  小程序的架構非常簡單,這里有兩條網絡同步,一條是 HTTPS 通路,用于常規(guī)請求。對于 WebSocket 請求,會先走 HTTPS 后再切換協議到 WebSocket 的 TCP 連接,從而實現全雙工通信。

  1. 準備域名和證書

  在微信小程序中,所有的網路請求受到嚴格限制,不滿足條件的域名和協議無法請求,具體包括:

  只允許和在 MP 中配置好的域名進行通信,如果還沒有域名,需要注冊一個。

  網絡請求必須走 HTTPS 協議,所以你還需要為你的域名申請一個證書。

  域名注冊好之后,可以登錄微信公眾平臺配置通信域名了。

小程序WebSocket長連接應用場景,剪刀石頭布小程序怎么開發(fā)

  2. 云主機和鏡像部署

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

  騰訊云用戶可以免費領取禮包,體驗騰訊云小程序解決方案。

  鏡像部署完成之后,云主機上就有運行 WebSocket 服務的基本環(huán)境、代碼和配置了。

  鏡像已包含「剪刀石頭布」和「小相冊」兩個小程序的服務器環(huán)境與代碼,需要體驗兩個小程序的朋友無需重復部署

  3. 配置 HTTPS

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

  配置完成后,即可啟動 nginx。

  nginx

  4. 域名解析

  我們還需要添加域名記錄解析到我們的云服務器上,這樣才可以使用域名進行 HTTPS 服務。

  在騰訊云注冊的域名,可以直接使用云解析控制臺來添加主機記錄,直接選擇上面購買的 CVM。

  解析生效后,我們在瀏覽器使用域名就可以進行 HTTPS 訪問。

  5. 啟動 WebSocket 服務

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

  進入鏡像中源碼位置:

  cd /data/release/qcloud-applet-websocket

  復制代碼

  使用 pm2 啟動服務:

  pm2 start process.json

  復制代碼

  6. 啟動微信小程序

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

  配置完成后,運行小程序就可以看到成功搭建的提示!

  為什么要用 WebSocket

  使用傳統(tǒng)的 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 類,可以幫助開發(fā)者快速使用 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 支持多進程的特性,對于后續(xù)做橫向擴張是很有幫助的。騰訊云在后面也會有計劃推出支持大規(guī)模業(yè)務需求的 WebSocket 連接服務,減小業(yè)務的部署成本。

  通信協議設計

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

  具體每個消息的參數可以參考源碼里的 server/protocol.brief.md

  服務器邏輯

  服務器的邏輯很簡單:

  收到用戶請求加入房間(join),就尋找還沒滿的房間

  找到房間,則加入

  沒找到房間,創(chuàng)建新房間

  有用戶加入的房間檢查是否已滿,如果已滿,則:

  給房間里每個用戶發(fā)送開始游戲的信號(start)

  啟動計時器,計時器結束后進行游戲結算

  游戲結算

  兩兩之間 PK,贏方分數加一,輸方減一,最終得每個玩家基本得分 x

  對于每個玩家,如果分數 x 大于 0,則視為勝利,連勝次數加一,否則連勝次數歸零

  本局得分為分數 x 乘以連勝次數

  發(fā)送本局游戲結果給房間里的每位玩家

  復制代碼

  微信端實現

  微信小程序直接使用上面的協議,針對不同的場景進行渲染。整體的狀態(tài)機如下。

  狀態(tài)機整理清楚后,就是根據狀態(tài)機來控制什么時候發(fā)送消息,接到消息后如何處理的問題了。開發(fā)微信小程序看這里。

重磅推薦:小程序開店目錄

第一部分:小商店是什么

第二部分:如何開通一個小商店

第三部分:如何登錄小商店

第四部分:開店任務常見問題

第五部分:小商店可以賣什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收貨/物流

第九部分:小程序怎么結算

第十部分:小程序客服

第十一部分:電商創(chuàng)業(yè)

第十二部分:小程序游戲開發(fā)