來源：InfoQ（infoqchina）
作者：邵雍

從2015年第一場雙11晚會(huì)的全民互動(dòng)，到2016年雙11晚會(huì)首創(chuàng)的「雙向互動(dòng)」。參與形式不斷創(chuàng)新，參與規(guī)模不斷擴(kuò)大，這場晚會(huì)的成功，凝聚了從策劃到導(dǎo)演、執(zhí)行的全部「劇組人員」的所有心血。阿里的程序員們，在這過程中又都干了些啥？

一、背景介紹

回顧2015年在水立方舉行的第一屆雙11晚會(huì)，我們可以稱之為“全民互動(dòng)”的晚會(huì)。因?yàn)椴恢故乾F(xiàn)場的幾千位觀眾，全國所有在電視機(jī)面前的觀眾朋友，都可以拿起手機(jī)，打開天貓客戶端或淘寶客戶端，參與到晚會(huì)現(xiàn)場的各個(gè)明星互動(dòng)游戲中來，進(jìn)行紅黑押寶，獲勝的人，還能搶到一元商品。

而剛剛過去的，在深圳大運(yùn)中心的2016第二屆雙11晚會(huì)，更是有了歷史性的突破，是一場“雙向互動(dòng)”的晚會(huì)。電視機(jī)前的觀眾，可以不只是單向的接收舞臺(tái)上的劇情變化，也可以用手機(jī)APP參與互動(dòng)，來改變舞臺(tái)上的劇情發(fā)展，支持哪位明星，就一起努力讓TA贏。對于無法觀看電視浙江衛(wèi)視的用戶，還可以打開天貓客戶端，觀看舔屏版的網(wǎng)絡(luò)直播并同步參與互動(dòng)。

今年的直播渠道也有很多，手機(jī)天貓、手機(jī)淘寶、優(yōu)酷、來瘋、今日頭條、Youtube，這樣全世界的會(huì)員和粉絲，都能及時(shí)參與到晚會(huì)的互動(dòng)中來，參與一場全球的狂歡盛宴。這種“雙向互動(dòng)”的玩法，無論在國內(nèi)還是國外，都是首創(chuàng)。超級碗和《美國偶像》的總制片人、88屆奧斯卡頒獎(jiǎng)典禮總導(dǎo)演、天貓雙11狂歡夜總導(dǎo)演David Hill稱之為“好萊塢+硅谷”融合的里程碑式的創(chuàng)新。而作為技術(shù)的我們，面對這些技術(shù)挑戰(zhàn)，也是心潮澎湃。

二、雙向互動(dòng)怎么玩？

首先說“紅黑大PK”，這個(gè)互動(dòng)去年就有，在主持人說“開啟押寶通道”后，用戶可以選擇的紅隊(duì)或黑隊(duì)，然后明星開始游戲，當(dāng)其中一個(gè)隊(duì)伍獲勝時(shí)，押中隊(duì)伍的用戶有機(jī)會(huì)，就可以得到一個(gè)寶箱，開寶箱會(huì)有機(jī)會(huì)獲得指定商品的1塊錢購買權(quán)。今年這個(gè)游戲支持了雙向互動(dòng)，在選擇完隊(duì)伍之后，用戶還可以繼續(xù)努力點(diǎn)贊，為支持的隊(duì)伍“點(diǎn)贊贏時(shí)間”、“點(diǎn)贊得道具”等等，增加勝利的概率。粉絲們終于可以為自己的愛豆，貢獻(xiàn)自己的力量了。

其他雙向互動(dòng)玩法還有“AB劇”、“跨屏搶星衣”、“滿天星”等等。因?yàn)槭羌夹g(shù)文章，這里不再一一細(xì)說，其關(guān)鍵點(diǎn)，都是在“舞臺(tái)、電視機(jī)、手機(jī)”三者之間，跨越距離和時(shí)間，讓用戶能有一種“身臨其境”的感覺，看電視的同時(shí)，也能無縫的參與到我們的互動(dòng)中來。

三、雙向互動(dòng)的難點(diǎn)在哪里？

前面介紹雙向互動(dòng)時(shí)說到了“跨越時(shí)間”，所以先看看這個(gè)時(shí)間上的難點(diǎn)在哪里。

