策劃一場全民聯動的雙11晚會，程序員在后面都干了什么？
來源：InfoQ（infoqchina）
作者：邵雍
從2015年第一場雙11晚會的全民互動，到2016年雙11晚會首創的「雙向互動」。參與形式不斷創新，參與規模不斷擴大，這場晚會的成功，凝聚了從策劃到導演、執行的全部「劇組人員」的所有心血。阿里的程序員們，在這過程中又都干了些啥？
一、背景介紹
回顧2015年在水立方舉行的第一屆雙11晚會，我們可以稱之為“全民互動”的晚會。因為不止是現場的幾千位觀眾，全國所有在電視機面前的觀眾朋友，都可以拿起手機，打開天貓客戶端或淘寶客戶端，參與到晚會現場的各個明星互動游戲中來，進行紅黑押寶，獲勝的人，還能搶到一元商品。
而剛剛過去的，在深圳大運中心的2016第二屆雙11晚會，更是有了歷史性的突破，是一場“雙向互動”的晚會。電視機前的觀眾，可以不只是單向的接收舞臺上的劇情變化，也可以用手機APP參與互動，來改變舞臺上的劇情發展，支持哪位明星，就一起努力讓TA贏。對于無法觀看電視浙江衛視的用戶，還可以打開天貓客戶端，觀看舔屏版的網絡直播并同步參與互動。
今年的直播渠道也有很多，手機天貓、手機淘寶、優酷、來瘋、今日頭條、Youtube，這樣全世界的會員和粉絲，都能及時參與到晚會的互動中來，參與一場全球的狂歡盛宴。這種“雙向互動”的玩法，無論在國內還是國外，都是首創。超級碗和《美國偶像》的總制片人、88屆奧斯卡頒獎典禮總導演、天貓雙11狂歡夜總導演David Hill稱之為“好萊塢+硅谷”融合的里程碑式的創新。而作為技術的我們，面對這些技術挑戰，也是心潮澎湃。
二、雙向互動怎么玩？
首先說“紅黑大PK”，這個互動去年就有，在主持人說“開啟押寶通道”后，用戶可以選擇的紅隊或黑隊，然后明星開始游戲，當其中一個隊伍獲勝時，押中隊伍的用戶有機會，就可以得到一個寶箱，開寶箱會有機會獲得指定商品的1塊錢購買權。今年這個游戲支持了雙向互動，在選擇完隊伍之后，用戶還可以繼續努力點贊，為支持的隊伍“點贊贏時間”、“點贊得道具”等等，增加勝利的概率。粉絲們終于可以為自己的愛豆，貢獻自己的力量了。
其他雙向互動玩法還有“AB劇”、“跨屏搶星衣”、“滿天星”等等。因為是技術文章，這里不再一一細說，其關鍵點，都是在“舞臺、電視機、手機”三者之間，跨越距離和時間，讓用戶能有一種“身臨其境”的感覺，看電視的同時，也能無縫的參與到我們的互動中來。
三、雙向互動的難點在哪里？
前面介紹雙向互動時說到了“跨越時間”，所以先看看這個時間上的難點在哪里。
如圖，可以看到，“開啟點贊事件”，首先由舞臺發生，經衛星傳遞畫面，60秒后在電視畫面出現，此時，用戶拿起手機開始點贊。然而，這個點贊數據，開始從0到1的時候，舞臺內容其實已經過去了60秒了，這時候舞臺只能拿到剛剛開始變化的點贊數據。雖然數據比實際要小，但我們肯定不會去造假夸大，只能用。
所以舞臺上的主持人及明星嘉賓，必然是在一個事件發生的60秒之后，才能看到數據反饋的（從現場L屏看到）。那么關鍵性的問題來了：現場L屏的數據，到了電視里，已經是60秒之后了，手機上，怎么同步和電視L屏出現一樣的數據？
這個問題其實有點燒腦了，我們先從一個簡單的問題來說：舞臺事件發生的60秒后，電視畫面出現了相應的“口播”，手機端怎么知道，要“開啟點贊事件”了，可以開始從0到1的計數了？
這個問題，其實我們去年就解決了，我們設計了一個時差同步的專利，大致流程是這樣的：
1、互聯網導播點擊“開啟點贊”按鈕
2、互動后臺校準時間，預計電視在X分Y秒時，才會出現對應的畫面
3、推拉結合預告手機端，在60秒內手機端能知道 “開啟點贊”事件將要發生在X分Y秒
4、到了X分Y秒，手機端，執行相應的事件處理
這樣就解決了手機端和電視同步出現一樣的內容，然后再回來說，怎么和電視L屏出現一樣數據。
互聯網導播點擊“開啟點贊”按鈕
1、互動后臺校準時間，預計電視在X分Y秒時，才會出現對應的畫面
2、手機端推拉結合，在60秒內，獲知“開啟點贊”事件發生在X分Y秒
3、到了X分Y秒，手機端，執行相應的事件處理
4、現場L屏開始獲取當前時刻的數據（同時將數據持久化起來），數據合成到電視信號，在X分Y秒，出現在了電視L屏
5、X分Y秒，手機端取用的不是當前時刻的數據，而是約60秒之前，持久化起來的數據
具體些，將每秒的數據存下來，每毫秒的數據都hash到秒，每秒的數據由定時鐘寫入，然后L屏后臺獲取的是當時的數據，而手機端用戶請求的是，60秒前，存入的數據。這里的60秒，只是一個估算的值，具體需要節目衛星通道建立之后，再進行對時校準得出。
四、無時無刻實時點贊排名
點贊，常見于現在比較熱的手機主播直播，而在大型電視現場直播節目中出現、使用，也是頭一次。前面提到的“雙向互動”，主要的互動參與方式：就是簡單的“點贊”，一直狂點。很多人技術同學，可能會不以為意，點贊后臺不就是個計數器嗎？這有什么難的，兩行代碼就能搞定。
然而我們要面臨的是千萬級的點贊用戶量，和時間非常集中的點贊請求，最終預估會有百億千億級別的點贊數。同時，我們要“實時”給出單節目PV、UV、用戶排行榜。
剛接到這個需求的時候也是覺得很棘手。關于單純的點贊數（PV）功能，我們就做了很多技術選型，DB、緩存，都有難以突破的熱點瓶頸，而我們分布式的后端，因為是分布式集群，用純內存也并不那么放心。
最后，我們的解決方案是兩者結合，用內存計數來頂住峰值瀏覽，但內存中只放入2秒的數據，每2秒會有機制去做持久化，這樣就算真的遇到萬一，丟了2秒的數據，也關系不大。我們構造了一個新的數據結構，稱之為MIT（Memory Increase Tools），對外暴露的能力只有increase，然后內部封裝了定時做持久化的邏輯，并且每次持久化都不阻塞其他increase線程。
剛剛的MIT設計，也只是解決了PV統計的問題，UV還需要再想辦法。傳統的UV統計，大多需要在每個用戶第一次點贊時，寫入保存一個標識，然后每次點贊的時候，判斷是不是存在這個標識，不存在時UV加1。
為了避免對于性能極大浪費的情況，特別是對于晚會這種苛刻的場景，我們仔細思考了一下上下文邏輯、意圖，通過判斷點贊數從0變為了1，就能判斷用戶是否來過，可以省下一次緩存，使大部分的點贊請求，就只有一次緩存的寫入，其他都是內存操作，保證了接近極致的性能。
最后來看實時排行。動態數據的排行榜，最直接能想到的高性能解決方案也就是redis的zadd了，但這樣的話，一來zadd的key就成為了熱點，并發沖突變多、QPS能力必然受限于單機；二來上千萬的數據進行內存zadd，內存大小、RT也會暴露問題；三來就是成本，成本問題先不多說，值得說的是，這回錢不一定能解決問題。
果然上帝關上一扇門，又開啟了一扇窗。冥思苦想，我們發現，前面MIT的思路，恰恰好地，也可以用于排行計算。我們可以用內存，持有一個單機版的排序，然后每2秒，刷入到一個緩存，然后定時把所有機器的緩存，合并出一個最終的排行榜。如圖：
這里有一個關鍵點主要注意：持有一個單機版的排序，這里需要有一個在高并發下線程安全、定時刷入時不阻塞其他線程、能自動排序、自動逐出末尾的數據結構。這個數據結構，我們基于跳表也實現了出來，但限于篇幅，后面單獨分享。
五、尖刺請求也要保成功
前面說過，晚會主打的玩法是“紅黑PK”，在主持人一聲令下“開啟押寶通道”時，所有用戶蜂擁而至，押寶接口將迎來巨大的洪水流量，而這些流量，我們還不能過早過低限流，因為會直接影響用戶體驗、互動參與率、甚至客訴。所以我們需要做的是極致的優化！
但是又需要持久化，所以我們限制自己，只能有一次tair的寫入。最終我們的寫法是：
oniszTair.versionPrefixPut(pKey(userId), sKey(pkId), target, 2, expire);
這里，用的是主子key的方式，這樣有幾個好處：
1、一次主pkey查詢可以查出所有的押注記錄，查詢時，也可以節約tair網絡交互延遲；
2、version=2，確保只有第一次才能寫入成功；（第一次寫入成功后版本為1，傳入非1的數字都會cas校驗失敗，不能寫入）
3、寫入失敗時，不會立即反查一次，而是讓前端友好提示，這樣在重試時，其實已經錯開了峰值；
六、互聯網導播控制臺
也就是我們的“核按鈕”所在。說到這里，有必要說一下“互聯網導播”這個職業，這個職業也是雙11天貓晚會首創，去年才有。類似于電視導播，在導播車盯著十幾個攝像機機位畫面，將最好的畫面切換給觀眾。互聯網導播則是將最合適的互動內容（可以是匹配電視舞臺內容或業務場景需要給的內容），切換給成千上萬、甚至上億的手機設備。這個工作會更個性化、更復雜，也更有挑戰。
區別于電視導播的控制臺，互聯網導播使用的是自定義的H5頁面控制臺。2015年的第一版是這樣的，巨丑版：
2016年，我們用上了Bootstrap，漂亮多了。
然而無論樣式是怎樣的，這個控制臺都需要有如下特點：
1、一鍵式。任何場景，同一時間的指令，導播只需要點一個按鈕。（人需要有反應時間，所以一般只來得及點一次。）
2、信息要全。要關注的信息，比如輸入&輸出&反饋，要一目了然，不需要再開新窗口。
3、預案靈活。百密也總有一疏，用于修復&糾正的預案，總是要有的。
剩下的，就是等待晚會開始，Rock&Roll ！
七、跨終端Web動畫制作工具
這是本次晚會前端的一個技術亮點：產出了通用動畫導出工具。由于這是一場時尚的晚會，很多明星大腕，對視覺的要求也會非常高，尤其是對展現給用戶的動畫特效，更是苛刻的要求。素材制作上，設計師給出的視覺呈現，就給前端同學帶來不小困難，比如：酷炫的動畫過于復雜，如果按照視覺稿一幀一幀還原的話，需要耗費極大的人工成本，而且一旦動畫出現需求調整，對前端開發人員來說，簡直就是災難，時間精力完全耗不起。
這種情況下，機智的晚會開發同學產出了通用動畫導出工具，設計師只需要使用 After Effector(AE) 制作動畫，前端就可以通過寫 ExtendScript 腳本導出動畫數據，優化、解析動畫數據后，使用 canvas 來播放動畫。
八、開啟AR跨屏搶星衣
“跨屏搶星衣”是今年準備的一個特色環節，導演組安排了劉浩然和林志玲兩位明星，在某個節目中各丟出一件衣服，電視機前的觀眾，拿起手機可以參與搶“原味星衣”。明星在丟衣服之前，主持人會口播提示用戶“使用手淘或者貓客的攝像頭對準屏幕”，用戶手機對準后，客戶端通過 AR 識別技術進行識別和定位，識別成功后，在明星丟出衣服的瞬間，用戶在手機上會看到衣服從電視中浮出，砸碎屏幕，到了自己的手機上，效果如圖：
做到這點，需要各個環節恰到好處的銜接。邏輯如圖：
這個銜接，一方面是明星、電視導播、互聯網導播，對于內容Q點的約定，另外一方面，是基于前面說過的技術（推拉結合預告手機端），才能讓互聯網導播的按鈕指令，及時的下達到手機。另外，值得一說的是，貓客在AR這塊，用了一個使用率較低、視覺融合較難，但是效果卻特別好的開源算法（Traditional Template Square Marker），建議可以了解一下，多一種選擇總是好的。
九、感想&展望
雙11晚會，在技術眼中，就像是碼農們進了娛樂圈，連代碼都需要寫的高大上。要應對各種集中的流量（口播、Q點、搶）、還要把已經很酷炫的視覺稿還原的更加酷炫。在觀眾看著電視明星流口水的同時，還能參與互動，給心儀的明星支持，然后拿到禮品。這需要有著如絲般柔順的體驗，用戶才會愿意玩。
這些特性，在晚會史上都是前無古人的。即便是雙11天貓晚會本身，在2016年也是超越了2015年太多的。可以預見的是，明年肯定有更多想不到的玩法，我們不斷的創新，只為更high更好玩。各種新的技術，新的玩法，新的可能性，只有想不到，沒有做不到。
回想起晚會平穩落幕的瞬間，技術人員內心的喜悅，是無法比擬的。本屆互聯網導播，控制核按鈕的“那之手”說：我感覺更加耐操了，以后各種互動都不怕了！
期待明年晚會的新挑戰！
每年雙11技術保障工作的順利完成，是阿里技術積累和創新能力的集中展現。2016雙11業務狂歡的背后，更是體現了阿里這兩年來在人工智能、VR、云計算和大數據技術方面豐富的技術實踐與突破。
歷經近一個月的編寫，《不一樣的技術創新-阿里巴巴2016雙11背后的技術》一書最終呈現在大家面前。本書由數十位親歷雙11零點之戰的阿里技術大V編寫，與大家零距離分享雙11一線技術團隊實戰經驗，這27篇共計10萬余字精心打造的技術干貨凝聚了阿里工程師的智慧和創造力。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
全部評論（1條）