kuc-arc-f · October 11, 2024 05:41
diff --git a/index.html b/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>
diff --git a/index.ts b/index.ts
 import fs from 'node:fs/promises'
 import express from "express";
 import { renderToString } from 'react-dom/server';

 import Top from './pages/App';
 import About from './pages/about';
 //
 const app = express();

 app.use(express.json());
 app.use(express.urlencoded({ extended: true }));
 app.use(express.static('public'));
 console.log("env= ", process.env.NODE_ENV);
 //
 const errorObj = {ret: "NG", messase: "Error"};
 //MPA
 // 通常のHTMLを配信するルート
 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();
  });
 });
 //start
 const port = 3000;
 app.listen(port, () => {
  console.log(`Listening on port ${port}...`);
 });
  
diff --git a/package.json b/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"
  }
 }
	<!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>
	import fs from 'node:fs/promises'
	import express from "express";
	import { renderToString } from 'react-dom/server';

	import Top from './pages/App';
	import About from './pages/about';
	//
	const app = express();

	app.use(express.json());
	app.use(express.urlencoded({ extended: true }));
	app.use(express.static('public'));
	console.log("env= ", process.env.NODE_ENV);
	//
	const errorObj = {ret: "NG", messase: "Error"};
	//MPA
	// 通常のHTMLを配信するルート
	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();
	});
	});
	//start
	const port = 3000;
	app.listen(port, () => {
	console.log(`Listening on port ${port}...`);
	});
	{
	"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"
	}
	}