HTML5 服务器发送事件

简介

HTML5 服务器发送事件(Server-Sent Events)是一种基于事件流的服务器到客户端的通信机制，允许服务器推送实时数据到Web页面。它是HTML5新增的API之一，相比于传统的轮询机制和长轮询机制，它具有更低的延迟、更高的带宽利用率和更高的效率。

浏览器支持

目前主流浏览器都支持HTML5服务器发送事件，包括Google Chrome、Mozilla Firefox、Safari、Opera和Microsoft Edge等。

用法

1. 创建事件流通道

使用new EventSource(url)创建一个事件流通道，其中url为服务器端向客户端发送事件的地址。例如：

var eventSource = new EventSource("server.php");

2. 事件监听

使用EventSource.addEventListener(event, callback)方法监听服务器发送的事件，其中event是事件名称，callback是回调函数。例如：

eventSource.addEventListener("message", function(event) {
  console.log(event.data);
});

3. 事件发送

在服务器端使用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服务器发送事件支持以下三种事件类型：

1. message：客户端接收到一条消息。
2. open：通道建立成功。
3. error：通道出错或已关闭。

事件格式

服务器端使用以下格式来发送事件：

1. 事件名称：以event:为开头，后接事件名称。
2. 事件数据：以data:为开头，后接事件数据。可以有多行数据，每行数据以data:开头，中间以空行分隔。
3. 注释：以冒号: 开头，后接事件注释。

例如：

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服务器发送事件虽然具有很多优点，但是它也有一些限制：

1. 浏览器支持问题：虽然大部分主流浏览器都支持服务器发送事件，但是仍有一些浏览器不支持，需要进行兼容性处理。
2. 单向通信：服务器发送事件只能从服务器端发送数据到客户端，无法实现客户端向服务器端的数据发送。
3. 长连接:服务器发送事件是基于长连接实现的，可能会造成服务器负载过高的问题。

结论

HTML5服务器发送事件是实现实时通信的一种简单有效的机制，在一些实时数据展示、聊天室、通知等场景下具有很好的应用前景。但是在制定使用它之前，我们需要认真考虑它的局限性。