使用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);
});实现效果
当我们修改数据的时候，图表也会实时更新