如圖，可以看到，“開啟點(diǎn)贊事件”，首先由舞臺(tái)發(fā)生，經(jīng)衛(wèi)星傳遞畫面，60秒后在電視畫面出現(xiàn)，此時(shí)，用戶拿起手機(jī)開始點(diǎn)贊。然而，這個(gè)點(diǎn)贊數(shù)據(jù)，開始從0到1的時(shí)候，舞臺(tái)內(nèi)容其實(shí)已經(jīng)過去了60秒了，這時(shí)候舞臺(tái)只能拿到剛剛開始變化的點(diǎn)贊數(shù)據(jù)。雖然數(shù)據(jù)比實(shí)際要小，但我們肯定不會(huì)去造假夸大，只能用。

所以舞臺(tái)上的主持人及明星嘉賓，必然是在一個(gè)事件發(fā)生的60秒之后，才能看到數(shù)據(jù)反饋的（從現(xiàn)場L屏看到）。那么關(guān)鍵性的問題來了：現(xiàn)場L屏的數(shù)據(jù)，到了電視里，已經(jīng)是60秒之后了，手機(jī)上，怎么同步和電視L屏出現(xiàn)一樣的數(shù)據(jù)？

這個(gè)問題其實(shí)有點(diǎn)燒腦了，我們先從一個(gè)簡單的問題來說：舞臺(tái)事件發(fā)生的60秒后，電視畫面出現(xiàn)了相應(yīng)的“口播”，手機(jī)端怎么知道，要“開啟點(diǎn)贊事件”了，可以開始從0到1的計(jì)數(shù)了？

這個(gè)問題，其實(shí)我們?nèi)ツ昃徒鉀Q了，我們設(shè)計(jì)了一個(gè)時(shí)差同步的專利，大致流程是這樣的：

1、互聯(lián)網(wǎng)導(dǎo)播點(diǎn)擊“開啟點(diǎn)贊”按鈕

2、互動(dòng)后臺(tái)校準(zhǔn)時(shí)間，預(yù)計(jì)電視在X分Y秒時(shí)，才會(huì)出現(xiàn)對應(yīng)的畫面

3、推拉結(jié)合預(yù)告手機(jī)端，在60秒內(nèi)手機(jī)端能知道 “開啟點(diǎn)贊”事件將要發(fā)生在X分Y秒

4、到了X分Y秒，手機(jī)端，執(zhí)行相應(yīng)的事件處理

這樣就解決了手機(jī)端和電視同步出現(xiàn)一樣的內(nèi)容，然后再回來說，怎么和電視L屏出現(xiàn)一樣數(shù)據(jù)。

互聯(lián)網(wǎng)導(dǎo)播點(diǎn)擊“開啟點(diǎn)贊”按鈕

1、互動(dòng)后臺(tái)校準(zhǔn)時(shí)間，預(yù)計(jì)電視在X分Y秒時(shí)，才會(huì)出現(xiàn)對應(yīng)的畫面

2、手機(jī)端推拉結(jié)合，在60秒內(nèi)，獲知“開啟點(diǎn)贊”事件發(fā)生在X分Y秒

3、到了X分Y秒，手機(jī)端，執(zhí)行相應(yīng)的事件處理

4、現(xiàn)場L屏開始獲取當(dāng)前時(shí)刻的數(shù)據(jù)（同時(shí)將數(shù)據(jù)持久化起來），數(shù)據(jù)合成到電視信號，在X分Y秒，出現(xiàn)在了電視L屏

5、X分Y秒，手機(jī)端取用的不是當(dāng)前時(shí)刻的數(shù)據(jù)，而是約60秒之前，持久化起來的數(shù)據(jù)

具體些，將每秒的數(shù)據(jù)存下來，每毫秒的數(shù)據(jù)都hash到秒，每秒的數(shù)據(jù)由定時(shí)鐘寫入，然后L屏后臺(tái)獲取的是當(dāng)時(shí)的數(shù)據(jù)，而手機(jī)端用戶請求的是，60秒前，存入的數(shù)據(jù)。這里的60秒，只是一個(gè)估算的值，具體需要節(jié)目衛(wèi)星通道建立之后，再進(jìn)行對時(shí)校準(zhǔn)得出。

四、無時(shí)無刻實(shí)時(shí)點(diǎn)贊排名

