如何用云开发打造“万人同屏”高并发实时互动小程序

刚刚过去的六月，国内游戏迷们都刚刚体验过一场盛大的游戏发布会 —— 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源创计划”，欢迎正在阅读的你也加入，一块儿分享。