iT邦幫忙

2021 iThome 鐵人賽

DAY 9
1
Modern Web

不只是串串API,新手前端30天系列 第 9

DAY 09 - 由後端主動告訴你資料更新 - websocket

  • 分享至 

  • xImage
  •  

回想一下開發經驗,當後端資料狀態有更新...

不知道大家有沒有遇到,在開發的時候,如果狀態更新但我們不可能要求使用者重整來看到更新資料(使用者要通靈嗎,哪知道你什麼時候更新XD),這時候前端該怎麼辦呢?
最直覺的的方法就是前端下個setInterval每隔10秒重覆呼叫,這種方式,學術一點的說法叫做Polling(輪詢)。

Polling(輪詢) - 傳統易達成方式

Polling概念就是固定一段時間,就要一次資料。就像很積極(?)的PM請RD修BUG,每隔5分鐘就問你修好了沒?
優點:好實作(前端下幾行code就解決了)
缺點:

  1. 浪費資源(是不管有沒有更新,就是固定10秒一直從前端跟後端要資料)
  2. 無法確保更新資料的第一時間前端就會更新
    (EX:如果我每隔60秒要一次資料,但剛好第五秒狀態已經更新了,後面的55秒還是要等下一次前端跟後端要資料的時候才會發現)

基於這種令人有點浪費資源又比較不智慧(?)的Polling方式,在這裡也提供一種server端主動通知的選擇,就是我們今天要談的webSocket拉~

WebSocket

WebSocket和http一樣,是一種網路傳輸協定。但他能解決http的缺點,http只能有client端發起request。websocket不同於http,Client端與Server端只需要完成一次交握,就可以一直建立連線,讓資料更有效率地交換。也因此,當後端發現資料狀態更新,就能主動通知前端,前端收到這個訊號後,就可以做對應的處理,如重新打一次API在取得一次資料,更新目前前端畫面的資料。

  • 優點:資源節省、即時性(資料更新馬上通知前端,讓前端保持最新的資料狀態)
  • 缺點:server維護成本和前期開發較高

比較一下http和websocket:

一般websocket的請求網址如下

ws://www.testWebsocket.com

wss://www.testWebsocketcom //SSL加密後:ws -> wss 

明天我們繼續介紹websocket在前端的實作與後端的配合吧~~


上一篇
DAY08 - 自製MOCK API,讓你開發更方便
下一篇
DAY10 - websocket前端實作-以vue.js為例
系列文
不只是串串API,新手前端30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言