使用 new EventSource 实现前端实时通信

示例：

eventSource单向通信

1. 什么是 EventSource？

EventSource 是浏览器提供的一种实现服务器推送（Server-Sent Events，简称 SSE）功能的 API。它是基于 HTTP 协议的单向通信机制，可以通过服务器将实时数据推送到客户端，而不需要客户端不断发起请求。

与传统的 AJAX 请求（如 XMLHttpRequest 或 fetch）不同，EventSource 会创建一个长连接，允许服务器主动向浏览器推送数据。这使得前端可以高效地接收实时数据，而不必通过轮询来获取更新。

为什么使用 EventSource？

• 实时性强：可以在服务器有更新时即时推送数据，而不需要客户端不断请求。
• 低延迟：相比于轮询，EventSource 更加高效，因为它不会不断地向服务器发起 HTTP 请求。
• 简洁的 API：EventSource 的用法非常简洁，只需要一行代码即可实现连接，并且可以轻松处理服务器推送的数据。

2. EventSource 的基本用法

EventSource 是通过 new EventSource(url) 创建的，参数 url 是服务器端提供的推送数据的接口。服务器会向客户端推送实时数据，并以 text/event-stream 格式传输。

基本语法

const eventSource = new EventSource('your-server-endpoint');

监听服务器发送的事件
EventSource 提供了几个事件来监听服务器端推送的消息：

• message：默认事件，接收到消息时触发。
• open：连接成功时触发。
• error：连接出错时触发。

示例代码
假设我们有一个服务器端接口 /events，该接口会定期向客户端推送消息。

// 创建 EventSource 实例
const eventSource = new EventSource('/events');

// 监听连接成功事件
eventSource.addEventListener('open', function(event) {
    console.log('连接已成功建立');
});

// 监听消息事件
eventSource.addEventListener('message', function(event) {
    console.log('收到消息：', event.data);
});

// 监听连接出错事件
eventSource.addEventListener('error', function(event) {
    if (event.eventPhase == EventSource.CLOSED) {
        console.log('连接已关闭');
    } else {
        console.log('发生错误：', event);
    }
});

代码解析：

• new EventSource(‘/events’)：创建与服务器的连接，/events 是服务器端的推送接口。
• eventSource.addEventListener(‘message’, callback)：监听 message 事件，callback 会在接收到推送消息时执行，event.data 包含服务器发送的消息内容。
• eventSource.addEventListener(‘open’, callback)：监听连接成功事件，当连接成功时会调用此回调函数。
• eventSource.addEventListener(‘error’, callback)：监听错误事件，如果连接失败或被关闭，会触发该事件。

3. 服务器端的实现

在服务器端，我们需要将数据按 text/event-stream 的格式发送给客户端，通常使用一种流式的方式将数据传输给浏览器。以下是一个用 Node.js 和 Express 实现的简单 SSE 服务器示例：

const express = require('express');
const app = express();

app.get('/events', (req, res) => {
    res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader('Cache-Control', 'no-cache');
    res.setHeader('Connection', 'keep-alive');

    let count = 0;
    setInterval(() => {
        count++;
        res.write(`data: 这是第 ${count} 条实时消息\n\n`);
    }, 1000);
});

app.listen(3000, () => {
    console.log('服务器正在监听端口 3000');
});

代码解析：
res.setHeader(‘Content-Type’, ‘text/event-stream’)：告诉浏览器返回的是一个事件流。
setInterval()：每隔 1 秒推送一次消息，模拟服务器实时推送数据给客户端。
启动服务器并访问
启动服务器：node server.js
在浏览器中打开前端页面，监听来自 /events 接口的数据。

4. EventSource 的高级用法

自定义事件
在 SSE 中，客户端可以根据需要使用自定义事件来处理不同类型的数据，而不仅仅是 message 事件。可以使用 event 属性来定义自定义事件。

代码示例：

// 服务器端
res.write('event: customEvent\n');
res.write('data: 这是一个自定义事件\n\n');

// 客户端
eventSource.addEventListener('customEvent', function(event) {
    console.log('收到自定义事件：', event.data);
});

自动重连
EventSource 会在连接断开后自动重连，默认重连时间为 3 秒，可以通过设置 retry 属性来指定自定义的重连时间。
代码示例：

// 服务器端
res.write('retry: 5000\n');  // 重连时间为 5000 毫秒（5秒）

关闭连接
在前端代码中，可以使用 eventSource.close() 来主动关闭连接。

eventSource.close();

5. EventSource 与其他通信技术的比较

与 WebSocket 的对比
EventSource 和 WebSocket 都可以实现服务器向客户端的实时数据推送，但它们有不同的适用场景：

• EventSource：是单向通信，适合用来从服务器向客户端推送数据，比如实时通知、新闻更新等。
• WebSocket：是双向通信，适合需要客户端和服务器之间进行双向交互的场景，如在线聊天、实时协作等。

与轮询的对比
轮询是通过定时向服务器发送请求获取最新的数据，缺点是每次都需要发起 HTTP 请求，带来不必要的开销。而 EventSource 是建立一个持久连接，服务器主动推送数据，避免了频繁的 HTTP 请求。

6. 总结

EventSource 提供了一种简单、有效的方式来实现服务器推送数据到前端。与传统的轮询相比，它能够减少请求开销，提高实时性。它也比 WebSocket 更容易实现和使用，适合单向数据流的应用场景。

优点：

• 实现简单。
• 低延迟，适合实时通知等应用。
• 自动重连功能，保证连接的稳定性。

缺点：

• 只支持单向通信，不能用于需要双向通信的场景（此时可以选择 WebSocket）。
• 浏览器支持较为有限，虽然现代浏览器普遍支持，但在一些老旧浏览器中可能无法使用。

通过使用 EventSource，开发者可以轻松地在 Web 应用中实现实时数据流功能，为用户提供更好的交互体验。