如何打造高并发互动小程序，护航腾讯游戏年度发布会？

导语 | 2020腾讯游戏年度发布会以线上直播的形式进行，区别于往年的线下toB模式，线上直播面对的是所有玩家，所以在直播内容、直播落地等方面，都要考虑如何做得更加toC。参与量如此大、互动如此多、内容如此丰富的线上服务类互动小程序应该如何实现呢？本文就将为大家一一做介绍。

一、背景

受疫情影响，2020 腾讯游戏年度发布会以线上的形式进行。区别于往年的线下 toB模式，线上面对的群体比较广泛，同时也希望更能贴近玩家，所以在线上发布的内容和线上呈现形式等方面，都要考虑如何做得更加玩家向。

发布会从预热到发布会结束，历经42天，结合各个时间节点曝光不同模块，三端都有针对性落地输出，下文将为大家一一做展开。

二、如何实现炫酷的倒计时特效？

5月18日开始，双端官网就上线一版倒计时页面，展示发布会日期和腾讯游戏的新slogan “Spark More”。

页面虽然简单，但是意义非凡，这是承接腾讯游戏品牌升级后，延续“Spark More ！去发现无限可能”的主 KV，同时又结合 toC 的视觉表达。我们敬业的设计师，不仅想出了这个创意，还细腻地拆解了时分秒针在不同情况的不同效果。

笔者收到需求之后，就赶紧进行技术预演。先对设计稿和动画需求进行分析，结合查询的资料，最终决定使用 CSS3 的圆锥渐变 conic-gradient[1] 来实现时钟效果。

视觉原理：时针和分针组成一个扇形，秒针和时针/分针组成另外一个扇形，时针、分针、秒针根据真实时间运转。

技术实现：两个全屏大小重叠的div，都用conic-gradient填充背景色。上层是秒针扇形，下层是时针分针扇形。已知扇形开始和结束颜色，秒针和时针/分针之间的角度，秒针起始角度（0°~360°），就可以渲染扇形了。色块外的区域，用rgba(0,0,0,0)填充，实现穿透效果。

<!--绘制秒针色块-->
<div style="width: 100%;height: 100%;background: 
conic-gradient(from 0deg at 50% 50%, #F1977D, #FA466D
 100deg, #000000  100deg,#000000  360deg);"></div>


<!--旋转到起始位置-->
<div style="width: 100%;height: 100%;background: 
conic-gradient(from 340deg at 50% 50%, #F1977D, #FA466D
 100deg, #000000  100deg,#000000  360deg);"></div>
 
<!--色块外填透明色-->
<div style="width: 100%;height: 100%;background: 
conic-gradient(from 340deg at 50% 50%, #F1977D, #FA466D
 100deg, rgba(0,0,0,0)  100deg,rgba(0,0,0,0)  360deg);"></div>

时针和分针在不同角度色块显示方向、色值不同，秒针在色块内/外显示方向、色值不同，就要细心区分情况处理了。

// 秒针
if( Math.abs(hAngle - mAngle) > 180 ){ //时针分针角度大于180
  if(hAngle < mAngle){
    //时针在前，区域紫色开始
  }else {
    //时针在后，区域橙色开始
  }
  if( sAngle < small || sAngle===small){
    //区域内最小
  }else if(sAngle > big){
    //区域内最大
  }else{
    //区域外
  }
}else{//时针分针角度小于等于180
  if(hAngle > mAngle){
    //时针在后，区域紫色开始
  }else {
    //时针在前，区域橙色开始
  }
  if( sAngle > small && (sAngle < big || sAngle === big)){
    //区域内
  }else if(sAngle>big){
    //区域外最大
  }else {
    //区域外最小
  }
}

最终效果图，PC官网：

视频高清版：

移动官网：

视频高清版：

针对不支持conic-gradient属性的浏览器，我们就降级显示放一张静态的美美的背景图。

三、如何更高效的联合开发三端官网？

在开发发布会小程序的同时，预约版小程序还要进行多次的内容模块新增迭代，工作量非常巨大。当然，这种情况在项目初期就已经预想到了，所以早早就和协作同学定好合作的方式、使用的工具等。

1. 每个内容模块用组件方式提供

考虑到这几期是内容向输出，找了非常靠谱的同学协助做重构部分。小程序里每个模块独立开来做成了组件 component，这样合并代码方便，也不容易冲突。

<!--619大咔爆料-->


<block>
  <swiper-item>
    <daka />
  </swiper-item>
</block>


<!--615经典重燃-->
<block>
  <swiper-item>
    <jdcr />
  </swiper-item>
</block>

发布会小程序里，议程模块和游戏页面，也是内容向的，也用了同样的 component合作方式。议程信息通过 properties 传递到组件内，对当前议程高亮渲染。

<agenda chapter_id="{
    
    {adminData.chapter_id}}" 
product_id="{
    
    {adminData.product_id}}" />

2. 配置文件填充内容

小程序区别于网页发版，是需要比较多的审批流程和时间的。而发布会小程序，内容极多且需要花费大量时间向各方收集资料，不可能等资料收集全了才开始进行开发工作，于是从预约版小程序开始，就采取配置文件填充内容的方式进行开发。

第一：议程模块的 json 文件，做成3端（PC/移动/小程序）通用。有特殊情况需要修改内容，修改一个文件，三端都更新了，省去很多人力以及小程序审核发布的复杂流程。

