WebSocket

前言 前幾天研究了一下 Client Pull 和 Server Push 的幾種方式，其中屬於 Server Push 的 SSE(Server Send Event)已經在之前的文章 資料實時更新的方式 - Client Pull vs Server Push 中實作過，這次來研究另一種 Server Push 的方式，同時也是較常聽到的 WebSocket，來研究看看如何實作一個簡單的多人聊天室 簡介 Socket.io 因為待會 demo 的前後端會使用 Socket.io 套件來實作，所以開始前先來介紹一下 Socket.io 這個套件 （以下內容整理自官網介紹） Socket.IO is a library that enables low-latency, bidirectional and event-based communication between a client and a server. Socket.io 也是為了解決網路即時通訊而誕生，但是他並不像 WebSocket 一樣屬於通用協定，而是將底層 WebSocket 抽象化的 JavaScript Library(包含前端與後端的 npm 套件)，所以 Socket.io 是建於 WebSocket 之上，有自己定義的溝通格式。 Socket.IO is NOT a WebSocket implementation....

前言 現今網路世界主要都是用 HTTP request-response 的 model 來做為溝通的模型，client 發送 request 給 server，server 再回傳 response 給 client，但是隨著 Web 的需求改變與技術的演進，漸漸需要另一種溝通方式，來讓 server 無須被 client 請求時就能主動傳送資料給 client，最常見的例子就是股票網站的股價更新、新聞網站的文章更新…等等，或是需要前後端雙方即時溝通的需求，衍生出 WebSockets 的誕生。技術上區分為 Client Pull 和 Server Push 兩種，本篇文章就稍微總結這兩種方式的差異，以及各自有哪些方法 實時更新的幾種方式 主要分成以下幾種方式: Client Pull Short Polling Long Polling Server Push WebSockets SSE (Server Send Event) Short Polling vs Long Polling 早期更新方式是透過 JavaScript 的 Polling(輪詢)來獲得 server 最新的資料 Short polling Short polling 是一個 AJAX-based 的 timer，讓 client 每隔一段時間去向 server 獲取資源，但效能不好，因為有可能 client 每隔 N 秒去問 server 時這 N 秒內資料都沒改動，就會浪費網路資源...