點(diǎn)贊，常見于現(xiàn)在比較熱的手機(jī)主播直播，而在大型電視現(xiàn)場直播節(jié)目中出現(xiàn)、使用，也是頭一次。前面提到的“雙向互動(dòng)”，主要的互動(dòng)參與方式：就是簡單的“點(diǎn)贊”，一直狂點(diǎn)。很多人技術(shù)同學(xué)，可能會(huì)不以為意，點(diǎn)贊后臺(tái)不就是個(gè)計(jì)數(shù)器嗎？這有什么難的，兩行代碼就能搞定。

然而我們要面臨的是千萬級的點(diǎn)贊用戶量，和時(shí)間非常集中的點(diǎn)贊請求，最終預(yù)估會(huì)有百億千億級別的點(diǎn)贊數(shù)。同時(shí)，我們要“實(shí)時(shí)”給出單節(jié)目PV、UV、用戶排行榜。

剛接到這個(gè)需求的時(shí)候也是覺得很棘手。關(guān)于單純的點(diǎn)贊數(shù)（PV）功能，我們就做了很多技術(shù)選型，DB、緩存，都有難以突破的熱點(diǎn)瓶頸，而我們分布式的后端，因?yàn)槭欠植际郊海眉儍?nèi)存也并不那么放心。

最后，我們的解決方案是兩者結(jié)合，用內(nèi)存計(jì)數(shù)來頂住峰值瀏覽，但內(nèi)存中只放入2秒的數(shù)據(jù)，每2秒會(huì)有機(jī)制去做持久化，這樣就算真的遇到萬一，丟了2秒的數(shù)據(jù)，也關(guān)系不大。我們構(gòu)造了一個(gè)新的數(shù)據(jù)結(jié)構(gòu)，稱之為MIT（Memory Increase Tools），對外暴露的能力只有increase，然后內(nèi)部封裝了定時(shí)做持久化的邏輯，并且每次持久化都不阻塞其他increase線程。

剛剛的MIT設(shè)計(jì)，也只是解決了PV統(tǒng)計(jì)的問題，UV還需要再想辦法。傳統(tǒng)的UV統(tǒng)計(jì)，大多需要在每個(gè)用戶第一次點(diǎn)贊時(shí)，寫入保存一個(gè)標(biāo)識，然后每次點(diǎn)贊的時(shí)候，判斷是不是存在這個(gè)標(biāo)識，不存在時(shí)UV加1。

為了避免對于性能極大浪費(fèi)的情況，特別是對于晚會(huì)這種苛刻的場景，我們仔細(xì)思考了一下上下文邏輯、意圖，通過判斷點(diǎn)贊數(shù)從0變?yōu)榱?，就能判斷用戶是否來過，可以省下一次緩存，使大部分的點(diǎn)贊請求，就只有一次緩存的寫入，其他都是內(nèi)存操作，保證了接近極致的性能。

最后來看實(shí)時(shí)排行。動(dòng)態(tài)數(shù)據(jù)的排行榜，最直接能想到的高性能解決方案也就是redis的zadd了，但這樣的話，一來zadd的key就成為了熱點(diǎn)，并發(fā)沖突變多、QPS能力必然受限于單機(jī)；二來上千萬的數(shù)據(jù)進(jìn)行內(nèi)存zadd，內(nèi)存大小、RT也會(huì)暴露問題；三來就是成本，成本問題先不多說，值得說的是，這回錢不一定能解決問題。

果然上帝關(guān)上一扇門，又開啟了一扇窗。冥思苦想，我們發(fā)現(xiàn)，前面MIT的思路，恰恰好地，也可以用于排行計(jì)算。我們可以用內(nèi)存，持有一個(gè)單機(jī)版的排序，然后每2秒，刷入到一個(gè)緩存，然后定時(shí)把所有機(jī)器的緩存，合并出一個(gè)最終的排行榜。如圖：

這里有一個(gè)關(guān)鍵點(diǎn)主要注意：持有一個(gè)單機(jī)版的排序，這里需要有一個(gè)在高并發(fā)下線程安全、定時(shí)刷入時(shí)不阻塞其他線程、能自動(dòng)排序、自動(dòng)逐出末尾的數(shù)據(jù)結(jié)構(gòu)。這個(gè)數(shù)據(jù)結(jié)構(gòu)，我們基于跳表也實(shí)現(xiàn)了出來，但限于篇幅，后面單獨(dú)分享。

