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

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 瀏覽。