Server-Sent Events (SSE) の例、Express.js

id: 171, 2024-10-11

概要:

Server-Sent Events で、Express.js通信する例になります。

一方方向の通信で、サーバーからクライアント送信らしい。
一定時間、配信しないと。通信が停止されるみたいです。
メッセージ配信機能で、使用できるか試した内容です。

[ 公開日: 2024/10/10 ]

構成

Express.js
esbuild
typescript

作成したコード

https://gist.github.com/kuc-arc-f/9a16fb502181d49c14a4ee28b614b9e4

dev-start

bun run build
bun run dev

index.ts


....
app.get("/", (req, res) => {
  res.sendFile(__dirname + "/index.html");
});
// SSEのエンドポイント
app.get("/events", (req, res) => {
  res.setHeader("Content-Type", "text/event-stream");
  res.setHeader("Cache-Control", "no-cache");
  res.setHeader("Connection", "keep-alive");
  // クライアントに最初のメッセージを送信
  res.write("data: Connected\n\n");
  // 1秒ごとにサーバーからメッセージを送信
  const intervalId = setInterval(() => {
    const message = `data: ${new Date().toLocaleTimeString()}\n\n`;
    res.write(message);
  }, 1000);
  // 1000
  // クライアントが接続を閉じた場合、インターバルをクリア
  req.on("close", () => {
    clearInterval(intervalId);
    res.end();
  });
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SSE Example</title>
</head>
<body>
  <h1>Server-Sent Events (SSE)</h1>
  <div id="messages"></div>

  <script>
    const eventSource = new EventSource("/events");

    eventSource.onmessage = function(event) {
      const messagesDiv = document.getElementById("messages");
      const newMessage = document.createElement("div");
      newMessage.textContent = event.data;
      messagesDiv.appendChild(newMessage);
      console.log(event.data);
    };

    eventSource.onerror = function() {
      console.log("An error occurred with the SSE connection.");
    };
  </script>
</body>
</html>

package.json

{
  "name": "bun_33",
  "private": true,
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "nodemon",
    "build": "bun run build:server && bun run build:client",
    "build:test": "",
    "build:prod": "NODE_ENV=production bun run build",
    "build:server": "bun build --target=node --minify src/index.ts --outfile dist/index.js",
    "build:client": "bunx esbuild  --bundle --format=esm --minify  ./src/entry-client.tsx --outdir=public/static --tsconfig=tsconfig.json",
    "clean": "rimraf dist",
    "start": "bun run dist/index.js"
  },
  "dependencies": {
    "axios": "^1.7.5",
    "cookie-parser": "^1.4.6",
    "express": "^4.19.2",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.26.1"
  },
  "devDependencies": {
    "@types/node": "^22.5.4",
    "@types/react": "^18.3.5",
    "@types/react-dom": "^18.3.0",
    "esbuild": "^0.24.0",
    "nodemon": "^3.1.4",
    "rimraf": "^6.0.1",
    "typescript": "^5.5.2"
  }
}