WEB开发 之 HTML 5 服务器发送事件.docx

HTML5 服务器发送事件（Server-Sent Events，简称SSE）是一种让服务器向客户端实时推送数据的技术。在传统的Web开发中，客户端通常通过轮询或者长轮询的方式向服务器请求更新，而SSE则改变了这种模式，使得服务器能够主动将更新推送到已经打开的连接上，大大提高了实时性。 SSE的工作原理基于HTTP连接的持久化，即一旦客户端通过EventSource对象建立了与服务器的连接，这个连接就会保持打开状态，直到服务器或客户端关闭它。服务器可以通过发送事件流（Event Stream）来不断地向客户端发送数据，而无需等待客户端的请求。 创建一个EventSource对象是使用SSE的第一步。以下是一个简单的示例： ```javascript var source = new EventSource('demo_sse.php'); source.onmessage = function(event) { document.getElementById('result').innerHTML += event.data + '<br />'; }; ``` 这段代码创建了一个指向'demo_sse.php'的EventSource实例，并定义了当接收到消息时的处理函数。每当服务器发送事件，onmessage事件就会触发，数据会被添加到id为'result'的元素中。 为了确保浏览器支持SSE，我们需要进行兼容性检测。可以使用如下的条件语句来检查浏览器是否支持EventSource： ```javascript if (typeof(EventSource) !== 'undefined') { // 支持SSE，执行相关代码 } else { // 不支持SSE，提供备选方案 } ``` 在服务器端，我们需要创建一个能够发送事件流的脚本。对于PHP，可以设置合适的HTTP响应头，并输出格式化的事件流数据： ```php <?php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); $time = date('r'); echo "data: The server time is: {$time}\n\n"; flush(); ?> ``` 这段PHP代码首先设置了`Content-Type`为`text/event-stream`，表示这是一个事件流，然后设置了`Cache-Control`为`no-cache`以防止缓存。接着，它会输出一个包含当前服务器时间的事件，以"data:"开头，并在末尾加上两个换行符，这是SSE数据格式的要求。 对于ASP环境，VBScript的实现类似： ```asp <% Response.ContentType = "text/event-stream" Response.Expires = -1 Response.Write("data: now()") Response.Flush() %> ``` 在服务器端代码中，我们可以看到服务器发送的数据总是以"data:"开始，这是SSE规范的一部分。此外，`flush()`函数的调用确保数据立即发送到客户端，而不是等到缓冲区填满。 EventSource对象还提供了其他事件处理器，例如`onopen`用于处理连接建立的事件，`onmessage`用于接收消息，以及`onerror`用于处理可能出现的错误。这些事件可以用来实现更复杂的逻辑，例如重新连接或错误处理。 HTML5的服务器发送事件为实时Web应用提供了一种高效且简单的方法，让开发者可以构建出如社交网络更新、股票报价、博客文章发布等实时更新的应用，而无需依赖WebSocket等更复杂的技术。由于所有主流浏览器（除了Internet Explorer）都支持SSE，这使得它成为一种实用的跨平台解决方案。