EventSource 接口

EventSource 是一个用于接收服务器发送的事件流的接口，通常用于实现服务器端推送（Server-Sent Events，SSE）。通过 EventSource，客户端可以与服务器建立持久的连接，服务器可以随时向客户端发送事件数据，而客户端则可以通过监听这些事件来实时获取数据更新。

以下是 EventSource 的基本用法：

1.创建 EventSource 实例：

const eventSource = new EventSource(url);

其中 url 是服务器端提供事件流的 URL。

2.监听事件：

eventSource.onmessage = function(event) {
    console.log('Received message:', event.data);
};


eventSource.onerror = function(event) {
    console.error('Error occurred:', event);
};

通过 onmessage 事件处理程序可以监听服务器发送的消息事件，而 onerror 事件处理程序则用于处理错误事件。

3.关闭连接：

eventSource.close();

通过调用 close() 方法可以关闭 EventSource 实例，断开与服务器的连接。

下面是一个简单的示例，演示了如何使用 EventSource 从服务器端接收事件流：

const eventSource = new EventSource('server-events.php');


eventSource.onmessage = function(event) {
    console.log('Received message:', event.data);
};


eventSource.onerror = function(event) {
    console.error('Error occurred:', event);
};


// 在需要的时候关闭连接
// eventSource.close();

在这个示例中，客户端通过 EventSource 建立了与服务器的连接，并监听来自服务器的事件。当服务器发送事件时，客户端会收到消息，并通过 onmessage 处理程序处理事件数据。如果发生错误，客户端可以通过 onerror 处理程序进行处理。最后，如果不再需要连接，可以通过调用 close() 方法来关闭连接。

使用 EventSource 和 WebSocket 在前端都可以实现实时数据传输，但它们之间有一些关键区别：

1、 EventSource：

•单向通信：EventSource 是一种单向通信协议，只能从服务器向客户端发送数据。•基于HTTP：EventSource 基于 HTTP 协议，使用长轮询（long-polling）机制来实现服务器向客户端的推送。•自动重连：EventSource 在连接中断时会自动尝试重新连接服务器，不需要手动处理重连逻辑。•自动解析数据：EventSource 可以自动解析服务器发送的数据，数据格式为纯文本或 JSON 格式。

2、 WebSocket：

•双向通信：WebSocket 是一种双向通信协议，客户端和服务器之间可以进行双向实时通信。•持久连接：WebSocket 使用持久连接，可以在客户端和服务器之间保持长期连接，实现实时双向通信。•二进制数据支持：WebSocket 支持传输二进制数据，不仅限于文本数据。•自定义协议：WebSocket 可以使用自定义协议，而不仅仅局限于 HTTP 协议。

根据需求，你可以选择使用 EventSource 或 WebSocket 来实现实时数据传输。如果只需要从服务器向客户端推送数据，并且不需要双向通信，可以使用 EventSource。如果需要双向实时通信，传输二进制数据，或者使用自定义协议，那么 WebSocket 是更好的选择。