Node+SSE 实现大屏可视化数据实时更新

客户端

1.前期准备

npm install eventsource echarts

 const source = new EventSource('自己的路由sse');
// 连接成功
  source.onmessage = (event) => {
 // 这里面处理自己的业务
    const data = JSON.parse(event.data);
      //data 为服务端 发送的数据

  };

  // 处理连接错误
  source.onerror = (event) => {
    console.log('Connection error:', event);
  };})

服务端 

/**
 * 处理服务器发送事件（Server-Sent Events）的路由。
 * 当客户端请求此路由时，服务器将持续向客户端发送数据。
 * 
 * @param {object} req - 请求对象，包含客户端发起的请求信息。
 * @param {object} res - 响应对象，用于向客户端发送响应。
 */
router.get('/sse', async(req, res) => {
  // 设置响应头，以支持服务器发送事件，禁用缓存并保持连接 alive。
  res.set({
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

  // 立即发送响应头，避免延迟。
  res.flushHeaders();
  // 异步查询用户模型的所有数据。
  //  根据数据库获取数据
  // 每秒向客户端发送一次数据。
  setInterval(() => {
//再此处理你的业务
    // 将查询结果转换为 JSON 字符串并发送给客户端。
    res.write(`data: ${JSON.stringify(此为根据业务获取的数据)}\n\n`);
  }, 1000);
});