【100亿次的挑战】之春晚控制后台故事分享

100亿次的挑战

讲师:freyli

 

项目历程简介

 

在介绍控制后台部分之前,先简单回顾下项目的时间线:

 

10月25日,意向、调研、策划、沟通

11月24日,第一次技术初审

12月7日,互动形态框架确定,时间轴初现

12月15日,互动需求初步敲定,明确操控后台需求

12月26日,客户端封版,第一次演习

1月,后台开发迭代,周度演习。

2月12日/15日,预热。

2月14日/16日,进场联排。

2月18日,实战。

 

我们前面互动策划的时间花的比较多,因为涉及多方磨合。确定互动后,为了确保覆盖量,客户端开发的节奏超快,两周内搞定这个大版本。后台部分工作量巨大,但开发同学在一个月内加班加点搞定了后台系统的改造,最后抗住了峰值,确保项目呈现。整体节奏是比较紧张的。

 

春晚控制后台的关键任务

 

春晚控制后台主要解决当晚和现场直播时间点相关的一些变更操作,比如节目单正在播放、红包切合口播时间下发之类。

 

相比面向用户端的互动策划来说,控制后台部分酷值就下降很多,需求来的比较直接,主要是解决业务如何更好的实现的问题,确保技术实现和人员操作都简单可靠。互动形态给控制后台提出的关键任务有一下几项:

 

1场景切换

 

  • 整个春晚互动,要求在不同时间段出现不同的互动类型。

  • 场景变更的时间点要严格匹配主持人的口播。

 

2节目组拜年

 

节目组拜年的互动形式是看春晚时候,摇一摇,可以出现当前节目演员的拜年页面。

 

  • 要求与节目强关联,某个节目出现的时候,对应的节目组拜年也要跟着变换。

  • 一旦节目顺序调整或者节目删减,节目组拜年的素材也要相应变化。

  • 一个节目和拜年素材是否一一对应?

  • 素材需要提前推送,但是页面上展示的节目名称可能会有调整。

 

3节目单&正在播放

 

节目单是在互动策划的后台加入的一个很小的功能,起初只是打算摇出一个页面,展示当晚的节目单,后来大家觉得要做实时展现,这样实时的体验更强。

 

  • 和节目组拜年需求很相似,能否捆绑?

  • 对于串场的节目在节目单上如何展现

  • 节目单会展示整个节目队列,删减的节目如何处理

 

4红包倒计时

 

 

最初倒计时的用途只是在互动页面顶部展示距离抢红包时间还有多久,目的是把平时的人流量积累到抢红包的高峰时段。但在2月17日的时候,后台开发同学仔细反复地review整个系统的设计,发现最重要的抢红包时刻的开启是风险最大的点,一旦切换操作因某些意外因

 

 

素导致失败,将会导致整场互动功亏一篑。经评估后,我们把开启红包场景的方案调整为倒计时归零就自动开启,设定的时间段到期后自动结束。新的方案消除了高峰时刻无法开启红包场景的风险,但相比之下也带来了新的难点。

 

  • 原需求:仅用于互动页面顶部展示距离抢红包的倒计时,为高峰时刻积攒人流量。

  • 临危受命新使命:倒计时归零,就开启红包。内心的感觉—>“火箭发射的倒计时指令”

  • 新使命带来的问题:如何给出最准确的倒计时?

 

5素材管理

 

节目组拜年的H5页面、节目单、还有页面上展示赞助商权益的赞助商logo素材,都需要提前上传,维护关联关系。

 

需求梳理和功能呈现

 

1、接着前一步的关键任务,我们很快梳理出了控制后台的功能框架,主要两部分:

 

素材管理:

 

  • 节目组拜年素材

  • 节目单

  • 赞助商

 

现场控制:

 

  • 粗时间轴——场景切换

  • 细时间轴——节目单、节目组拜年的切换

  • 节目单顺序调整

  • 倒计时

  • 紧急页面——用于时间轴切错后的补救。开启紧急页面状态后,会关闭和时间相关的互动,调整完毕后,可以关闭紧急页面,恢复正常状态。

 

在此基础上,为了确保多人同时操作后台不出错,还增加了版本控制等高级功能。当晚也是通过变更操作的版本号,和广州后台同事核对验证每一次的变更操作。

 

2、对于前面任务梳理环节提出的问题,我们也敲定了解决方案。

 

节目组拜年和节目单:

 

  • 节目组拜年和节目单绑定,二者必须一一对应。

  • 通过细时间轴切换确保二者和节目播放时间的强关联。

  • 每一个节目对应一个H5素材。如果一个节目里面有多个明星,需拍摄多套素材,就通过H5页面实现多套图片和语音素材的随机轮播逻辑,对于后台系统而言,还是一个H5素材。如果某些节目没收集到明星拜年素材,就使用春晚主持人拍摄的素材来补位。

  • 节目组拜年素材上的文字部分做成js配置文件,放到服务端,如果有更新,可以在摇的时候,在线拉取最新的文案内容,大小仅几KB,量级很轻。

  • 节目单上节目删减。后台在调整节目顺序的基础上,增加了禁用节目的功能,一旦禁用,就不展示在节目单上。

 

