EventSource事件流（允许网页与服务器之间建立一个持久的连接，服务器可以通过这个连接向客户端推送更新）

 

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();

关键概念和属性

1. 构造函数

   • new EventSource(url, [options])
   • url: SSE 服务器的 URL。
   • options: 可选参数，通常不需要。

2. 主要事件

   • onmessage: 当服务器发送消息时触发。
   • onopen: 当连接成功打开时触发。
   • onerror: 当连接出现错误或关闭时触发。

3. readyState 属性

   • EventSource.CONNECTING (0): 正在建立连接。
   • EventSource.OPEN (1): 连接已建立，可以接收事件。
   • EventSource.CLOSED (2): 连接已关闭，不会接收更多事件。

4. 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 是一种轻量级的技术，用于从服务器推送实时更新到客户端。它通过简单的接口让你轻松实现实时数据流，特别适合需要频繁更新的应用。