iT邦幫忙

0

觀摩「大量連線」與「即時更新」絕佳實例的機會

就是奧運官網比賽直播

昨晚在看 MOD 轉播桌球銅牌賽時
我同時開官網的直播頁面
發現 MOD 看到的分數和官網上的更新
時間差不到五秒,幾乎是同時

我只想得到兩種做法:ajax polling 和 websocket
於是我用 F12 去看 HTTP request
無奈學藝不精
看到眼花撩亂都找不到「用什麼方法」「更新時間頻率」

在此請教各位高手
有空時看看這個網站
看看是否能看出背後的做法

/images/emoticon/emoticon41.gif

如果上面的超連結的比賽已經結束
可以在 SCHEDULE AND RESULTS 頁面的右方 All Sports Live Now
隨意點一個項目進去看直播
https://ithelp.ithome.com.tw/upload/images/20210727/200017873cMZXMBCup.png

看更多先前的討論...收起先前的討論...
froce iT邦大師 1 級 ‧ 2021-07-27 09:46:23 檢舉
看起來是 ajax polling...有個網址大概每一秒更新,而且是得分結果的html。
zz開頭的網址應該是目前正在比賽的所有比賽。這個的更新時間比較久。
然後感覺這個靠的不是前端在省頻寬,是靠後端的CDN和超強後端在撐...

這種狀況下學不到什麼...
"有個網址大概每一秒更新" ...

幾乎跟 DDOS 差不多了

如果真的是用 polling 的方式靠 CDN 在拼
大概只能學到一件事
就是
有錢就是任性...XDD
微笑 iT邦新手 3 級 ‧ 2021-07-27 11:20:06 檢舉
好猛ww
Han iT邦新手 1 級 ‧ 2021-07-27 13:31:56 檢舉
問個各位大佬 這種情況是 後端有排程不斷將結果寫入快取
然後api全部都靠快取來輸出嗎??
froce iT邦大師 1 級 ‧ 2021-07-28 11:23:05 檢舉
不是,是前端不斷發ajax請求,然後後端檢查結果有沒有變動,有變動吐結果,沒變動吐 304 Not Modified告訴borwser說你不用改結果。
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status/304
3
無敵銅金剛
iT邦新手 5 級 ‧ 2021-07-27 14:51:52
最佳解答

研究了一下,猜測接收到304是比分沒有更新,200的時候有新比分,用ajax更新拿資料後重建整個div

第一個200的API結果
https://ithelp.ithome.com.tw/upload/images/20210727/20125491oCnciKCGGz.jpg

第二個200的API結果,比分不同
https://ithelp.ithome.com.tw/upload/images/20210727/20125491mTb4Nc7rgg.jpg

拿到資料後會針對id刪除整個div然後再重新建立
https://ithelp.ithome.com.tw/upload/images/20210727/20125491IPfqnXwaes.jpg

呼叫的方法(loadPageToDiv)
https://ithelp.ithome.com.tw/upload/images/20210727/20125491ULXNT6iOek.jpg

然後發起人Google了一下猜測是使用CDN
https://ithelp.ithome.com.tw/upload/images/20210727/20125491IK8XlHATnb.jpg

我只能看到這裡了,其他的有請其他高手補充

謝謝回答
/images/emoticon/emoticon41.gif

lusaka216 iT邦新手 5 級 ‧ 2021-07-27 22:32:26 檢舉

有學習了 感謝您的分享

0
froce
iT邦大師 1 級 ‧ 2021-07-27 10:10:02

https://ithelp.ithome.com.tw/upload/images/20210727/20104001Po5XSYF2rM.png

第一個圈是跟你說可以過濾XHR(ajax)
第二個圈就是所有比賽
第三個圈就是目前的比數

有些比賽有好幾個網址。

看更多先前的回應...收起先前的回應...

我比對了gdb-000100-.htm
似乎就是 Live 分數那一塊的HTML而非預期的json
蠻令人意外的
/images/emoticon/emoticon06.gif

另外觀察到一個現象
同一個 gdb-000100-.htm
會有一個 HTTP 200 的回覆
另外搭配 2-3 個 HTTP 304 的回覆
這不知是否是怕 request 失敗
一次多打幾個 request 看看是否至少中一個
/images/emoticon/emoticon13.gif

froce iT邦大師 1 級 ‧ 2021-07-27 12:24:12 檢舉

我覺得不是,應該是某些比賽有不同的搜尋方式,但其實傳回的結果網頁都一樣,然後用js從結果網頁去篩選出來。
某些類型比賽就只有一個結果網址。

我不知道這網站是不是從以前就這樣還是主辦國每次都重新做,如果是以前就這樣可能是技術債。

似乎就是 Live 分數那一塊的HTML而非預期的json

所以我說超強後端啊...

froce
抱歉我選樓下那位為最佳解答
一來他花時間去 trace code
二來我想給新邦友一個肯定
請多多包涵
/images/emoticon/emoticon41.gif

froce iT邦大師 1 級 ‧ 2021-07-29 13:53:13 檢舉

沒關係,我的積分夠我在這閒聊就夠了。
我是真的懶得去 trace code。

謝謝包涵
/images/emoticon/emoticon41.gif

0
u2420123
iT邦新手 3 級 ‧ 2021-07-27 11:11:33

請教一下
這超連結裡那一個部份是比賽的分數
/images/emoticon/emoticon19.gif

1
firecold
iT邦新手 2 級 ‧ 2021-07-28 15:15:22

https://ithelp.ithome.com.tw/upload/images/20210728/20118647czt5k9eFLu.png

我以為用ajax polling 這隻json做更新
json檔在搭配cdn這樣


阿這隻好像比較偏向累積
看一下上面應該就是解答了

謝謝回答

如上面的其他回答
這隻 json 不是 Live 分數的來源

我要發表回答

立即登入回答