sse 浏览器端技术使用，Server-Sent Events ，EventSource，来建立长连接保持与服务端的通讯

Server-Sent Events (SSE) 是一种允许服务器向客户端推送更新的技术。它使用 HTTP 协议，通过一个持久的 HTTP 连接，服务器可以在任何时间发送新的事件到客户端。SSE 通常用于实时更新，如股票价格、新闻更新等。

以下是一个简单的 SSE 使用示例：

服务器端 (Node.js + Express)

const express = require('express');
const app = express();

app.get('/events', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  // 模拟实时数据更新
  setInterval(() => {
    res.write(`data: ${new Date().toISOString()}\n\n`);
  }, 1000);
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

客户端 (HTML + JavaScript)

<!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 Example</h1>
  <div id="messages"></div>

  <script>
    // 创建一个新的 EventSource 实例
    const eventSource = new EventSource('/events');

    // 监听 message 事件
    eventSource.onmessage = function(event) {
      const message = document.createElement('p');
      message.textContent = `Message from server: ${event.data}`;
      document.getElementById('messages').appendChild(message);
    };

    // 监听 open 事件
    eventSource.onopen = function() {
      console.log('Connection to server opened.');
    };

    // 监听 error 事件
    eventSource.onerror = function(error) {
      console.error('Error:', error);
    };
  </script>
</body>
</html>

解释

服务器端：创建一个 Express 服务器，监听 /events 路由。当客户端连接到这个路由时，服务器会设置响应头以启用 SSE，并通过 setInterval 每秒发送一个新的事件（当前时间）。
客户端：创建一个 EventSource 实例连接到服务器的 /events 路由。通过监听 message 事件，客户端可以接收到服务器发送的更新，并将这些更新显示在页面上。