###### tags: `websocket`, `javascipt`, `node.js` # 【自學筆記】關於WebSocket的前後端溝通 因新工作需求接觸到`WebSocket`，就邊研究邊做個筆記 WebSocket 是網路協定的一種，可以透過此協定讓Client與Server保持溝通，和http&https不同的是，WebSocket只需==一次連結便能保持連線==，不需要一直不斷發送Request來與Server溝通 --- 通常WebSocket的請求網址長這樣 ``` ws://example.com 若有SSL會變成wss wss://example.com ``` :::info <font style="font-size:20px; font-weight:bold"> Server端 - 建立環境 </font> ::: 這邊用`node.js`搭建，在開始前需要下載兩個套件 分別是開發Web框架的`express`、處理WebSocket協定的`ws` ``` npm install express npm install ws ``` 首先在專案中新增一個`server.js`作為專案進入點 ```javascript= //先引用 express 和 ws 兩個套件 const express = require('express') const SocketServer = require('ws').Server //指定port const PORT = 5500 //創建express物件，然後綁定監聽設定的port //然後console個提示出來 const server = express() .listen(PORT, () => console.log(`Now listening ${PORT}`)) //把express物件丟給SocketServer const wss = new SocketServer({ server }) //當 WebSocket 從外部連結時 wss.on('connection', ws => { //連結時console提示一下 console.log('Client端連上惹') //WebSocket連線關閉時提示一下 ws.on('close', () => { console.log('斷開連接了') }) }) ``` 然後執行看看 ``` node server.js ``` ![](https://i.imgur.com/C2sVtGf.png) :::success <font style="font-size:20px; font-weight:bold"> Client端 - 連接Server的WebSocket </font> ::: 先在另一個專案中建立`index.html` & `index.js` html的部分只需要引用js即可 ```htmlembedded= <html> <body> <script src='./index.js'></script> </body> </html> ``` 用`index.js`來處理與WebSocket的連接 ```javascript= //使用 node.js 在本機上執行的 Server let ws = new WebSocket('ws://localhost:5500') //開啟後執行動作 //指定一個function在onopen後執行 //順便也把websocket物件印出來觀察看看 ws.onopen = () => { console.log(ws) console.log('開啟連結') } //關閉後執行動作 //指定一個function在onclose後執行 ws.onclose = () => { console.log('關閉連結') } ``` 執行結果，可以看到開啟連結的提示 另外，觀察WebSocket物件中有個`onmessage`，Client端就是靠它接收Server發送的資料 ![](https://i.imgur.com/jdwDxoJ.png) :::info <font style="font-size:20px; font-weight:bold"> 回來Server端 - 接收與發送信息 </font> ::: Server端會使用`WebSocket.send()`發送信息 接收則是跟`connection`一樣使用`WebSocket.on()`監聽 只是改為監聽`message`並接收一個`data`參數 ```javascript= wss.on('connection', ws => { console.log('Client端連上惹') //監聽message接收從 Client 發送的訊息 ws.on('message', data => { //data 為Client發送的訊息 //現在再將訊息加上一句from server送回去觀察看看 ws.send(data + " (from server)") }) ws.on('close', () => { console.log('斷開連接了') }) }) ``` :::success <font style="font-size:20px; font-weight:bold"> 再來Clent端 - 接收與發送信息 </font> ::: Server端處理好後，換Client端用前面提到的`onmessage`接收 ```javascript= let ws = new WebSocket('ws://localhost:5500') ws.onopen = () => { console.log(ws) console.log('開啟連結') } ws.onclose = () => { console.log('關閉連結') } //接收 Server 發送的訊息 ws.onmessage = event => { console.log(event) } ``` 因為Client這邊還沒加送資料的`send`，所以直接用devtool在console中發送 `onmessage`中多了一個`event`參數，這會包含此次溝通的詳細資訊 其中的`data`則是server回傳的資料 ![](https://i.imgur.com/GY9jKBe.png) 今天練習就先到這邊，後續有其他相關的再補上，感謝 --- *參考資料: https://reurl.cc/Kbddb9* *新手工程師的筆記，純粹記錄學了些啥東西 如果有前輩高人讀了我的文，文中有任何錯誤再麻煩指教指教*