【温故而知新】HTML5 服务器发送事件

一、HTML5

HTML5是HTML的最新版本，它引入了许多新的元素和功能，以适应现代网页开发的需求。以下是HTML5的一些主要特点：

1. 新增语义元素：HTML5引入了许多新的语义元素，如<header>、<footer>、<article>、<section>等，这些元素有助于提高网页的结构化和可访问性。
2. 媒体支持：HTML5引入了<audio>和<video>元素，使得开发者可以在网页上直接嵌入音频和视频内容，而不需要依赖第三方插件。
3. Canvas绘图：HTML5引入了<canvas>元素，使得开发者可以使用JavaScript在网页上绘制图形和动画。
4. 语义化标签：HTML5的语义化标签使得网页的结构更加清晰和易于理解。例如，使用<nav>元素表示导航链接，使用<article>元素表示独立的内容等。
5. 交互性：HTML5提供了更多的API和事件处理程序，使得开发者可以创建更加交互式的网页和应用。例如，拖放功能、文件上传和下载、地理定位等。
6. 离线和存储：HTML5提供了离线存储和会话存储功能，使得开发者可以在用户的设备上存储数据，以便在离线时使用。
7. 更好的表单控制：HTML5改进了表单元素和输入类型，使得表单的验证和输入更加方便和智能。

HTML5是一个非常强大的工具，它为开发者提供了更多的功能和灵活性，使得他们可以创建出更加丰富、交互性更强、功能更全面的网页和应用。

二、服务器发送事件

HTML5 服务器发送事件是指HTML5中的Server-Sent Events（SSE）技术。SSE是一种服务器向客户端发送实时事件的机制，客户端可以通过EventSource对象监听这些事件。

要使用SSE，首先需要在服务器端设置一个URL，用于接受客户端的事件监听请求。客户端可以使用JavaScript创建一个EventSource对象，将该URL传递给EventSource构造函数。然后，服务器可以使用特定的响应头（Content-Type: text/event-stream）向EventSource对象发送事件。

服务器发送事件的基本格式如下：

event: <event-name>
data: <event-data>

event: <event-name>
data: <event-data>

...

其中，event-name是事件的名称，event-data是事件的数据。每个事件都以"event: "开头，后面跟着事件名称；然后是"data: "，后面跟着事件的数据。事件之间使用空行分隔。

在客户端，可以通过EventSource对象的onmessage事件监听到服务器发送的事件。每当服务器发送一个事件，onmessage事件处理函数就会被触发，可以在该函数中处理接收到的事件数据。

下面是一个简单的示例，展示了SSE的基本使用方法：

var eventSource = new EventSource("server-event-url");

eventSource.onmessage = function(event) {
  var data = event.data;
  // 处理接收到的事件数据
};

需要注意的是，SSE是一种单向通信机制，服务器可以向客户端发送事件，但客户端不能向服务器发送事件。如果需要双向通信，可以考虑使用WebSocket技术。

三、浏览器支持

HTML5的Server-Sent Events（SSE）是HTML5中的一种实时通信机制，用于服务器向客户端发送事件。以下是各个常见浏览器对SSE的支持情况：

• Chrome：Chrome 6版本以上支持SSE。
• Firefox：Firefox 6版本以上支持SSE。
• Safari：Safari 5版本以上支持SSE。
• Opera：Opera 11版本以上支持SSE。
• Edge：Edge 14版本以上支持SSE。
• Internet Explorer：Internet Explorer不直接支持SSE，但可以使用Polyfill库（如EventSource Polyfill）来实现类似的功能。

需要注意的是，虽然大多数现代浏览器都支持SSE，但SSE并不是所有浏览器中的标准特性。在开发过程中，最好检查浏览器是否支持SSE，并提供备选方案，以确保在不支持SSE的浏览器上有良好的兼容性。

四、检测浏览器是否支持

要检测浏览器是否支持HTML5中的服务器发送事件（SSE），可以使用JavaScript来检测浏览器的事件源对象（EventSource）是否存在。以下是一个示例代码：

if (typeof(EventSource) !== "undefined") {
  // 浏览器支持SSE
  // 可以在这里进行SSE相关代码的处理
} else {
  // 浏览器不支持SSE
  // 可以提供一个备选方案或错误提示给用户
}

上述代码通过检测EventSource对象的存在来判断浏览器是否支持SSE。如果EventSource对象存在，说明浏览器支持SSE，可以在此处编写相应的SSE代码。如果EventSource对象不存在，则说明浏览器不支持SSE，可以在这里提供备选方案或错误提示给用户。

注意：在使用SSE之前，还应该检查服务器端是否支持SSE，并确保服务器端正确设置了SSE相关的响应头部和事件流。

五、EventSource 对象

事件	描述
onopen	当通往服务器的连接被打开
onmessage	当接收到消息
onerror	当发生错误

六、热门文章

【温故而知新】HTML5 WebSocket
【温故而知新】HTML5存储localStorage/sessionStorage
【温故而知新】HTML5代码规范/语义元素
【温故而知新】HTML5的Video/Audio
【温故而知新】HTML5拖放/地理定位/浏览器支持
【温故而知新】HTML5新标签canvas、MathML