iT邦幫忙

0

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

ajax websocket web design
海綿寶寶 2021-07-27 09:28:06 ‧ 3190 瀏覽

  • 分享至 

  • xImage

就是奧運官網的比賽直播

昨晚在看 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和超強後端在撐...

這種狀況下學不到什麼...
海綿寶寶 iT邦大神 1 級 ‧ 2021-07-27 10:05:05 檢舉
"有個網址大概每一秒更新" ...

幾乎跟 DDOS 差不多了

如果真的是用 polling 的方式靠 CDN 在拼
大概只能學到一件事
就是
有錢就是任性...XDD
微笑 iT邦研究生 5 級 ‧ 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
登入發表討論
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

4 個回答

4
無敵銅金剛
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

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

海綿寶寶 iT邦大神 1 級 ‧ 2021-07-27 15:45:30 檢舉

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

lusaka216 iT邦新手 4 級 ‧ 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)
第二個圈就是所有比賽
第三個圈就是目前的比數

有些比賽有好幾個網址。

看更多先前的回應...收起先前的回應...
海綿寶寶 iT邦大神 1 級 ‧ 2021-07-27 11:54:19 檢舉

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

海綿寶寶 iT邦大神 1 級 ‧ 2021-07-27 12:08:09 檢舉

另外觀察到一個現象
同一個 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

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

海綿寶寶 iT邦大神 1 級 ‧ 2021-07-29 13:33:04 檢舉

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

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

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

海綿寶寶 iT邦大神 1 級 ‧ 2021-07-29 15:50:17 檢舉

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

登入發表回應
0
nlstudio
iT邦新手 2 級 ‧ 2021-07-27 11:11:33

大約是每三秒一次
更新一次info
https://olympics-thor-api-data.kiswe.com/wall_stats/OLYMPICS-ALL.json

海綿寶寶 iT邦大神 1 級 ‧ 2021-07-27 11:17:33 檢舉

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

登入發表回應
1
firecold
iT邦新手 1 級 ‧ 2021-07-28 15:15:22

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

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

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

海綿寶寶 iT邦大神 1 級 ‧ 2021-07-28 16:33:44 檢舉

謝謝回答

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

登入發表回應

我要發表回答

立即登入回答
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22198 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