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
声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
真诚赞赏,手留余香
赞赏