343
策劃一場全民聯動的雙十一晚會，程序員在後麵都幹了什麼？
回顧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的計數了？
這個問題，其實我們去年就解決了，我們設計了一個時差同步的專利，大致流程是這樣的：
互聯網導播點擊“開啟點讚”按鈕
—>互動後台校準時間，預計電視在X分Y秒時，才會出現對應的畫麵
—>推拉結合預告手機端，在60秒內手機端能知道 “開啟點讚”事件將要發生在X分Y秒
—>到了X分Y秒，手機端，執行相應的事件處理
這樣就解決了手機端和電視同步出現一樣的內容，然後再回來說，怎麼和電視L屏出現一樣數據：
互聯網導播點擊“開啟點讚”按鈕
—>互動後台校準時間，預計電視在X分Y秒時，才會出現對應的畫麵
—>手機端推拉結合，在60秒內，獲知“開啟點讚”事件發生在X分Y秒
—>到了X分Y秒，手機端，執行相應的事件處理
—>現場L屏開始獲取當前時刻的數據（同時將數據持久化起來），數據合成到電視信號，在X分Y秒，出現在了電視L屏
—>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 ！
這是本次晚會前端的一個技術亮點：產出了通用動畫導出工具。由於這是一場時尚的晚會，很多明星大腕，對視覺的要求也會非常高，尤其是對展現給用戶的動畫特效，更是苛刻的要求。素材製作上，設計師給出的視覺呈現，就給前端同學帶來不小困難，比如：酷炫的動畫過於複雜，如果按照視覺稿一幀一幀還原的話，需要耗費極大的人工成本，而且一旦動畫出現需求調整，對前端開發人員來說，簡直就是災難，時間精力完全耗不起。
這種情況下，機智的晚會開發同學產出了通用動畫導出工具，設計師隻需要使用 After Effector(AE) 製作動畫，前端就可以通過寫 ExtendScript 腳本導出動畫數據，優化、解析動畫數據後，使用 canvas 來播放動畫。
“跨屏搶星衣”是今年準備的一個特色環節，導演組安排了劉浩然和林誌玲兩位明星，在某個節目中各丟出一件衣服，電視機前的觀眾，拿起手機可以參與搶“原味星衣”。明星在丟衣服之前，主持人會口播提示用戶“使用手淘或者貓客的攝像頭對準屏幕”，用戶手機對準後，客戶端通過 AR 識別技術進行識別和定位，識別成功後，在明星丟出衣服的瞬間，用戶在手機上會看到衣服從電視中浮出，砸碎屏幕，到了自己的手機上，效果如圖：
做到這點，需要各個環節恰到好處的銜接。邏輯如圖：
這個銜接，一方麵是明星、電視導播、互聯網導播，對於內容Q點的約定，另外一方麵，是基於前麵說過的技術（推拉結合預告手機端），才能讓互聯網導播的按鈕指令，及時的下達到手機。另外，值得一說的是，貓客在AR這塊，用了一個使用率較低、視覺融合較難，但是效果卻特別好的開源算法（Traditional Template Square Marker），建議可以了解一下，多一種選擇總是好的。參看：
https://artoolkit.org/documentation/doku.php?id=3_Marker_Training:marker_training
雙11晚會，在技術眼中，就像是碼農們進了娛樂圈，連代碼都需要寫的高大上。要應對各種集中的流量（口播、Q點、搶）、還要把已經很酷炫的視覺稿還原的更加酷炫。在觀眾看著電視明星流口水的同時，還能參與互動，給心儀的明星支持，然後拿到禮品。這需要有著如絲般柔順的體驗，用戶才會願意玩。
這些特性，在晚會史上都是前無古人的。即便是雙11天貓晚會本身，在2016年也是超越了2015年太多的。可以預見的是，明年肯定有更多想不到的玩法，我們不斷的創新，隻為更high更好玩。各種新的技術，新的玩法，新的可能性，隻有想不到，沒有做不到。
回想起晚會平穩落幕的瞬間，技術人員內心的喜悅，是無法比擬的。本屆互聯網導播，控製核按鈕的“那之手”說：我感覺更加耐操了，以後各種互動都不怕了！期待明年晚會的新挑戰！
最後更新：2017-06-28 15:32:02