当前位置：首页 > news >正文

关于sse、websocket与流式渲染

news 文章来源：https://blog.csdn.net/weixin_61791370/article/details/143236810 2024/11/7 13:56:19

一、SSE是什么？

网络中的 SSE (Server-Sent Events) 是一种服务器向浏览器单向推送数据的机制，常用于需要实时更新的数据传输，如新闻推送、股票行情、聊天应用等。

SSE 的特点：

单向通信：服务器向客户端推送数据，但客户端无法直接通过 SSE 发消息给服务器（客户端可通过其他方式如 HTTP 请求与服务器通信）。
基于 HTTP/1.1：SSE 使用 HTTP 协议传输，和普通 HTTP 请求兼容，不需要 WebSocket 的复杂握手过程。
自动重连：如果连接中断，SSE 会自动尝试重新连接。
文本传输：SSE 主要用于传输文本数据，传输的数据格式通常为 UTF-8。

SSE 的实现示例

1. 服务器端 (Node.js 示例)：

const http = require('http');http.createServer((req, res) => {if (req.url === '/events') {res.writeHead(200, {'Content-Type': 'text/event-stream','Cache-Control': 'no-cache','Connection': 'keep-alive',});setInterval(() => {res.write(`data: ${new Date().toLocaleTimeString()}\n\n`);}, 1000);}
}).listen(3000, () => console.log('SSE server running on http://localhost:3000'));

2. 客户端 (HTML + JavaScript 示例)：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>SSE Demo</title>
</head>
<body><h1>Server-Sent Events Demo</h1><div id="messages"></div><script>const eventSource = new EventSource('/events');eventSource.onmessage = (event) => {const messages = document.getElementById('messages');messages.innerHTML += `<p>${event.data}</p>`;};eventSource.onerror = () => {console.error('Connection lost, retrying...');};</script>
</body>
</html>

SSE 与 WebSocket 的对比：

特点	SSE	WebSocket
通信方向	单向（服务器 → 客户端）	双向（服务器 ↔ 客户端）
协议	HTTP/1.1	自定义 WebSocket 协议
数据格式	文本（UTF-8）	文本和二进制
适用场景	实时推送但不需要双向通信的数据	实时交互、需要双向通信的场景
连接复杂度	简单，基于 HTTP 请求	复杂，需要握手过程

SSE 的适用场景：

新闻推送：如订阅新闻源的实时更新。
股票市场数据：实时行情推送。
实时通知系统：如 Web 上的通知或警报系统。
在线聊天（简单版）：单向消息传递，如聊天消息广播。

SSE 提供了一种轻量级解决方案，用于在某些应用场景下替代 WebSocket，特别是当仅需单向数据流时。

二、服务端推送的数据格式是什么样的？

在 Server-Sent Events (SSE) 中，服务器推送的数据格式是基于 文本格式 的特殊结构，每条消息由若干字段组成，每个字段通过换行符（\n）分隔。服务器将这些数据连续传输给客户端，以下是常用的 SSE 数据格式结构。

SSE 消息格式：

SSE 消息的格式遵循以下结构：

data: <消息数据>
id: <消息ID>
event: <事件类型>
retry: <自动重连时间>

每条消息之间需要使用 两个换行符（\n\n）分隔。
id 字段用于标记消息的 ID，便于客户端追踪和在重连时获取丢失的消息。
data 是消息的主要内容，支持多行数据。
event 用于标记事件类型（可选），客户端可基于不同事件类型处理消息。
retry 指定客户端断开连接后的重连间隔（以毫秒为单位），可选。

示例消息：

data: Hello, World!
id: 1
event: message
retry: 3000data: {"temperature": 25, "humidity": 60}
id: 2data: 这是第二条消息
id: 3

上述消息发送了三次推送：

第一条为事件类型 message，数据为 “Hello, World!”。
第二条为 JSON 格式的天气数据。
第三条是中文文本。

服务端响应完整示例：

服务器端的响应头必须设置正确的 MIME 类型，以确保客户端能够正确解析 SSE 流。

示例响应头：

HTTP/1.1 200 OK
Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive

示例数据流：

data: Server time: 2024-10-24 14:00:00
id: 101data: New stock price: AAPL 180.55
id: 102event: customEvent
data: Custom event message
id: 103retry: 5000

第一条推送显示服务器的时间。
第二条推送为股票价格更新。
第三条定义了一个自定义事件 customEvent。
retry: 5000 指定客户端在断开连接时应每 5 秒尝试重连。

客户端接收数据的示例：

event.data 是每个数据流的数据，而非完整的
每次服务端发送一条消息时，EventSource 会触发 onmessage 事件，其中包含一条新的数据。

const eventSource = new EventSource('/events');// 默认消息事件处理
eventSource.onmessage = (event) => {console.log('Message:', event.data);
};// 处理自定义事件
eventSource.addEventListener('customEvent', (event) => {console.log('Custom Event:', event.data);
});// 错误处理
eventSource.onerror = () => {console.error('Connection error, trying to reconnect...');
};

