在 client-side & server-side 兩端,使用 ws 時存在 API 寫法上的差異,需要特別注意。
這邊以監聽和關閉連線來舉例 :
// client
aWebSocket.onopen = function(event) {};
aWebSocket.onclose = function(event) {};
// server
ws.on('open', function () {});
ws.on('close', function () {});
雖然看起來很類似,但細微處仍有差異。
接著,測試對兩端發送訊息,確認可以正常使用 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 傳輸過來的資料。
在上一篇筆記中,有測試在 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);
};