wordpress培训类网站模板青海网站建设价格低
引言
1.1 SSE 简介
服务器发送事件（Server-Sent Events，SSE）是一种允许服务器向浏览器推送实时更新的技术。与 WebSocket 不同，SSE 是单向的，即服务器向客户端推送数据。SSE 基于 HTTP 协议，实现简单且易于使用。
1.2 使用场景
- 实时通知：如股票行情、新闻更新等。
- 实时数据流：如日志监控、实时数据分析等。
- 进度更新：如文件上传进度、任务进度等。
SSE 架构设计
2.1 核心组件
- 服务器：负责生成和发送事件流。
- 客户端：通过
EventSource对象接收事件流。
2.2 数据格式
SSE 使用纯文本格式，每个事件包含一个或多个字段，常见的字段包括 data、event、id 和 retry。
2.3 连接管理
- 持久连接：服务器保持与客户端的连接，持续发送事件。
- 自动重连：客户端在连接断开后自动重连。
实现方法
3.1 服务器端实现
3.1.1 设置响应头
服务器需要设置 Content-Type 为 text/event-stream，并保持连接打开。
Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive
3.1.2 发送事件
服务器通过发送格式化的文本流来推送事件。
data: Hello, SSE!data: This is a second event.
event: customEvent
id: 123
retry: 1000
示例代码（Node.js + Express）：
const express = require('express');
const app = express();
const PORT = 3000;app.get('/sse', (req, res) => {res.setHeader('Content-Type', 'text/event-stream');res.setHeader('Cache-Control', 'no-cache');res.setHeader('Connection', 'keep-alive');// 发送初始事件res.write('data: Hello, SSE!\n\n');// 定期发送事件const intervalId = setInterval(() => {const event = {data: 'This is a second event',event: 'customEvent',id: '123',retry: 1000};res.write(`data: ${event.data}\n`);res.write(`event: ${event.event}\n`);res.write(`id: ${event.id}\n`);res.write(`retry: ${event.retry}\n\n`);}, 2000);// 处理客户端关闭连接req.on('close', () => {clearInterval(intervalId);res.end();});
});app.listen(PORT, () => {console.log(`Server is running on http://localhost:${PORT}`);
});
3.2 客户端实现
3.2.1 创建 EventSource 对象
客户端使用 EventSource 对象连接到服务器。
const eventSource = new EventSource('http://example.com/sse');
3.2.2 处理事件
客户端可以监听不同的事件类型。
eventSource.onmessage = function(event) {console.log('New message:', event.data);
};eventSource.addEventListener('customEvent', function(event) {console.log('Custom event:', event.data);
});
3.2.3 错误处理
客户端可以监听错误事件。
eventSource.onerror = function(err) {console.error('EventSource failed:', err);
};
示例代码（HTML + JavaScript）：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>SSE Example</title>
</head>
<body><h1>Server-Sent Events Example</h1><div id="messages"></div><script>const eventSource = new EventSource('http://localhost:3000/sse');eventSource.onmessage = function(event) {const messagesDiv = document.getElementById('messages');const newMessage = document.createElement('div');newMessage.textContent = 'New message: ' + event.data;messagesDiv.appendChild(newMessage);};eventSource.addEventListener('customEvent', function(event) {const messagesDiv = document.getElementById('messages');const newMessage = document.createElement('div');newMessage.textContent = 'Custom event: ' + event.data;messagesDiv.appendChild(newMessage);});eventSource.onerror = function(err) {console.error('EventSource failed:', err);};</script>
</body>
</html>
实际应用案例
4.1 实时通知系统
- 场景：股票行情、新闻更新等。
- 实现：服务器定期推送最新的股票价格或新闻内容到客户端。
示例代码（Node.js + Express）：
const express = require('express');
const app = express();
const PORT = 3000;app.get('/sse/stock', (req, res) => {res.setHeader('Content-Type', 'text/event-stream');res.setHeader('Cache-Control', 'no-cache');res.setHeader('Connection', 'keep-alive');// 模拟股票行情更新const intervalId = setInterval(() => {const stockData = {symbol: 'AAPL',price: (Math.random() * 100).toFixed(2)};res.write(`data: ${JSON.stringify(stockData)}\n\n`);}, 5000);req.on('close', () => {clearInterval(intervalId);res.end();});
});app.listen(PORT, () => {console.log(`Server is running on http://localhost:${PORT}`);
});
客户端代码（HTML + JavaScript）：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Stock Price SSE</title>
</head>
<body><h1>Stock Price Updates</h1><div id="stock"></div><script>const eventSource = new EventSource('http://localhost:3000/sse/stock');eventSource.onmessage = function(event) {const stockDiv = document.getElementById('stock');const stockData = JSON.parse(event.data);stockDiv.textContent = `Symbol: ${stockData.symbol}, Price: $${stockData.price}`;};eventSource.onerror = function(err) {console.error('EventSource failed:', err);};</script>
</body>
</html>
4.2 实时数据监控
- 场景：日志监控、实时数据分析等。
- 实现：服务器实时推送日志数据或分析结果到客户端。
示例代码（Node.js + Express）：
const express = require('express');
const app = express();
const PORT = 3000;app.get('/sse/logs', (req, res) => {res.setHeader('Content-Type', 'text/event-stream');res.setHeader('Cache-Control', 'no-cache');res.setHeader('Connection', 'keep-alive');// 模拟日志数据const intervalId = setInterval(() => {const logData = {timestamp: new Date().toISOString(),message: `Log entry ${Math.floor(Math.random() * 100)}`};res.write(`data: ${JSON.stringify(logData)}\n\n`);}, 3000);req.on('close', () => {clearInterval(intervalId);res.end();});
});app.listen(PORT, () => {console.log(`Server is running on http://localhost:${PORT}`);
});
客户端代码（HTML + JavaScript）：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Log Monitoring SSE</title>
</head>
<body><h1>Log Monitoring</h1><div id="logs"></div><script>const eventSource = new EventSource('http://localhost:3000/sse/logs');eventSource.onmessage = function(event) {const logsDiv = document.getElementById('logs');const logData = JSON.parse(event.data);const newLog = document.createElement('div');newLog.textContent = `Timestamp: ${logData.timestamp}, Message: ${logData.message}`;logsDiv.appendChild(newLog);};eventSource.onerror = function(err) {console.error('EventSource failed:', err);};</script>
</body>
</html>
4.3 进度更新
- 场景：文件上传进度、任务进度等。
- 实现：服务器在文件上传或任务执行过程中，定期推送进度信息到客户端。
示例代码（Node.js + Express）：
const express = require('express');
const app = express();
const PORT = 3000;app.get('/sse/progress', (req, res) => {res.setHeader('Content-Type', 'text/event-stream');res.setHeader('Cache-Control', 'no-cache');res.setHeader('Connection', 'keep-alive');let progress = 0;const intervalId = setInterval(() => {progress += 10;if (progress > 100) {clearInterval(intervalId);res.write('data: { "progress": 100, "status": "completed" }\n\n');res.end();} else {res.write(`data: { "progress": ${progress}, "status": "in progress" }\n\n`);}}, 1000);req.on('close', () => {clearInterval(intervalId);res.end();});
});app.listen(PORT, () => {console.log(`Server is running on http://localhost:${PORT}`);
});
客户端代码（HTML + JavaScript）：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Progress Update SSE</title>
</head>
<body><h1>Progress Update</h1><div id="progress"></div><script>const eventSource = new EventSource('http://localhost:3000/sse/progress');eventSource.onmessage = function(event) {const progressDiv = document.getElementById('progress');const progressData = JSON.parse(event.data);progressDiv.textContent = `Progress: ${progressData.progress}%, Status: ${progressData.status}`;};eventSource.onerror = function(err) {console.error('EventSource failed:', err);};</script>
</body>
</html>
优缺点
5.1 优点
- 简单易用：基于 HTTP 协议，实现简单。
- 单向通信：服务器向客户端单向推送数据，适合实时通知场景。
- 浏览器支持：现代浏览器普遍支持
EventSource。
5.2 缺点
- 单向通信：不支持客户端向服务器发送数据。
- 跨域限制：需要处理跨域请求。
- 浏览器兼容性：部分旧版浏览器不支持
EventSource。
性能优化与最佳实践
6.1 性能优化
6.1.1 压缩传输
使用 Gzip 压缩数据，减少传输量。
server {gzip on;gzip_types text/event-stream;
}
6.1.2 连接管理
合理管理连接，避免频繁重连。
const eventSource = new EventSource('http://example.com/sse');eventSource.onerror = function(err) {console.error('EventSource failed:', err);setTimeout(() => {eventSource.close();const newEventSource = new EventSource('http://example.com/sse');// 重新绑定事件处理程序}, 5000);
};
6.1.3 事件格式
优化事件格式，减少不必要的数据传输。
data: {"type":"stock","symbol":"AAPL","price":150.75}
6.2 最佳实践
6.2.1 错误处理
实现完善的错误处理机制，确保连接的稳定性。
eventSource.onerror = function(err) {console.error('EventSource failed:', err);eventSource.close();setTimeout(() => {const newEventSource = new EventSource('http://example.com/sse');// 重新绑定事件处理程序}, 5000);
};
6.2.2 跨域支持
配置 CORS（跨域资源共享）以支持跨域请求。
const express = require('express');
const cors = require('cors');
const app = express();
const PORT = 3000;app.use(cors());app.get('/sse', (req, res) => {res.setHeader('Content-Type', 'text/event-stream');res.setHeader('Cache-Control', 'no-cache');res.setHeader('Connection', 'keep-alive');res.write('data: Hello, SSE!\n\n');const intervalId = setInterval(() => {const event = {data: 'This is a second event',event: 'customEvent',id: '123',retry: 1000};res.write(`data: ${event.data}\n`);res.write(`event: ${event.event}\n`);res.write(`id: ${event.id}\n`);res.write(`retry: ${event.retry}\n\n`);}, 2000);req.on('close', () => {clearInterval(intervalId);res.end();});
});app.listen(PORT, () => {console.log(`Server is running on http://localhost:${PORT}`);
});
6.2.3 事件命名
使用有意义的事件名称，便于客户端处理。
event: stockUpdate
data: {"symbol":"AAPL","price":150.75}
总结
服务器发送事件（SSE）是一种简单且有效的技术，适用于需要从服务器向客户端推送实时更新的场景。通过本文的介绍，读者可以了解 SSE 的工作原理、使用场景、实现方法以及实际应用案例，从而更好地利用 SSE 提升应用的实时性和用户体验。