五、尖刺請求也要保成功

前面說過，晚會(huì)主打的玩法是“紅黑PK”，在主持人一聲令下“開啟押寶通道”時(shí)，所有用戶蜂擁而至，押寶接口將迎來巨大的洪水流量，而這些流量，我們還不能過早過低限流，因?yàn)闀?huì)直接影響用戶體驗(yàn)、互動(dòng)參與率、甚至客訴。所以我們需要做的是極致的優(yōu)化！

但是又需要持久化，所以我們限制自己，只能有一次tair的寫入。最終我們的寫法是：

oniszTair.versionPrefixPut(pKey(userId), sKey(pkId), target, 2, expire);

這里，用的是主子key的方式，這樣有幾個(gè)好處：

1、一次主pkey查詢可以查出所有的押注記錄，查詢時(shí)，也可以節(jié)約tair網(wǎng)絡(luò)交互延遲；

2、version=2，確保只有第一次才能寫入成功；（第一次寫入成功后版本為1，傳入非1的數(shù)字都會(huì)cas校驗(yàn)失敗，不能寫入）

3、寫入失敗時(shí)，不會(huì)立即反查一次，而是讓前端友好提示，這樣在重試時(shí)，其實(shí)已經(jīng)錯(cuò)開了峰值；

六、互聯(lián)網(wǎng)導(dǎo)播控制臺(tái)

也就是我們的“核按鈕”所在。說到這里，有必要說一下“互聯(lián)網(wǎng)導(dǎo)播”這個(gè)職業(yè)，這個(gè)職業(yè)也是雙11天貓晚會(huì)首創(chuàng)，去年才有。類似于電視導(dǎo)播，在導(dǎo)播車盯著十幾個(gè)攝像機(jī)機(jī)位畫面，將最好的畫面切換給觀眾。互聯(lián)網(wǎng)導(dǎo)播則是將最合適的互動(dòng)內(nèi)容（可以是匹配電視舞臺(tái)內(nèi)容或業(yè)務(wù)場景需要給的內(nèi)容），切換給成千上萬、甚至上億的手機(jī)設(shè)備。這個(gè)工作會(huì)更個(gè)性化、更復(fù)雜，也更有挑戰(zhàn)。

區(qū)別于電視導(dǎo)播的控制臺(tái)，互聯(lián)網(wǎng)導(dǎo)播使用的是自定義的H5頁面控制臺(tái)。2015年的第一版是這樣的，巨丑版：

2016年，我們用上了Bootstrap，漂亮多了。

然而無論樣式是怎樣的，這個(gè)控制臺(tái)都需要有如下特點(diǎn)：

1、一鍵式。任何場景，同一時(shí)間的指令，導(dǎo)播只需要點(diǎn)一個(gè)按鈕。（人需要有反應(yīng)時(shí)間，所以一般只來得及點(diǎn)一次。）

2、信息要全。要關(guān)注的信息，比如輸入&輸出&反饋，要一目了然，不需要再開新窗口。

3、預(yù)案靈活。百密也總有一疏，用于修復(fù)&糾正的預(yù)案，總是要有的。

剩下的，就是等待晚會(huì)開始，Rock&Roll ！

七、跨終端Web動(dòng)畫制作工具

這是本次晚會(huì)前端的一個(gè)技術(shù)亮點(diǎn)：產(chǎn)出了通用動(dòng)畫導(dǎo)出工具。由于這是一場時(shí)尚的晚會(huì)，很多明星大腕，對視覺的要求也會(huì)非常高，尤其是對展現(xiàn)給用戶的動(dòng)畫特效，更是苛刻的要求。素材制作上，設(shè)計(jì)師給出的視覺呈現(xiàn)，就給前端同學(xué)帶來不小困難，比如：酷炫的動(dòng)畫過于復(fù)雜，如果按照視覺稿一幀一幀還原的話，需要耗費(fèi)極大的人工成本，而且一旦動(dòng)畫出現(xiàn)需求調(diào)整，對前端開發(fā)人員來說，簡直就是災(zāi)難，時(shí)間精力完全耗不起。

