EventSource 是 JavaScript 中用于处理服务器发送事件（Server-Sent Events, SSE）的接口。它允许网页与服务器之间建立一个持久的连接，服务器可以通过这个连接向客户端推送更新。
EventSource 通常用于需要实时更新数据的场景，比如实时通知、股票价格更新等。
基本用法
// 创建一个 EventSource 对象，并连接到指定的 URL
const eventSource = new EventSource('https://your-server.com/sse');
// 监听消息事件，当服务器发送消息时触发
eventSource.onmessage = function(event) {
console.log('New message:', event.data);
};
// 监听连接打开事件
eventSource.onopen = function() {
console.log('Connection to server opened.');
};
// 监听错误事件
eventSource.onerror = function(event) {
console.error('Error occurred:', event);
if (eventSource.readyState === EventSource.CLOSED) {
console.log('Connection was closed.');
}
};
// 关闭连接
// eventSource.close();关键概念和属性
-
构造函数
new EventSource(url, [options])url: SSE 服务器的 URL。options: 可选参数，通常不需要。
-
主要事件
onmessage: 当服务器发送消息时触发。onopen: 当连接成功打开时触发。onerror: 当连接出现错误或关闭时触发。
-
readyState 属性
EventSource.CONNECTING(0): 正在建立连接。EventSource.OPEN(1): 连接已建立，可以接收事件。EventSource.CLOSED(2): 连接已关闭，不会接收更多事件。
-
close() 方法
eventSource.close(): 手动关闭连接。
示例解释
new EventSource(sseAlarmUrl, { reconnectTime: 3000 });这个示例创建了一个 EventSource 实例，连接到 sseAlarmUrl 指定的服务器 URL，选项 { reconnectTime: 3000 } 表示在连接断开后，客户端会在 3000 毫秒（3 秒）后尝试重新连接。
服务器端实现（简单示例）
在服务器端，你需要支持 SSE。例如，使用 Node.js 实现 SSE：
const http = require('http');
http.createServer((req, res) => {
if (req.url === '/sse') {
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('Server running at http://localhost:3000/sse');这个示例会每秒钟向客户端推送当前时间。
总结
EventSource 是一种轻量级的技术，用于从服务器推送实时更新到客户端。它通过简单的接口让你轻松实现实时数据流，特别适合需要频繁更新的应用。