ws 在使用上和 socket.io 其實頗為類似,因此預計實作上會分兩個階段,第一階段就是草稿為主,不考慮樣式的部分,僅就功能面看能不能實做出來。第二階段才會尋找合適的設計導入,不過這大概又是另一個難題了。
建立 client 和 server 兩個資料夾用於存放兩個端點。
同時兩端都安裝 ws 這個 plugin。
yarn add ws
server-side 使用 require 導入 ws 後,建立 server 端口。
on()
這個語法同樣是用來監聽。
// server/index.js
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 3000 });
wss.on('connection', function connection(ws) {
console.log('one client is connected');
});
client-side 的 HTML 使用 live-server 運行後,同樣使用 node index.js
去啟動 server 端。刷新 HTML 頁面,即可看到 terminal 印出 server 的 console.log()
內容。
<!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>
const ws = new WebSocket('ws://127.0.0.1:3000');
</script>
</body>
</html>
切到 client 底下的 index.js 連結 server-side 建立的 3000 端口
const WebSocket = require('ws');
const ws = new WebSocket('ws://127.0.0.1:3000');
ws.on('open', function () {
console.log('client is connected to server');
});