HTML5基础教程（二十）服务器发送事件(SSE)：HTML5 SSE，服务器向浏览器发起的“单相思”协议

一边是浏览器安静地倾听，另一边是服务器滔滔不绝地诉说，这就是SSE技术的魅力所在——一种让服务器能够主动向客户端推送数据的轻量级技术。

---

01 何为SSE？HTML5的实时通信利器

服务器发送事件（SSE）是一种标准协议，描述了服务器如何在与客户端建立初始连接后，主动向浏览器客户端推送数据。

SSE是HTML5的一部分，提供了一种向客户端发送实时更新的方式。与WebSocket不同，SSE专为处理单向通信（从服务器到客户端）设计，这使得在不需要双向通信的场景下更加简洁高效。

SSE基于HTTP协议，利用了其长连接特性，在客户端与服务器之间建立一条持久化连接，并通过这条连接实现服务器向客户端的实时数据推送。

SSE协议非常简单，主要是正常的Http请求，更改请求头相关配置即可：

• Content-Type: text/event-stream,utf-8
• Cache-Control: no-cache
• Connection: keep-alive

02 SSE的工作原理：服务器与客户端的持久对话

SSE的基本工作原理是通过创建一个到服务器的特殊连接来工作，这个连接在客户端（通常是Web浏览器）和服务器之间保持打开状态。

服务器可以通过这个连接向客户端发送文本消息，这些消息以事件的形式到达客户端。

在客户端，JavaScript代码可以监听这些事件，并对它们进行处理。整个过程可以分为四个步骤：

• 客户端创建EventSource对象：客户端创建一个EventSource对象，并指定要连接的服务器端URL。
• 服务器设置响应头：服务器端在响应中设置特定的头信息，包括Content-Type为text/event-stream，以及其他相关的缓存控制头。
• 服务器发送数据：服务器可以随时向客户端发送数据，数据以事件的形式发送，每个事件包含数据和事件类型。
• 客户端处理事件：客户端通过EventSource对象的onmessage回调函数接收服务器发送的事件，并进行相应的处理。

03 为何选择SSE？对比WebSocket的独特优势

SSE具有多个显著特点，使其在某些场景下比WebSocket更具优势：

• 简单易用：SSE基于标准HTTP协议，不需要复杂的协议栈，使用简单高效。易于集成到现有的Web技术中。
• 自动重连：如果连接中断，浏览器会自动尝试重新连接，无需额外的代码逻辑处理。
• 事件驱动通信：服务器可以推送基于事件的更新，并可针对特定的事件进行处理。
• 轻量级协议：SSE基于HTTP，不需要复杂的协