iT邦幫忙

2021 iThome 鐵人賽

DAY 20
0

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);
};

Reference


上一篇
Day18:WS 串接 Client & Server
下一篇
Day20:狀態參數判讀
系列文
摸索 WebSocket,遠望 WebRTC30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言