JavaScript | WebSocket 讓前後端沒有距離

前言

WebSocket

一般的 WebSocket 請求網址會長這個樣子:

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

Server 端 - 搭建 WebSocket 環境

處理好安裝環境後還需要在下載兩個套件,分別是用來開發 Web 框架的 express 和負責處理 WebSocket 協定的 ws

npm install express
npm install ws

安裝完後可以到專案中的 package.json 中確認是否成功:

下載完後的套件會被記錄到 package.json 中

接著在專案裡新增一個 JavaScript 檔案 server.js 當作專案的進入點:

沒問題後便可以輸入以下指令執行 server.js

node server.js

當本機 Server 的指定 Port 被打開時,會先執行我們監聽指定的事件:

開啟成功後會在 console 中打印提示

Client 端 - 連接 WebSocket Server

index.html 的部分先簡單處理,只需引用 index.js 就可以了:

<html>
<body>
<script src='./index.js'></script>
</body>
</html>

index.js 的部分會用來處理與 WebSocket 的連結:

上方的 url 為剛剛使用 node.js 在本機上執行的 Server ,另外的 onopenonclose 分別為他們指定一個 Function ,在開啟和關閉連線時執行,執行結果:

開啟連結後會執行 onopen 的事件

執行結果中可以看到 onopen 中在 console 打印的提示,除此之外,也可以從剛剛執行 Server 的地方觀察開啟連結後的訊息:

在 Server 上執行時記錄的訊息

上方也列出 WebSocket 的物件有哪些屬性,比較重要的還有 onmessage , Client 就是靠它在接收由 Server 發送的資料,但在提到它之前,得先回到 Server 了解如何和 Client 做溝通。

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

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

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

為 onmessage 指定要執行的函示,接收一個參數 event 為 Server 發送的物件

onmessage 指定的函式中多了一個參數 event ,裡面會有這次溝通的詳細訊息,從 Server 回傳的資料會在 eventdata 屬性中。

但是上方的程式碼還沒有增加在 Client 中發送訊息的 send ,因此下方在連接到 WebSocket 後直接在 console 中發送,並確認回傳訊息:

Server 接收 Client 發送的訊息後再回傳

不過上面看起來還是以 Client 做 send 發送訊息給 Server 處理過才得到回傳資料,該怎麼從 Server 上直接發送呢?很簡單,只需要透過 setInterval 就能讓 Server 在固定時間發送資料給 Client ,例如下方的例子:

使用 setInterval 不斷發送最新訊息給 Client 端

Client 連結後的結果如下:

不斷接收 Server 主動傳遞的訊息

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

例如以下例子,用兩個視窗開啟 Client 並各自發送請求:

客戶端無法共享 Server 發送的訊息

那該怎麼像廣播一樣,當我在某一個 Client 發送訊息時,讓 Server 告知所有其他同時連接中的 Client 都知道我對 Server 發送這個訊息,也同時接收到 Server 回傳的資料呢?

答案就在一開始下載的套件 ws 中,它可以使用 clients 找出當前所有連結中的 Client 資訊,並透過迴圈將訊息發送至每一個 Client 中:

使用 clients 取得所有連接中的 client

這麼一來,不論是哪個 Client 端發送訊息, Server 都會將訊息回覆給所有連接中的 Client :

補充內容

觀察在 WebSocket 協定的傳輸方式

關於 WebSocket 從 Client 或是 Server 在 send 資料時,除了字串外還可以使用 USVStringArrayBufferBlodArrayBufferView 等型態(這部分感謝 Hank Hsiao 留言提醒)。

另外,要傳送 JSON 的資料的時,記得在 send 中做 JSON.stringify ,接收到時再用 JSON.parse 轉成物件處理即可!

如果想找個伺服器部署 WebSocket ,可以參考「Heroku | 搭配 Git 在 Heroku 上部署網站的手把手教學

本文介紹了 WebSocket 的基本使用方式及一些例子,希望能夠減少各位研究的時間,這幾天還會接著研究如何搭配 React

如果文章中有任何問題,或是不理解的地方,都可以留言告訴我!謝謝大家!

參考文章

  1. https://devcenter.heroku.com/articles/node-websockets
  2. http://www.ruanyifeng.com/blog/2017/05/websocket.html

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store