总结：

在 SSE 中，服务端的数据格式必须是 纯文本流，并且按照规范使用 data、id、event 等字段。每条消息以两个换行符（\n\n）分隔，确保客户端能正确解析与展示。同时，SSE 的格式简单而有效，适合需要实时数据推送但不需要复杂双向通信的场景。

三、前端如何处理一段一段的数据？

在 SSE（Server-Sent Events） 中，服务端会将数据以一段段的方式持续推送给客户端。前端需要通过事件监听器处理这些消息，将数据进行逐条接收和展示。以下是如何在前端处理 SSE 分段数据 的详细步骤。

前端处理 SSE 分段数据的步骤

使用 EventSource 创建 SSE 连接。
监听不同类型的事件（默认 message 事件或自定义事件）。
累积或逐步更新数据（如拼接消息、实时更新 UI）。
错误处理：保证连接断开时能够重连。

基本代码示例

// 1. 创建 SSE 连接
const eventSource = new EventSource('/events');// 2. 默认消息处理：逐条接收并展示
eventSource.onmessage = (event) => {console.log('Received message:', event.data);appendDataToUI(event.data);  // 自定义逻辑将数据展示到页面
};// 3. 监听自定义事件
eventSource.addEventListener('customEvent', (event) => {console.log('Custom Event:', event.data);
});// 4. 错误处理：如断开连接时自动尝试重连
eventSource.onerror = (error) => {console.error('Connection lost, retrying...', error);
};// 5. 自定义函数：将数据添加到页面
function appendDataToUI(data) {const messagesDiv = document.getElementById('messages');const newMessage = document.createElement('p');newMessage.textContent = data;messagesDiv.appendChild(newMessage);
}

展示逐条消息

HTML 页面结构：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>SSE Example</title>
</head>
<body><h1>SSE Data Stream</h1><div id="messages"></div><script src="sse-handler.js"></script> <!-- 引入前端逻辑 -->
</body>
</html>

如何处理分段数据

方案 1：逐条处理和展示

每当服务器发送一条消息时，客户端就将它添加到页面中。

eventSource.onmessage = (event) => {appendDataToUI(event.data);  // 实时将数据展示
};

方案 2：拼接消息（累积数据流）

如果服务端的消息是分段发送的，需要客户端在完整接收后进行拼接。例如，假设服务端每次发送数据的一部分：

let accumulatedData = '';  // 用于拼接的全局变量eventSource.onmessage = (event) => {accumulatedData += event.data;  // 累积数据if (event.data.endsWith('[END]')) {  // 判断是否为完整数据appendDataToUI(accumulatedData);accumulatedData = '';  // 重置累积数据}
};

处理 JSON 数据

如果服务端推送的是 JSON 数据，需要在前端解析后展示：

eventSource.onmessage = (event) => {try {const jsonData = JSON.parse(event.data);console.log('JSON Data:', jsonData);appendDataToUI(`User: ${jsonData.user}, Message: ${jsonData.message}`);} catch (error) {console.error('Invalid JSON:', event.data);}
};

处理自定义事件的场景

服务端发送不同类型的事件时，可以在前端通过 addEventListener 针对不同事件分别处理：

eventSource.addEventListener('news', (event) => {console.log('News:', event.data);appendDataToUI(`News: ${event.data}`);
});eventSource.addEventListener('alert', (event) => {console.log('Alert:', event.data);alert(`Alert: ${event.data}`);
});

总结

在 SSE 前端处理 中，核心是通过 EventSource 持续接收服务器推送的消息，并根据需要逐条或累积处理数据。
可以监听默认事件（message）和自定义事件。
拼接数据 时要确保能正确判断数据结束标志，避免数据错乱。
通过 JSON 解析 支持复杂数据格式。

SSE 适合实时消息展示和数据推送的场景，例如聊天应用、新闻推送等。这个方案相比 WebSocket 更轻量，适合单向数据流的需求。

四、如何实现实时渲染

要在前端实现实时渲染 SSE 推送的数据，可以将数据一边接收一边更新到页面中。具体实现方式依赖于 HTML 和 JavaScript，通过 DOM 操作 动态将数据插入到页面，并确保界面流畅地显示最新内容。

SSE 实时渲染步骤

接收服务端的推送数据：使用 EventSource 监听不同事件。
更新 UI：接收数据后，立即更新页面元素（如消息列表）。
优化性能：对于频繁更新的情况，可以使用节流或虚拟列表技术，保证性能不受影响。

基础实现：实时渲染数据

HTML 结构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Real-time SSE Rendering</title><style>#messages {max-height: 300px;overflow-y: auto;border: 1px solid #ccc;padding: 10px;}p {margin: 5px 0;}</style>
</head>
<body><h1>Real-time Messages</h1><div id="messages"></div><script src="script.js"></script> <!-- 引入 JavaScript -->
</body>
</html>