這種情況下，機(jī)智的晚會(huì)開發(fā)同學(xué)產(chǎn)出了通用動(dòng)畫導(dǎo)出工具，設(shè)計(jì)師只需要使用 After Effector(AE) 制作動(dòng)畫，前端就可以通過寫 ExtendScript 腳本導(dǎo)出動(dòng)畫數(shù)據(jù)，優(yōu)化、解析動(dòng)畫數(shù)據(jù)后，使用 canvas 來播放動(dòng)畫。

八、開啟AR跨屏搶星衣

“跨屏搶星衣”是今年準(zhǔn)備的一個(gè)特色環(huán)節(jié)，導(dǎo)演組安排了劉浩然和林志玲兩位明星，在某個(gè)節(jié)目中各丟出一件衣服，電視機(jī)前的觀眾，拿起手機(jī)可以參與搶“原味星衣”。明星在丟衣服之前，主持人會(huì)口播提示用戶“使用手淘或者貓客的攝像頭對準(zhǔn)屏幕”，用戶手機(jī)對準(zhǔn)后，客戶端通過 AR 識別技術(shù)進(jìn)行識別和定位，識別成功后，在明星丟出衣服的瞬間，用戶在手機(jī)上會(huì)看到衣服從電視中浮出，砸碎屏幕，到了自己的手機(jī)上，效果如圖：

做到這點(diǎn)，需要各個(gè)環(huán)節(jié)恰到好處的銜接。邏輯如圖：

這個(gè)銜接，一方面是明星、電視導(dǎo)播、互聯(lián)網(wǎng)導(dǎo)播，對于內(nèi)容Q點(diǎn)的約定，另外一方面，是基于前面說過的技術(shù)（推拉結(jié)合預(yù)告手機(jī)端），才能讓互聯(lián)網(wǎng)導(dǎo)播的按鈕指令，及時(shí)的下達(dá)到手機(jī)。另外，值得一說的是，貓客在AR這塊，用了一個(gè)使用率較低、視覺融合較難，但是效果卻特別好的開源算法（Traditional Template Square Marker），建議可以了解一下，多一種選擇總是好的。

九、感想&展望

雙11晚會(huì)，在技術(shù)眼中，就像是碼農(nóng)們進(jìn)了娛樂圈，連代碼都需要寫的高大上。要應(yīng)對各種集中的流量（口播、Q點(diǎn)、搶）、還要把已經(jīng)很酷炫的視覺稿還原的更加酷炫。在觀眾看著電視明星流口水的同時(shí)，還能參與互動(dòng)，給心儀的明星支持，然后拿到禮品。這需要有著如絲般柔順的體驗(yàn)，用戶才會(huì)愿意玩。

這些特性，在晚會(huì)史上都是前無古人的。即便是雙11天貓晚會(huì)本身，在2016年也是超越了2015年太多的。可以預(yù)見的是，明年肯定有更多想不到的玩法，我們不斷的創(chuàng)新，只為更high更好玩。各種新的技術(shù)，新的玩法，新的可能性，只有想不到，沒有做不到。

回想起晚會(huì)平穩(wěn)落幕的瞬間，技術(shù)人員內(nèi)心的喜悅，是無法比擬的。本屆互聯(lián)網(wǎng)導(dǎo)播，控制核按鈕的“那之手”說：我感覺更加耐操了，以后各種互動(dòng)都不怕了！

期待明年晚會(huì)的新挑戰(zhàn)！

每年雙11技術(shù)保障工作的順利完成，是阿里技術(shù)積累和創(chuàng)新能力的集中展現(xiàn)。2016雙11業(yè)務(wù)狂歡的背后，更是體現(xiàn)了阿里這兩年來在人工智能、VR、云計(jì)算和大數(shù)據(jù)技術(shù)方面豐富的技術(shù)實(shí)踐與突破。

歷經(jīng)近一個(gè)月的編寫，《不一樣的技術(shù)創(chuàng)新-阿里巴巴2016雙11背后的技術(shù)》一書最終呈現(xiàn)在大家面前。本書由數(shù)十位親歷雙11零點(diǎn)之戰(zhàn)的阿里技術(shù)大V編寫，與大家零距離分享雙11一線技術(shù)團(tuán)隊(duì)實(shí)戰(zhàn)經(jīng)驗(yàn)，這27篇共計(jì)10萬余字精心打造的技術(shù)干貨凝聚了阿里工程師的智慧和創(chuàng)造力。