Server-Sent Events (SSE) 是一种允许服务器向客户端推送实时更新的技术。

1. 创建 SSE 连接
export default {data() {return {eventSource: null,};},onLoad() {this.initSSE();},methods: {initSSE() {// 创建 SSE 连接this.eventSource = new EventSource('https://api/xxxxx');// 监听 message 事件this.eventSource.onmessage = (event) => {console.log('SSE Message:', event.data);// 在这里处理接收到的数据，比如更新页面状态};// 监听 open 事件（可选）this.eventSource.onopen = (event) => {console.log('SSE Connection Opened:', event);};// 监听 error 事件（可选）this.eventSource.onerror = (event) => {console.error('SSE Error:', event);if (this.eventSource.readyState === EventSource.CLOSED) {console.log('SSE Connection Closed.');// 在这里处理连接关闭的情况，比如尝试重新连接}};},beforeDestroy() {// 在页面销毁前关闭 SSE 连接if (this.eventSource) {this.eventSource.close();}},},
};2. 配置服务器
确保你的服务器端正确配置了 SSE。以下是一个简单的 Node.js 示例const http = require('http');const server = http.createServer((req, res) => {if (req.url === '/sse-endpoint' && req.method === 'GET') {// 设置响应头res.writeHead(200, {'Content-Type': 'text/event-stream','Cache-Control': 'no-cache',Connection: 'keep-alive',});// 发送数据const sendData = () => {res.write(`data: ${JSON.stringify({ message: 'Hello, SSE!' })}\n\n`);// 每5秒发送一次数据setTimeout(sendData, 5000);};sendData();// 监听客户端断开连接req.on('close', () => {res.end();});} else {res.writeHead(404);res.end();}
});server.listen(3000, () => {console.log('Server is listening on port 3000');
});

3. 注意事项

• 跨域问题：如果你的客户端和服务器不在同一个域下，确保服务器支持 CORS（跨域资源共享）。
• 网络状态：在移动设备上，网络状态可能不稳定，建议处理重连逻辑。
• 数据格式：SSE 传输的数据通常是文本格式，你可以在服务器端将其序列化为 JSON 字符串，在客户端再解析回来。