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