背景介紹
回顧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屏出現一樣資料：
—>手機端推拉結合，在60秒内，獲知“開啟點贊”事件發生在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 ！
跨終端web動畫制作工具
這是本次晚會前端的一個技術亮點：産出了通用動畫導出工具。由于這是一場時尚的晚會，很多明星大腕，對視覺的要求也會非常高，尤其是對展現給使用者的動畫特效，更是苛刻的要求。素材制作上，設計師給出的視覺呈現，就給前端同學帶來不小困難，比如：酷炫的動畫過于複雜，如果按照視覺稿一幀一幀還原的話，需要耗費極大的人工成本，而且一旦動畫出現需求調整，對前端開發人員來說，簡直就是災難，時間精力完全耗不起。
這種情況下，機智的晚會開發同學産出了通用動畫導出工具，設計師隻需要使用 after effector(ae) 制作動畫，前端就可以通過寫 extendscript 腳本導出動畫資料，優化、解析動畫資料後，使用 canvas 來播放動畫。
開啟ar跨屏搶星衣
“跨屏搶星衣”是今年準備的一個特色環節，導演組安排了劉浩然和林志玲兩位明星，在某個節目中各丢出一件衣服，電視機前的觀衆，拿起手機可以參與搶“原味星衣”。明星在丢衣服之前，主持人會口播提示使用者“使用手淘或者貓客的攝像頭對準螢幕”，使用者手機對準後，用戶端通過 ar 識别技術進行識别和定位，識别成功後，在明星丢出衣服的瞬間，使用者在手機上會看到衣服從電視中浮出，砸碎螢幕，到了自己的手機上，效果如圖：
做到這點，需要各個環節恰到好處的銜接。邏輯如圖：
這個銜接，一方面是明星、電視導播、網際網路導播，對于内容q點的約定，另外一方面，是基于前面說過的技術（推拉結合預告手機端），才能讓網際網路導播的按鈕指令，及時的下達到手機。另外，值得一說的是，貓客在ar這塊，用了一個使用率較低、視覺融合較難，但是效果卻特别好的開源算法（traditional template square marker），建議可以了解一下，多一種選擇總是好的。參看：
<a href="https://artoolkit.org/documentation/doku.php?id=3_marker_training:marker_training">https://artoolkit.org/documentation/doku.php?id=3_marker_training:marker_training</a>
感想&展望
雙11晚會，在技術眼中，就像是碼農們進了娛樂圈，連代碼都需要寫的高大上。要應對各種集中的流量（口播、q點、搶）、還要把已經很酷炫的視覺稿還原的更加酷炫。在觀衆看着電視明星流口水的同時，還能參與互動，給心儀的明星支援，然後拿到禮品。這需要有着如絲般柔順的體驗，使用者才會願意玩。
這些特性，在晚會史上都是前無古人的。即便是雙11天貓晚會本身，在2016年也是超越了2015年太多的。可以預見的是，明年肯定有更多想不到的玩法，我們不斷的創新，隻為更high更好玩。各種新的技術，新的玩法，新的可能性，隻有想不到，沒有做不到。
回想起晚會平穩落幕的瞬間，技術人員内心的喜悅，是無法比拟的。本屆網際網路導播，控制核按鈕的“那之手”說：我感覺更加耐操了，以後各種互動都不怕了！期待明年晚會的新挑戰！
<a href="https://mp.weixin.qq.com/s/v8kiutrksrxzqh_8yyfr9w">原文連結</a>