EventSource：实时通信新宠儿！

EventSource：实时通信新宠儿！

引用

CSDN

等

11

来源

1.

https://blog.csdn.net/qq_44333271/article/details/136674544

2.

https://blog.csdn.net/gitblog_09550/article/details/142224336

3.

https://m.blog.csdn.net/weixin_63681863/article/details/139128229

4.

https://blog.csdn.net/qq_17335549/article/details/137872143

5.

https://cloud.baidu.com/article/3328541

6.

https://blog.csdn.net/kandan_cc/article/details/136375724

7.

https://developer.mozilla.org/zh-CN/docs/Web/API/Server-sent_events/Using_server-sent_events

8.

https://rxdb.info/articles/websockets-sse-polling-webrtc-webtransport.html

9.

https://www.nxrte.com/jishu/im/53771.html

10.

https://softwaremill.com/sse-vs-websockets-comparing-real-time-communication-protocols/

11.

https://javascript.net.cn/articles/1089

EventSource是HTML5提供的一项重要API，用于实现服务器向客户端推送实时更新。相比传统的轮询方式，EventSource提供了更高效、更简洁的解决方案。本文将深入介绍EventSource的工作原理、使用方法及其在实际项目中的应用场景。

EventSource，也称为服务器发送事件（Server-Sent Events，简称SSE），是HTML5规范中定义的一种技术，允许服务器向客户端推送实时更新。与传统的轮询方式不同，EventSource实现了真正的服务器推送，数据仅从服务器流向客户端，而无需客户端主动请求。

1. 单向通信：数据只能从服务器推送到客户端，不支持客户端向服务器发送数据。
2. 自动重连：当连接断开时，浏览器会自动尝试重新建立连接。
3. 轻量级：基于HTTP协议，相比WebSocket更简单，开销更小。
4. 文本数据：传输的数据格式为UTF-8编码的文本。

客户端使用

在客户端，使用EventSource非常简单。首先需要创建一个EventSource实例，传入服务器端的事件流URL：

const eventSource = new EventSource('/sse-endpoint');

然后，可以通过监听事件来接收服务器推送的消息：

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

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

如果需要关闭连接，可以调用close方法：

eventSource.close();

服务端实现

在服务端，需要设置响应的MIME类型为text/event-stream，并保持连接的持续打开状态。以下是一个简单的Node.js示例：

const http = require('http');

http.createServer((req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

  setInterval(() => {
    const message = `data: Server time: ${new Date().toLocaleTimeString()}\n\n`;
    res.write(message);
  }, 3000);
}).listen(3000, () => {
  console.log('Server running on port 3000');
});

虽然EventSource和WebSocket都能实现服务器推送，但它们有明显的区别：

• 双向通信：WebSocket支持双向通信，而EventSource只支持单向通信。
• 复杂度：EventSource的使用更简单，不需要复杂的握手过程。
• 性能：对于只需要服务器到客户端的通信场景，EventSource更轻量级，性能更好。
• 兼容性：EventSource在现代浏览器中都有很好的支持，而WebSocket的兼容性稍差。

EventSource在现代浏览器中都有很好的支持，但在一些旧版浏览器中可能需要使用polyfill库。此外，EventSource也有一些局限性：

1. 单向通信：如果需要双向通信，EventSource无法满足需求。
2. 连接数限制：在非HTTP/2的情况下，浏览器对每个域名的SSE连接数有限制（通常是6个）。
3. 数据格式：只能传输UTF-8编码的文本数据，不支持二进制数据。

EventSource非常适合以下场景：

1. 实时更新：如股票市场数据、新闻更新、社交媒体动态等。
2. 聊天室：服务器向所有客户端广播新消息。
3. 状态监控：如系统状态监控、设备状态更新等。

通过EventSource，开发者可以轻松实现服务器到客户端的实时数据推送，提升Web应用的交互体验。虽然它不如WebSocket功能强大，但在许多只需要单向通信的场景中，EventSource是更简单、更高效的选择。