HTML5 服务器发送事件

HTML5 服务器发送事件（Server-Sent Events），也被称为 EventSource，是一种允许服务器向客户端推送事件的技术。这意味着，客户端无需对服务器发起请求，服务器也可以向客户端发送数据。本文将介绍 HTML5 的服务器发送事件并提供示例代码。

什么是 HTML5 服务器发送事件？

HTML5 服务器发送事件是一种基于事件的通信协议，它允许服务器向客户端推送事件。与传统的 HTTP 请求不同，服务器发送事件允许客户端保持开放的连接，直到服务器发送一个事件。当事件被发布时，客户端会自动接收事件。这种通信模式类似于 WebSockets，但是服务器发送事件比 WebSockets 更简单，因为它不需要建立一个双向连接。

如何使用 HTML5 服务器发送事件？

使用 HTML5 服务器发送事件，需要创建一个 EventSource 对象。这个对象是客户端与服务器间通讯的接口，可以监听从服务器推送来的事件。以下是创建 EventSource 对象的语法：

var source = new EventSource(url);

其中，url 是服务器端的推送事件的 URL，例如：

var source = new EventSource("/stream");

在服务器端，需要设置响应头来指示将发送事件。以下是使用 Node.js 的示例代码：

response.writeHead(200, {
  "Content-Type": "text/event-stream",
  "Cache-Control": "no-cache",
  "Connection": "keep-alive"
});

这里的响应头 Content-Type 告诉浏览器这是一个服务器发送事件，而 Connection 表示此响应会保持连接开放。

在客户端代码中，可以使用 addEventListener() 来监听一个事件：

source.addEventListener('message', function(event) {
   console.log('Received message:', event.data);
}, false);

这里 message 是事件的名称，而 event.data 是服务器推送来的数据。还可以监听其他事件类型，如 open 和 error。

最后，在服务器端，可以通过将事件数据发送到客户端，来触发客户端的 message 事件。以下是使用 Node.js 将事件数据发送给客户端的示例代码：

response.write('id: ' + id + '\n');
response.write('data: ' + data + '\n\n');

这里 id 是事件的 ID，data 是事件的数据。

HTML5 服务器发送事件的优点

与传统的 HTTP 请求不同，HTML5 服务器发送事件的优点有：

• 实时性：服务器可以实时向客户端推送数据，而客户端无需等待服务器响应。
• 可靠性：即使客户端断开连接，服务器仍然可以推送数据，直到客户端重新连接。
• 易于实现：与 WebSockets 相比，HTML5 服务器发送事件更易于实现，因为它不需要建立双向连接。

总结

HTML5 服务器发送事件是一种基于事件的通信协议，它允许服务器向客户端推送事件。使用 HTML5 服务器发送事件，需要创建一个 EventSource 对象，并设置服务器响应头来指示将发送事件。HTML5 服务器发送事件有实时性，可靠性和易于实现等优点，适用于需要实时更新数据的应用程序。