红包倒计时开启抢红包的新方案产生的问题:

 

在后台系统设计层面,没办法优化。只能通过提前研究彩排节目,仔细估算节目时间点,来确保当晚直播时,可以快速响应节目时间的变化,下发最精准的红包时刻。

 

感悟和现场小故事

 

1飞机餐

 

春晚的互动策划其实算不上完美,从10月底开始,我们持续做了两个多月,一直在变更磨合。如果用做饭来类比的话,春晚互动项目最后给我最大的感觉是像在做飞机餐,这其中要权衡的太多,用户、电视台广告部、导演组、技术层面超高并发下如何确保不挂和最优的体验等等。从最初开始以纯用户视角去自由策划的自命题作文、渐渐演变成迎合导演组口味的命题作文,再往后我们试着提推荐的方案去引导导演组接受。好在大家都很投入的去把这个事情做好,最后呈现出来的,也算是一份完美的飞机餐。

 

2红包倒计时的估算——能早不能晚

 

正常情况下,电视的直播,会故意晚30秒左右,确保一旦出现问题,可以有时间在直播源头做调整。这种模式下,我们可以根据现场播放的精确的时间,提前30秒的时间下发最精确的时间。但15年的春晚,采用了0延迟直播的模式,所以只能靠估算。我们倒计时估算的原则是可以早,但不可晚。因为一旦电视上,主持人说开始抢的时候,还没发摇出红包的话,体验就比较差,但如果提前出现,用户可以理解为自己的延迟,相比之下好一些。所以这个地方,我们把估算的时间点有意提早一些。

 

在当晚直播的时候,我们拿到了节目的串联单,列了每个节目表演的时长、开始时间、结束时间。每个节目下场的时候,我们会估算新的延迟,推算新的倒计时时间点。在10:20左右,红包时刻前最后一个语言类节目结束,我们终于敲定了最后的倒计时时间,最后红包在我们预料的时间点内下发,还算比较完美。

 

3素材推送——背后设计、开发、测试的彻夜不眠

 

由于电视台侧的配合原因,采集节目组拜年开始的比较晚,基本是从14号白天才开始采集素材。晚上10点半结束原始素材的采集。14号连夜,经过“图片和语言素材制作—>H5开发生成页面—>测试验证页面—>H5页面打包—>上传至后台—>同步到客户端后台—>资源校验—>推送”这么一系列的工作流程,在15日下午,终于完成了全部65个素材的推送工作。背后是相关的设计、开发、构建、测试、后台多部门同学的彻夜不眠。当然,这只是春晚项目一个小功能环节的缩影。

 

4致谢

 

在文章的最后,要向参与项目支持的开发、测试、设计还有产品等同学表达谢意,这是一个多部门联动的超大项目,所有人的齐心协力协同作战才确保了项目的完美呈现。希望以后还有机会,大家可以一起做的更好!

原文here

转载于:https://www.cnblogs.com/ytkah/articles/4422699.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/420025.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端学习(1434):为什么学习vue

#### 1.2 为什么要学习 Vue传统开发模式: JQueryRequireJS/SeaJSartTemplateGulp/Grunt随着项目业务场景的复杂,传统模式已无法满足需求就出现了Angular/React/Vue等框架- 企业需求 - 主流框架之一(React Angular Vue) - 易用、灵活、高效

oracle 如何创建job,oracle创建job

