使用SSE实现echarts数据实时更新

news2025/1/17 0:07:52

区别

SSE 和 WebSocket 原理和实现方式的区别

SSE( Server-Sent Events)

SSE 是基于传统的 HTTP 协议实现的，采用了长轮询（long-polling）机制。客户端通过向服务器发送一个 HTTP 请求，服务器保持连接打开并周期性地向客户端发送数据。

SSE 通过 EventSource 对象来实现，在客户端可以通过监听 onmessage 事件来接收服务器端发送的数据。

WebSocket

WebSocket 是基于独立的 TCP 连接实现的，使用自定义的协议。客户端和服务器之间可以建立持久的全双工通信的连接，可以双向发送和接收数据。

WebSocket 协议是基于帧的，可以通过发送不同类型的帧进行通信。

实现方法

前端(vue3)

建立连接

let eventSource: EventSource;
onMounted(() => {
  eventSource = new EventSource("http://localhost:3000/sse");
  eventSource.addEventListener("customEvent", (event) => {
    const data = JSON.parse(event.data);
    title.value = data;
    list.value = data.list;
    echartsInit();
  });

  eventSource.onopen = () => {
    title.value = "连接成功";
  };
});

断开连接

//关闭SSE
const closeSSE = () => {
  eventSource.close();
  title.value = "连接已关闭";
};

后端(nodejs)

router.get("/sse", async (req, res) => {
  let url = req.url;
  res.writeHead(200, {
    "Content-Type": "text/event-stream",
    "Cache-Control": "no-cache",
    Connection: "keep-alive",
  });

  // 每隔 1 秒发送一条消息
  let id = 0;
  const intervalId = setInterval(async () => {
    let list = await userModel.find();
    // console.log(url);
    res.write(`event: customEvent\n`);
    res.write(`id: ${id}\n`);
    res.write(`retry: 30000\n`);
    // const params = url.split("?")[1]; 获取拼接内容
    const data = { id, time: new Date().toISOString(), list };
    res.write(`data: ${JSON.stringify(data)}\n\n`);
    id++;
  }, 1000);
});

实现效果

当我们修改数据的时候，图表也会实时更新