用 Socket.IO 打造多人聊天室👨‍👨‍👧‍👧 (上)

了解WebSocket概念與應用，搭建環境

Jia-yun Yang

Dec 17, 2020

WebSocket 是什麼？

在說明 WebSocket 之前，必須先理解HTTP是什麼：

一般來說，當我們在瀏覽網頁時，瀏覽器(Client)為了取得資料，會先向伺服器(Server)發送請求，然後伺服器才會發送回應(data)給瀏覽器，如此我們才能看到網站內容，而這一切都是透過HTTP協定達成的。

WebSocket 與 HTTP 一樣，也是一種網路傳輸協定，但它與HTTP不同的是

WebSocket 允許伺服器主動向瀏覽器發送請求。

可以看到在下圖中，WebSocket 只要在一開始，先讓Server與Client完成一次握手，之後就可以創造持久性連接，進行雙向的傳輸。

總結

HTTP: 只能單向溝通，只能由瀏覽器主動發送請求給伺服器
WebSocket: 可雙向溝通，可由瀏覽器或伺服器主動發送請求給彼此

什麼時候需要 WebSocket ?

想想看，假如今天我們想要瀏覽股市交易網站，或多人共同編輯等等的即時性網站，它們的資料必須非常及時，幾乎是每秒甚至更短的時間在更新，這時候要怎麼做呢？

在過去大多是採用【輪詢 Polling 】技術，讓瀏覽器固定一段時間(例如10秒)自動發出 HTTP 請求給伺服器，來獲取最新的網頁資料。不過這種做法相當老舊，而且對伺服器的負擔很大。在即使伺服器端資料沒有更新的情況下，客戶端還是必須不停地送出HTTP請求，這就會造成網路資源的浪費。

好在 WebSocket 能夠解決這個問題。透過它我們能讓伺服器與瀏覽器進行雙向資料的傳輸，讓雙方只在有更新時才主動發送請求給彼此，進而大幅提升了方便性與效能！

備註: 除了Polling與WebSocket外，還是有其他即時通訊技術，有興趣參考

手把手實作

關於Socket.Io

Socket.IO是一個建立即時性通訊網頁應用的 JavaScript 函式庫，它把Client端與Server端的程式統一成一致的操作方式，讓使用者只需專注在處理「事件」，就可以快速開發出應用。

此外，Socket.IO封裝了WebSocket以及其他協議，所以寫程式時並不需要知道這些細節，只需要設定好就可以運作。它也支援『房間』的概念，可以使用同一條WebSocket卻擁有不被彼此干擾的資料傳輸。

實作說明

接下來我們會實作一個簡單的多人聊天室，一開始用戶會需要在大廳先輸入名稱，點撃 start 後，如果名稱未重複就進入聊天室，反之跳出警示。

進入後，用戶可以看到在線人數與聊天訊息，也可以發送訊息到聊天室內。如用戶要離開，點選右上叉叉即可。

1. 安裝node.js

由於後端伺服器是採用node.js，因此我們須先安裝環境，流程如下

先在node官網下載LTS版本(較穩定)
點擊安裝(過程只需一直按next即可)
開啟Terminal輸入以下內容，如有顯示版號則表示安裝成功

node: node -v
npm: npm -v

完成後，我們就能使用node與npm了

補充----
node.js:
不是程式語言(programming language), 也不是框架(framework)，它是runtime執行環境，它允許在後端（脫離瀏覽器環境）運行JavaScript程式碼。npm:
全名為Node Package Manager，開發者可以透過安裝Node來獲得隨附的npm cli，進行套件的安裝及管理