Day19：WS 基本 API

2021 iThome 鐵人賽

DAY 20

Modern Web

摸索 WebSocket，遠望 WebRTC系列第 20 篇

13th鐵人賽

DoDoBird

團隊血汗攻城屍

2021-10-05 12:16:50

1270 瀏覽

分享至

API 寫法差異

在 client-side & server-side 兩端，使用 ws 時存在 API 寫法上的差異，需要特別注意。

這邊以監聽和關閉連線來舉例 :

// client

aWebSocket.onopen = function(event) {};
aWebSocket.onclose = function(event) {};

// server

ws.on('open', function () {});
ws.on('close', function () {});

雖然看起來很類似，但細微處仍有差異。

Test Send Message

接著，測試對兩端發送訊息，確認可以正常使用 ws 來連接兩端。

server-side

// ...
wss.on('connection', function connection(ws) {
  // reviced client-side
  ws.on('message', function (msg) {
    console.log(`server : ${msg}`);
  });
  // send to client-side
  ws.send('Message from server');
});

client-side

// ...
<script>
  const ws = new WebSocket('ws://127.0.0.1:3000');
  // keep listen
  ws.onopen = function () {
    // send to server-side
    ws.send('Hello Server!');
  };
  ws.onmessage = function (event) {
    console.log(event);
  };
</script>

打開 terminal 運行 server 底下的 index.js，前端頁面則由 live-server 處理。

可以看到 server-side 發出文字訊息 Message from server，並接收 client-side 送過來的 Hello Server!。client-side 的頁面會印出一個物件，其中的 data 則是保存 server-side 傳輸過來的資料。

Fixed

在上一篇筆記中，有測試在 client 端的資料夾下使用 index.js 來接受和發送訊息，但這樣容易搞混，所以統一 client-side 使用 websocket 的 api 寫法，而 server-side 則使用 ws library 寫法。並將 client/index.js -> main.js，同時將 index.html 的 script 移入。

client-side

// index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>This is Client</h1>

    <script src="./main.js"></script>
  </body>
</html>

// main.js
const ws = new WebSocket('ws://127.0.0.1:3000');

// keep listen
ws.onopen = function () {
  // send to server-side
  ws.send('Hello Server!');
};
ws.onmessage = function (event) {
  console.log(event);
};