EventSource，也被称为服务器发送事件（Server-Sent Events，SSE），是一种HTML5技术，用于创建从服务器到浏览器的单向实时通信渠道。与WebSocket等双向通信技术不同，EventSource主要用于服务器向客户端推送更新，而不需要客户端明确请求。这种方式特别适合用于实时更新如股票报价、新闻提要、即时消息、实时日志监控等场景。

基本原理

EventSource API定义了一个JavaScript接口，允许网页订阅来自服务器的更新。服务器以文本格式发送这些更新，通常是以UTF-8编码的事件流。每个事件由一个或者多个事件消息组成，每个消息都可能包含数据、事件类型和可选的ID字段。

如何使用

在客户端（通常是浏览器中的JavaScript）使用EventSource非常直接：

if (typeof(EventSource)!=="undefined") {
  var source = new EventSource("your_server_side_script_url");
  
  source.onmessage = function(event) {
    // 当接收到服务器推送的消息时，此函数被触发
    document.getElementById("result").innerHTML += event.data + "<br />";
  };

  source.onerror = function(event) {
    // 当连接错误时触发
    console.error('Error occurred:', event);
  };
} else {
  // 浏览器不支持EventSource
  document.getElementById("result").innerHTML = "Your browser doesn't support server-sent events.";
}

服务器端实现

服务器端需要设置响应的内容类型为"text/event-stream"，然后按需推送事件。例如，在一个简单的HTTP服务器上，你可以这样响应：

Content-Type: text/event-stream
Cache-Control: no-cache

data: This is a message from the server\n\n

特性

• 简单易用：相比WebSockets，EventSource的实现更为简单，对于只需要服务器向客户端推送更新的场景尤为合适。
• 兼容性：现代浏览器普遍支持EventSource，但旧版浏览器可能需要polyfill或其他 fallback 方案。
• 轻量级：由于是单向通信，协议设计较为简单，资源消耗较少。
• 自动重新连接：当连接因网络问题中断时，EventSource会自动尝试重新建立连接，这对于保持服务的连续性非常有用。

注意事项

• EventSource不支持跨域请求除非服务器设置了相应的CORS头。
• 它只支持文本数据，如果需要传输二进制数据，需要考虑其他技术如WebSocket。
• 没有内置的报错重试逻辑控制，开发者可能需要自行处理更复杂的错误恢复策略。

参考：

https://www.ruanyifeng.com/blog/2017/05/server-sent_events.html

https://help.aliyun.com/zh/dashscope/developer-reference/api-details#0de91ccdc4fqu



真诚赞赏，手留余香

微信支付