一、基本语法与MysqL的event事件类似,用来创建数据库的定时任务。DBMS_JOB.SUBMIT(job OUT BINARY_INTEGER,what IN VARCHAR2,NEXT_DATE IN DATE DEFAULTSYSDATE,interval IN VARCHAR2 DEFAULT NULL,no_parse IN BOOLEAN DEFAULT FALSE,instance IN BINARY_INTEGER …

如何简单快速调试高大上的谷歌浏览器

上一篇我们简单的将了在Ubuntu上编译chromium,android content_shell_apk的编译,一切顺利的就能生成apk。但是我们仅仅只是照搬了人家google开源的东西,作为一个开发者我们应带着探索的精神,都说它稳定,速度快。它为什…

前端学习(1435):vue能做什么

#### 1.3 Vue 能做什么- 最大程度上解放了 DOM 操作 - 单页web项目(SinglePageApplication项目,例如[Worktile官网](https://worktile.com/))开发 - 传统网站开发

linux下proc目录,Linux /proc目录详解

3. 例子3.1 /proc/linuxidc.comlinuxidc:~$ ls /proc/1 16819 21242 2180 2494 8768 interrupts partitions116 16820 21244 2181 2524 885 iomem sched_debug11740 17901 21245 21810 2525 acpi ioports scsi1174…

前端学习(1436):vue特点

#### 1.4 核心特性- 双向数据绑定- vue(借鉴了react的虚拟DOM,借鉴了angular双向数据绑定) - 通过 **指令** 扩展了 HTML,通过 **表达式** 绑定数据到 HTML - 解耦视图与数据 - 可复用**组件** - 虚拟DOM - M-V-VM - 数据驱动视图

集合排序求平均

static void Main(string[] args) { ArrayList al new ArrayList(); //定义一个集合Console.Write("请输入人数:"); int n Convert.ToInt32(Console .ReadLine ()); …

Linux装c编译器gcc,c编译器进阶之路,linux下的gcc c编译器使用教程

c编译器的重要性不言而喻,从往期c编译器文章中,如c编译器优化、选定c编译器等,想必大家对c编译器均已有所了解。往期文章中,小编主要从宏观方面为大家讲解c编译器,此外对于gcc c编译器的讲解也大多基于windows。本文中…

前端学习(1437):vue一些链接

#### 1.5 一些链接[Vue官方文档](https://cn.vuejs.org/)[Vue开源项目汇总](https://github.com/opendigg/awesome-github-vue)[Vue.js中文社区](https://www.vue-js.com/)

GDB调试程序(二)

以下文章转自陈皓CSDN博客: http://blog.csdn.net/haoel/article/details/2879 GDB的命令概貌——————— 启动gdb后,就你被带入gdb的调试环境中,就可以使用gdb的命令开始调试程序了,gdb的命令可以使用help命令来查看,如下所示…

Linux下CMAKE编译jsoncpp,c – 如何为jsoncpp编写cmake模块?

我想使用jsoncpp编写C代码以解析JSON文件.让我解释一下我做了什么.我创建了一个CMakeLists.txt,我创建了一个FindJsoncpp.cmake以及一个简单的c文件来测试jsoncpp.当我使用-I /usr/include / jsoncpp / -ljsoncpp编译没有cmake的C源时,它工作正常.但是当我尝试使用cmake构建它时…

前端学习(1438):vue三种安装方式

1. 直接下载源码然后通过路径引入- 开发版本&#xff1a;https://vuejs.org/js/vue.js- 生产版本&#xff1a;https://vuejs.org/js/vue.min.js2. CDNjs <script src"https://cdn.jsdelivr.net/npm/vue2.5.16/dist/vue.js"></script> 3. 使用 npm 下载&…

三星s7共享网络给linux,三星Galaxy S7WiFi状态下可以共享wifi热点吗【详解】

目前&#xff0c;越来越多的智能手机都具有wifi热点的功能&#xff0c;不仅方便了不少网友之间的网络流量共享&#xff0c;而且一个wifi热点还可以共享到多个设备。而三星最新款手机三星Galaxy S7与S7 Edge在wifi热点功能的基础上&#xff0c;将wifi热点功能进行的升华&#xf…

文件处理封装

/// <summary>/// 文件处理封装/// </summary> public static class FileHelper{/// <summary>/// 读取Txt文件/// </summary>/// <param name"FilePath">文件地址</param>/// <returns>文件内容</returns>public s…

前端学习(1439):vue的helloworld

#### 2.2 HelloWorld> 作用:将数据应用在html页面中1. body中,设置Vue管理的视图<div id"app"></div>2. 引入vue.js3. 实例化Vue对象 new Vue();4. 设置Vue实例的选项:如el、data... new Vue({选项:值});5. 在<div idapp></div>中通过…

解决空值的策略

使用Option<T>类型二不是null是解决空值问题的另一种策略。与null相比&#xff0c;Option<T>类型是一个更安全的方法&#xff0c;因为它同样适用于值类型和引用类型。而且它的功能更强大&#xff0c;因为它用“元数据”的方法保存一个值的额外信息&#xff0c;因此…

linux c 内存分配内存,Linuxc - 操作系统内存分配

静态变量是存储在数据段的&#xff0c;在函数中可以共用。全局变量也是存储在数据段的&#xff0c;在全局中可以共用。指针变量本质上是地址&#xff0c;数组变量本质上也是地址。数组是可靠的&#xff0c;不可变的地址。指针变量是不可靠的&#xff0c;可变的。数组本质上是指…

管理linux中文件共享,Linux操作系统文件管理器的共享

在目前最流行的RedHatLinux 9.0中有GNOME和KDE这两个图形桌面。这两个桌面系统中分别有两个不同的文件管理器&#xff1a;在GNOME中是Nautilus(鹦鹉螺)而KDE中是Konqueror&#xff0c;各有不少很实用的特色。其实不管你登录哪个桌面都可以同时使用这两个文件管理器&#xff0c;…

mysql区分大小写搜索

form:http://www.uphtm.com/database/257.html 在默认情况下&#xff0c;MySQL搜索不区分大小写&#xff08;但某些字符集始终区分大小写&#xff0c;如czech&#xff09;。这意味着&#xff0c;如果你使用col_name LIKE a%进行搜索&#xff0c;你将获得以A或a开始的所有列。如…