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

区别

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);
});

实现效果

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