JavaScript 实现：实时接收和渲染

// 创建 SSE 连接
const eventSource = new EventSource('/events');// 获取 DOM 元素
const messagesDiv = document.getElementById('messages');// 处理服务端默认推送的 message 事件
eventSource.onmessage = (event) => {renderMessage(event.data);
};// 将消息渲染到页面
function renderMessage(message) {const newMessage = document.createElement('p');newMessage.textContent = message;messagesDiv.appendChild(newMessage);// 保持滚动条在底部（自动滚动）messagesDiv.scrollTop = messagesDiv.scrollHeight;
}// 错误处理：连接丢失时显示提示
eventSource.onerror = () => {renderMessage('Connection lost. Reconnecting...');
};

效果：

每当服务器推送新消息时，onmessage 会捕获并调用 renderMessage() 方法，将消息插入页面。
自动滚动到页面底部：当消息增加超出容器高度时，scrollTop 确保用户总是看到最新消息。

性能优化：节流处理

如果数据推送频率较高，直接更新 DOM 可能导致性能问题。可以使用节流（throttling），限制每秒的渲染次数。

let lastRenderTime = 0;function throttledRenderMessage(message) {const now = Date.now();if (now - lastRenderTime > 100) { // 限制每100ms渲染一次renderMessage(message);lastRenderTime = now;}
}eventSource.onmessage = (event) => {throttledRenderMessage(event.data);
};

优化方式：虚拟列表（Virtual List）

当消息数据量非常大时，可以使用虚拟列表技术，只渲染可见区域内的数据。可以借助第三方库（如 react-window、virtual-scroller）或自己实现。

总结

通过上述代码，你可以实现基于 SSE 的实时数据渲染：

使用 EventSource 持续接收服务端推送的数据。
动态更新 DOM，让页面实时显示最新内容。
使用 自动滚动 让用户始终看到最新消息。
针对高频数据，可以使用节流或 虚拟列表 优化性能。

这种方式非常适合聊天应用、实时新闻推送或日志监控系统的前端实现。

五、event.data

`onmessage` 是如何工作的？

长连接：EventSource 使用 HTTP 长连接，服务器在连接建立后不断推送数据给客户端，而无需客户端频繁发起新的请求。
实时监听：onmessage 事件会在服务器推送 每一条新消息 时被触发，将当前这条消息的数据传递给客户端。
增量推送：每次推送的数据独立存在，并不会覆盖之前的数据，而是逐条接收。

工作机制示例

服务端推送（SSE）数据格式：

data: {"temperature": 25, "unit": "C"}
id: 1data: {"temperature": 26, "unit": "C"}
id: 2data: {"message": "System OK"}
id: 3

前端监听新数据：

// 建立 SSE 连接
const eventSource = new EventSource('/events');// 每当服务器推送一条新数据时，onmessage 就会触发
eventSource.onmessage = (event) => {console.log('Received new data:', event.data);  // 打印当前推送的数据processData(event.data);  // 处理新数据
};// 自定义数据处理逻辑
function processData(data) {const parsedData = JSON.parse(data);console.log('Parsed Data:', parsedData);// 在页面中展示数据或加入队列等操作
}

逐条处理新数据

每当服务器推送一条新数据时：

onmessage 会自动触发，并返回当前这条推送的数据。
这是一种流式处理，即：每次推送的新数据都是单独处理的，不会覆盖或与之前的数据混合。

`EventSource` 数据流的特点

数据流：EventSource 是实时监听数据流变化，服务器每次发送新数据时，客户端会立即捕获。
自动重连：如果连接中断（如网络波动），EventSource 会尝试自动重连，并从最后的消息 ID 开始接收。
顺序保证：EventSource 保证了数据的顺序性，确保客户端按服务端的发送顺序接收数据。

如何判断每条数据是否完整？

在某些情况下，如果数据分片发送（比如需要多个部分组合成一条完整消息），可以使用结束标识（如 [END]）来判断：

示例：拼接分片数据

let accumulatedData = '';eventSource.onmessage = (event) => {accumulatedData += event.data;  // 累积数据片段if (event.data.endsWith('[END]')) {console.log('Complete Data:', accumulatedData);processData(accumulatedData);accumulatedData = '';  // 重置累积数据}
};

总结

onmessage 会在每次服务器推送一条新数据时被触发，event.data 包含这条消息的内容。
数据流监听是实时的，客户端可以逐条接收并处理新数据。
数据不会被覆盖，而是按服务端发送的顺序逐条接收。
可以根据需要对高频数据进行拼接、节流或批量处理，保证页面的性能和用户体验。

EventSource 是一种非常适合实时数据推送（如聊天、日志、监控等）的轻量级方案。