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

37 0 0

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

`);
    }, 1000);
  }
}).listen(3000);

console.log('Server running at http://localhost:3000/sse');

这个示例会每秒钟向客户端推送当前时间。