JavaScript | WebSocket 讓前後端沒有距離

神Q超人
Feb 23, 2019 · 8 min read

前言

最近因為工作的關係接觸到 WebSocketWebSocket 是網路協定的一種, Client 可以透過此協定與 Server 做溝通,而他和一般 httphttps 不同的是, WebSocket 協定只需透過一次連結便能保持連線,不必再透過一直發送 Request 來與 Server 互動!

WebSocket

如前言所說, WebSocket 只需開啟連結便能和 Server 做溝通,且 Websocket 傳送資料的方式是雙向的, Client 端可以像 Ajax 一樣做請求, Server 端也能主動發送 Client 所需要的資料。

ws://example.com//經過 SSL 加密後,前方的 ws 會變成 wss 
wss://example.com

Server 端 - 搭建 WebSocket 環境

WebSocket 的 Server 部分,本文會以 Node.js 建置,如果電腦上還沒有安裝 Node.js 可以先參考「[筆記][node.js]第一次建置node.js開發環境和安裝npm就上手!」。

npm install express
npm install ws
下載完後的套件會被記錄到 package.json 中
node server.js
開啟成功後會在 console 中打印提示

Client 端 - 連接 WebSocket Server

Server 端處理完後,就換到 Client 端來連結剛剛開啟的 WebSocket 服務,這裡另外建一個專案,在專案裡只需一個 index.htmlindex.js

<html>
<body>
<script src='./index.js'></script>
</body>
</html>
開啟連結後會執行 onopen 的事件
在 Server 上執行時記錄的訊息

回到 Server 端 - 處理接收發送訊息

提到溝通,過程一定是有來有往,在開啟 WebSocket 後, Server 端會使用 send 發送訊息,接收則是如同在 connection 內監聽 close 一樣,只是換成對 message 設定監聽,並接收一個參數 data ,捕獲 Client 端發送的訊息:

在 WebSocket 的連結開啟後,設定 message 的監聽

回到 Client 端 - 處理接收發送訊息

剛剛處理完 Server ,要換回 Client 端使用 onmessage 處理接收及 send 送出訊息:

為 onmessage 指定要執行的函示,接收一個參數 event 為 Server 發送的物件
Server 接收 Client 發送的訊息後再回傳
使用 setInterval 不斷發送最新訊息給 Client 端
不斷接收 Server 主動傳遞的訊息

最後一次回到 Server - 多人連線

通常 WebSocket 都會運用在聊天室,但是就剛剛的使用方式來說,今天 ClientA 和 ClientB 都連結同一個 Server ,而他們各自在 Client 使用 send 發送資料給 Server , 在這個情況下 Server 只會依據兩個 Client 各自發送的內容,再分別回傳給 ClientA 和 ClientB ,並無法讓 ClientB 能夠在 ClientA 發送訊息時也收到回傳的資料。

客戶端無法共享 Server 發送的訊息
使用 clients 取得所有連接中的 client

補充內容

雖然在 WebSocket 的協定上 Client 和 Server 不需再通過 Request ,因此在開發人員工具中的 Network 中就看不到 Request 的資料,但是取而代之的是,那些傳遞過程可以透過第一次要求連接時的 Request 中觀察:

觀察在 WebSocket 協定的傳輸方式
  1. http://www.ruanyifeng.com/blog/2017/05/websocket.html

Enjoy life enjoy coding

The learn process of website code.

Enjoy life enjoy coding

The learn process of website code.

神Q超人

Written by

82 年次,單純相信努力不會騙人

Enjoy life enjoy coding

The learn process of website code.