用 Socket.IO 打造多人聊天室👨👨👧👧 (下)
延續上集，深入了解Socket.IO
回顧上集我們瞭解了 WebSocket 的應用與概念，並搭建了環境及頁面，現在才要真正開始coding呢，一起看下去吧！
目錄
- 建立後端node.js 伺服器
- 建立前端Socket 監聽
- 驗證登入
- 登出
- 送出訊息
4. 建立後端node.js 伺服器
由於我們要做出瀏覽器與伺服器的溝通，因此要先建立一個後端的伺服器，首先來到後端JS的部分，在這裡載入 Node.js 的原生模組 http，並引入socket.io、指定監聽端口，創建一個伺服器。
接著透過以下步驟，來啟動服務
- 儲存並開啟terminal，定位到app.js所在目錄
cd app.js所在目錄 - 輸入
node app.js啟動Server - 終端機印出
app listen at 8080，則表示Server啟動成功！
5. 建立前端socket監聽
先來看看 socket.io 提供那些基本方法
socket.emit — 用於發送事件
socket.on — 用於監聽事件
io.sockets.emit — Server對所有連接的Client發送事件
socket.broadcast.emit — Client給自己以外的Client發送事件
註: socket.io文件參考
在下圖code中，可以看到我們用 io.on 建立一個監聽【連線】的事件，所有內容接下來都要放在它裡面 (你也可以想成接下來所有事件發生都要在socket.io連線的狀態下，才能執行)。
然後，再加入socket.on，來監聽login(登入)事件
接著，打開前端JS (chat.js) ，先創建一個變數myName保存用戶名稱，並加上一個事件函數，當用戶點擊login-button後，我們就使用socket.emit發送login(登入)事件給後端。
現在創建了第一組監聽與發送的事件囉！儲存後重啟服務，看看terminal有沒有印出 {username: 你輸入的名稱} ，有則代表成功哦
如何重啟: 終端機>ctrl+C退出>輸入 node app.js >打開瀏覽器
6. 驗證登入
如果只寫了監聽與發送login事件還不夠，這樣要是有使用者的名稱重複就不好了，所以在這裡，我們要加上驗證登入的功能 —
邏輯
先為所有用戶定義一個users陣列，當用戶每次登入後觸發login事件，就判斷該名稱是否已經在陣列內 (app.js):
- 如果該名稱不在陣列內，就將它視為新用戶並成功登入，用socket.emit 發送 loginSuccess 事件，另外加上io.sockets.emit來發送add事件 (用戶廣播系統，會在聊天室內告訴大家誰誰誰進出)
- 如果已存在陣列內，就跳出錯誤提示，並發送 loginFail 事件
7. 登出
完成了登入功能後，當然也需要登出功能，功能流程大致如下-
按下 leaveButton 按鈕後會發送logout事件，logout事件內發生以下事情:
- 觸發leaveSuccess事件 ( 畫面回到登入頁 )
- 將該user於用戶陣列內刪除
- 觸發廣播系統leave，向所有用戶廣播 XXX退出聊天室
8. 傳送訊息
發送訊息的部分一樣，在按下 sendBtn按鈕 或是 enter 後:
- 觸發sendMessage()事件
- 用io.socket.emit發送receiveMessage事件，讓所有用戶接收到訊息
回到chat.js內，監聽reveiveMessage來檢查送出的訊息是否為自己發出的:
是自己發出 > 顯示訊息在畫面右邊
不是 >顯示訊息在畫面左邊
儲存後重啟專案，並開啟2–3個分頁，來測試看看用戶彼此是否能溝通。成功的話，基本上我們已經完成基本的多人聊天室囉！
流程回顧
- Client獲取用戶輸入的名稱，發送請求給Server (用戶登入)
- Server收到名稱，判斷是否為新用戶，並發送事件給Client (登入驗證)
- Client收到Server傳來的登入成功或失敗事件，執行相應處理
- 當用戶發送訊息時，Client將訊息與用戶名稱一起發給Server
- Server收到請求後，廣播該訊息給所有連接的Client
- Client收到Server傳來的訊息後，判斷用戶名稱是否為自己，對話顯示在相應位置
透過這次的練習，我們對webSocket的功用有更近一步的了解，以及練習使用socket.io來處理client與server的雙向溝通，可以發現我們只需要專注在事件的呼叫與處裡，其他header或是設定都由socket.io都已經幫我們打包好了呢。有興趣的人，也可以看看socket.IO的文件，裡面有更詳細的說明與教學，或是你也可以為這份作品加上更多的功能、或優化使用體驗。我相信，實際動手做一定比看文件學習更有效率喔！ 最後，有任何指點或建議都可以在下面留言喔！下次見掰～掰
參考資料
WebSocket 通訊協定簡介：比較 Polling、Long-Polling 與 Streaming 的原理
