如何用雲開發打造「萬人同屏」高併發實時互動小程序

剛剛過去的六月，國內遊戲迷們都剛剛體驗過一場盛大的遊戲發佈會 —— 2020 騰訊遊戲年度發佈會，因爲疫情的緣由，今年的發佈會在線上舉行，不過，得益於小程序的豐富體驗，本次發佈會仍是獲得了遊戲玩家們的承認。

在發佈會過程當中，一個重要的環節就是跟隨着活動的進展，每一個環節都會有本身的定製互動。例如和平精英環節，會有和平精英專場掉落抽獎、和平精英閃現社區彈幕、議程也須要高亮和平精英模塊，以下圖：

這就要求小程序可以讓全部在觀看直播的遊戲玩家同時看到抽獎、寶盒等功能，實現實時交互。

此外，也會有一些場景須要作到議程高亮同一個模塊，抽獎和閃現社區彈幕倒是不一樣遊戲的。在對全部的功能點進行分析後，咱們發現，最多須要 90+ 開關來完成實時控制，所以，這也要求咱們能夠實時的對這些功能的展現進行控制。

從小程序 -> 微信後臺 -> 雲開發（雲函數）這一段公網鏈路是私有協議，不只保障了安全性，並且提升了傳輸性能。

在明確了訴求後，咱們分析可能的實現方案：

1. 接口輪詢：接口輪詢是常規操做，但在後臺須要考慮好高併發的問題的。特別是大型遊戲發佈會，參與的遊戲玩家人數會很是多，給後臺帶來的壓力是巨大的。

2. json文件輪詢 —— 在發佈系統更新發布包含當前環節信息的json，小程序輪詢方式請求json文件。但這個方案頁面反應不夠及時，壓力也從後臺轉移到了當天負責更新json文件的同窗身上。

3. 雲開發數據庫的實時數據推送 -— 小程序原生能力，開箱即用，無需管理長連，無需編寫服務端代碼，無需搭建和管理基礎設施，自動收到更新推送。

綜合評估，認爲仍是使用雲開發數據庫的實時數據推送更好，簡單易上手，也是小程序的原生能力。調研發現雲開發的 watch 給到每一個用戶的最大限制鏈接數是5萬，而咱們預估活動當天的 DAU 超過限制，所以，聯繫了雲開發的同事進行擴容，將限制提升，並進行了壓測，確保不出問題。事實上在活動整個過程，甚至是峯值都毫無壓力，輕鬆扛過用戶請求。

使用雲開發數據庫的實時數據推送讓整個開發變得十分簡單，只須要一個 API —— watch 就足以完成全部的開發。小程序能夠經過 watch 實時監聽數據庫變動，在收到包含更新內容的推送後，作出相應的實時響應。

在具體的實現方面，也十分簡單，能夠參考咱們的代碼進行操做。

咱們將相關的監聽代碼進行了封裝，方便在不一樣狀況下調用。若是你有一些特定場景下才執行操做的邏輯，能夠直接在 watch 的 onChange 回調中調用進行。

   
     
   
   
    
    
    
    

    
      
    
    
     
     
     
    
      
    
    
     
     
     
    
      
    
    
     
     
     
    
      
    
    
     
     
     
    
      
    
    
     
     
     
    
      
    
    
     
     
     
    
      
    
    
     
     
     
    
      
    
    
     
     
     
    
      
    
    
     
     
     
    
      
    
    
     
     
     
    
      
    
    
     
     
     
    
      
    
    
     
     
     
    
      
    
    
     
     
     
    
      
    
    
     
     
     
    
      
    
    
     
     
     
    
      
    
    
     
     
     
   
     
   
   
    
    
    
    
// 監聽當前議程開關loadAdminConfig(cb) { let that = this const db = wx.cloud.database() that.globalData.adminWatch = db.collection('adminConfig').watch({ onChange: function (result) { let adminData = result.docChanges[0].doc console.log(adminData) if(adminData.agenda_id > 108){ } }, onError: function (err) { console.error('the watch closed because of error', err) } })}

並在合適的地方設置開始監聽，在頁面onshow的時候開始監聽，onhide的時候關閉監聽，這樣既不浪費監聽數，也能儘可能避免計劃外的操做致使watch斷連後沒法從新鏈接。

   
     
   
   
    
    
    
    

    
      
    
    
     
     
     
    
      
    
    
     
     
     
    
      
    
    
     
     
     
    
      
    
    
     
     
     
    
      
    
    
     
     
     
    
      
    
    
     
     
     
    
      
    
    
     
     
     
    
      
    
    
     
     
     
    
      
    
    
     
     
     
    
      
    
    
     
     
     
   
     
   
   
    
    
    
    
// onShow 開始監聽onShow: function(){ app.loadAdminConfig()}// onHide 關閉監聽onHide: function () { app.globalData.adminWatch && app.globalData.adminWatch.close().then(() => { app.globalData.adminWatch = null })}

經過這樣的邏輯，咱們實現了管理員在發佈會環節開始才放開彈幕互動入口：

議程 有抽獎，纔會出現抽獎入口，而且展現的是提供當前抽獎環節獎品的產品logo：

主持人口播「查看Spark幸運鵝中獎結果吧！ 」的時候，會全屏彈窗展現中獎名單，充滿儀式感！

發佈會或者線下項目必需要考慮周全，都是一次性短期高併發活動，沒有機會給你查漏補缺。 因此咱們還給watch想了個備案，監聽失敗（onError）的時候就用上面提到的第2個方案開始每秒輪詢同步更新的json文件，json裏的數據和結構跟watch的同樣，因此總體交互流程方面是不須要作額外修改的。 結果也證實雲開發數據庫的watch是很是靠譜的，輪詢都沒有用上。

做爲承載騰訊遊戲年度發佈會首次線上舉辦、首次TOC、首次進行實時互動的小程序，它也算是良好的完成了本身的任務。

特別要感謝騰訊雲和小程序提供的好用、易用、靠譜的實時數據推送能力 watch，讓咱們的創意能更好的落地。

---

歡迎在下方評論區留言或在微信開放社區 進入雲開發專區 與咱們交流。

*點擊文末閱讀原文進入雲開發CloudBase社區，獲取更多產品文檔和實戰攻略。

☁

 更多精彩

點擊下方圖片便可瞭解

△  Web雲開發快速開始——真正從「零」開始的系統教程視頻來了！

---

---

因爲公衆號推送規則更改，請多多 分享 、 點贊 和 「在看」 ，以及時獲取雲開發Cloudbase的最新動態。

      點擊在看讓更多人發現精彩

本文分享自微信公衆號 - 騰訊云云開發（tcb2tcb）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。