使用 Node 實作「即時訪客人數計算器」

前言

本文實作一個簡易的即時訪客人數計算器,不會使用到資料庫。

後端

初始化專案。

1
npm init

安裝 ws 依賴套件。

1
npm install ws

新增 main.js 檔:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
const { WebSocketServer } = require('ws');

// 建立一個 WebSocket 服務
const wss = new WebSocketServer({
port: 8080,
});

// 建立一個 Map 物件來儲存來源網址的線上人數
const origins = new Map();

wss.on('connection', (ws, req) => {
// 取得來源網址
const { origin } = req.headers;

// 新增來源網址,或為來源網址的線上人數加一
origins.set(origin, origins.get(origin) + 1 || 1);

// 定時器
const timer = setInterval(() => {
// 將線上人數資訊傳送給客戶端
ws.send(JSON.stringify({
count: origins.get(origin),
}));
}, 1000);

ws.on('message', () => {
// do nothing
});

// 斷線
ws.on('close', () => {
// 清除定時器
clearInterval(timer);
// 為來源網址的線上人數減一,或刪除來源網址
origins.get(origin) > 1
? origins.set(origin, origins.get(origin) - 1)
: origins.delete(origin);
});
});

前端

新增 index.html 檔:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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>
<div id="counter"></div>
<script>
const ws = new WebSocket('ws://localhost:8080');
ws.onmessage = (e) => {
const { count } = JSON.parse(e.data);
document.getElementById("counter").innerText = `Visitor Count: ${count}`;
};
</script>
</body>
</html>

使用 Live Server 預覽。

1
live-server

瀏覽網頁

前往:http://127.0.0.1:8080