JavaScript EventSource 服务器发送事件 Server-Sent Events(SSE)

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

声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
随机推荐
JavaScript Global 对象
WordPress 自定义文章类型
JavaScript BOM 浏览器对象模型
HTML 对话框元素 dialog
Page Visibility API
CSRF 双重 Cookie 验证
Node.js readline 模块
Git push 错误:Updates were rejected because the remote contains work that you do not have locally