HTML5 服务器发送事件(Server-Sent Events)
HTML5 服务器发送事件
简介
HTML5 服务器发送事件(Server-Sent Events)是一种基于事件流的服务器到客户端的通信机制,允许服务器推送实时数据到Web页面。它是HTML5新增的API之一,相比于传统的轮询机制和长轮询机制,它具有更低的延迟、更高的带宽利用率和更高的效率。
浏览器支持
目前主流浏览器都支持HTML5服务器发送事件,包括Google Chrome、Mozilla Firefox、Safari、Opera和Microsoft Edge等。
用法
- 创建事件流通道
使用new EventSource(url)
创建一个事件流通道,其中url
为服务器端向客户端发送事件的地址。例如:
var eventSource = new EventSource("server.php");
- 事件监听
使用EventSource.addEventListener(event, callback)
方法监听服务器发送的事件,其中event
是事件名称,callback
是回调函数。例如:
eventSource.addEventListener("message", function(event) {
console.log(event.data);
});
- 事件发送
在服务器端使用Content-Type: text/event-stream
头部来指定事件类型,并发送事件。例如:
header("Content-Type: text/event-stream");
echo "event: message\n";
echo "data: Hello, World!\n\n";
这将会向客户端发送一个名为"message"
的事件,事件内容为"Hello, World!"
。
事件类型
HTML5服务器发送事件支持以下三种事件类型:
message
:客户端接收到一条消息。open
:通道建立成功。error
:通道出错或已关闭。
事件格式
服务器端使用以下格式来发送事件:
- 事件名称:以
event:
为开头,后接事件名称。 - 事件数据:以
data:
为开头,后接事件数据。可以有多行数据,每行数据以data:
开头,中间以空行分隔。 - 注释:以冒号
:
开头,后接事件注释。
例如:
header("Content-Type: text/event-stream");
echo "event: message\n";
echo "data: Hello, World!\n\n";
echo "data: This is a message from server.\n\n";
echo ": Comment\n\n";
事件重连
如果通道关闭了,客户端不需要重新创建一个新的通道,而是可以使用EventSource.close()
方法关闭通道,并自动进行重连。例如:
eventSource.addEventListener("error", function(event) {
if (event.target.readyState == EventSource.CLOSED) {
eventSource.close();
eventSource = new EventSource("server.php");
}
});
限制
HTML5服务器发送事件虽然具有很多优点,但是它也有一些限制:
- 浏览器支持问题:虽然大部分主流浏览器都支持服务器发送事件,但是仍有一些浏览器不支持,需要进行兼容性处理。
- 单向通信:服务器发送事件只能从服务器端发送数据到客户端,无法实现客户端向服务器端的数据发送。
- 长连接:服务器发送事件是基于长连接实现的,可能会造成服务器负载过高的问题。
结论
HTML5服务器发送事件是实现实时通信的一种简单有效的机制,在一些实时数据展示、聊天室、通知等场景下具有很好的应用前景。但是在制定使用它之前,我们需要认真考虑它的局限性。