第二：活动规则用 json 配置，产品要修改的话很方便，还不用催着我们帮忙改，双赢。

第三：好友列表 logo 待定、名单随时增删，也是靠 json 才能如此灵活地修改。

第四：发布会小程序因为类目修改的原因（直播和社交类目第一次审核需要至少7个自然日+3个工作日），6.12开始有2周时间不能发版，正好涵盖6.15和6.19两个版本。跟品牌说明情况，并给了2个方案，他们决定采用第2个方案：紧急先设计和重构好这两天要发版的小程序模块，内容用 json 配置，这样可以后期修改，再把模块提前埋到小程序里，再利用 json 判断当前应该展示哪个版本内容。

<!--619大咔爆料-->
<block wx:if="{
    
    {version===619}}">
  <swiper-item>
    <daka />
  </swiper-item>
</block>


<!--615经典重燃-->
<block wx:if="{
    
    {version===615}}">
  <swiper-item>
    <jdcr />
  </swiper-item>
</block>

四、如何打造高并发实时互动小程序？

我们团队做过很多线下服务类互动小程序，如TIEM年会小程序、英雄联盟观赛助手等，同时参与人数不超过2千人，我们在上半年也做了CF赛事助手小程序等。

但这次却是第一次做参与量如此大、互动如此多、内容如此丰富的线上服务类互动小程序，其实就2个点最关注：如何实时互动以及如何抗住高并发？

所以笔者在认真学习了口罩预约小程序“穗康”的分享课程 ，并且找了几个有丰富线下服务经验的同学取经，跟开发、品牌、产品多次讨论确定了最终的解决方案。

1. 如何实时互动？

关于实现实时互动，我们团队已经很有经验了，做了不下3个线下实时互动的案例，关键点在于使用了云开发 watch [2]。但是这次发布会参与量大、官方阵地要稳定，所以肯定需要有更多解决方案来选择及互补。

这次小程序的最大亮点是50+个发布会环节，每个环节有自己的定制互动。例如和平精英环节，会有和平精英专场掉落抽奖、和平精英闪现社区弹幕、议程也需要高亮和平精英模块等，如下图所示：

也有的环节是议程高亮同一个模块，抽奖和闪现社区弹幕却是不同游戏的。盘点了下，需要用90+个开关来实时控制。

那么怎么实现90+个开关实时控制页面上所有的互动？我们考虑过下面3个方案：

方案一：接口轮询——常规操作，后台需要考虑好高并发的问题

方案二：json 文件轮询——在发布系统更新发布包含当前环节信息的 json，小程序轮询方式请求 json 文件。这个方案页面反应不够及时，压力从后台转移到了当天负责更新 json 文件的同学身上

方案三：云开发数据库的实时数据推送——原生能力[3]，开箱即用，无需管理长连，无需编写服务端代码，无需搭建和管理基础设施，自动收到更新推送。

自然是第三个方案最好，简单易上手、小程序原生能力！但我们还需要确定一件事情：它所能支持的最大连接数。

watch 给到每个用户最大限制是 5w 连接数。我们预估了发布会当天 DAU，5w 连接数是不够用的，最后在云开发同事们的帮助下完成了扩容服务，并且提前做了压测，在活动访问峰值期间都毫无压力。

所以我们就选择了第三个方案——云开发数据库的实时数据推送。非常简单，记住一个API——watch 就够了。小程序可通过 watch 实时监听数据库变更，收到包含更新内容的推送后，做出实时响应。

毕竟有90+个开关，为了方便品牌大大操作，我们也做了一个简单的小程序管理端。

管理端开启某个议程开关，小程序监听的集合数据就更新到对应议程的所有配置，包括章节id、产品id、议程id、是否有抽奖、是否有闪现弹幕、是否需要预约等。

而发布会小程序，就是在监听议程和答题集合的数据是否有更新，来判断当前议程以及当前答题环节。

//监听当前议程开关
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)
    },
    onError: function (err) {
      console.error('the watch closed because of error', err)
    }
  })
}

还需要在适合的地方设置开始监听，在页面 onshow 的时候开始监听，onhide 的时候关闭监听，这样既不浪费监听数，也能尽量避免计划外的操作导致 watch 断连后无法重新连接。

onShow: function(){
  app.loadAdminConfig()
}


onHide: function () {
  app.globalData.adminWatch && app.globalData.adminWatch.close().then(() => {
    app.globalData.adminWatch = null
  })
}

watch 使用起来就是那么简单，效果却是超乎想象！简单的模块是否显示用 wx:if 即可，有些需要在某个议程才去请求接口做逻辑处理的，可以写在 watch 里。

<view wx:if="{
    
    {adminData.lottery_status}}" bindtap="lottery">抽奖</view>


<view wx:if="{
    
    {queStatus[item]==='choose'}}">请答题</view>
<view wx:if="{
    
    {queStatus[item]==='waiting'}}">等待开奖</view>
<view wx:if="{
    
    {queStatus[item]==='luckylist'}}">中奖名单</view>


//监听当前议程开关
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
      if(adminData.agenda_id > 108){
      }
    },
    onError: function (err) {
      console.error('the watch closed because of error', err)
    }
  })
}

发布会环节开始才放开弹幕互动入口。