本文将介绍如何使用 Server-Sent Events 技术实现真正的实时推送，并提供示例代码。本文内容详细，适合前端开发人员学习和参考。
前言
Web 应用程序中实时推送是一种非常重要的功能，可以通过实时推送让用户获得即时更新，提高用户体验并增强网站的用户留存率。在过去，我们使用轮询技术来实现实时推送，但轮询效率低，容易引起性能问题并且没有真正的实时性。Server-Sent Events 技术可以帮助解决这些问题。
Server-Sent Events 是一种 HTML5 标准，它允许客户端通过简单的 HTTP 连接接收服务器推送的数据。与 WebSocket 相比，Server-Sent Events 技术更简单，可以用于更广泛的应用场景，例如实时更新股票报价、聊天室应用等。
实现 Server-Sent Events
使用 Server-Sent Events 技术实现实时推送，需要满足以下要求：
- 服务器需保持连接开启，可以向客户端发送事件。
- 客户端需要建立一个 EventSource 对象，向服务器发起一个 HTTP 连接。
- 服务器需要不断地向该 HTTP 连接发送事件数据。
下面我们来看一下基本的示例代码：
服务器端代码
-- -------------------- ---- ------- ----- ---- - ---------------- ----- -- - -------------- ----- ---- - ---------------- ----------------------- ---- -- - ----- - --- - - ---- -- ---- --- ---- - ------------------ - --------------- ----------- --- ----- ---- - ------------------------------------ --------------- ---------------- - ---- -- ---- --- ---------- - ----- ------- - - --------------- -------------------- ---------------- ----------- ------------- ------------ -- ------------------ --------- -------------- -- - ---------------- ----- ---------------------------- -- ------ - ---- - ------------------- - ---------- ----------------展开代码
以上代码启动了一个 HTTP 服务器，当客户端访问根路径 / 时，会返回一个包含启动事件源的 HTML 文件（下一节会提到）。当客户端请求“/events”时，将创建一个 HTTP 响应，该响应包含了事件源的响应头。事件源响应头至关重要，它必须包含以下信息：
- Content-Type: text/event-stream
- Cache-Control: no-cache
- Connection: keep-alive
这些响应头告诉客户端，这个响应将使用“事件流”的形式发送数据，客户端会根据这些信息来开始监听事件。然后，我们将使用 setInterval API 来不断地向响应对象发送数据。需要注意的是，在每个数据块之间必须有一个空行，否则客户端将不会视为是一条新的事件数据。
客户端代码
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------------ ------------ ------- ------ --------------- ------ --------- ---- ------------------ -------- ----- ----------- - --- ----------------------- --------------------- - ------- -- - ----- --------- - --------------------------------- ------------------- -- ---------- - - ---------- - ------- -- ------------------- - --- -- - -------------------------- --------- --- -- --------- ------- -------展开代码
以上代码中我们创建了一个 EventSource 对象，这个对象接收一个 URL 作为参数。通过 URL，对象会建立一个 HTTP 连接以及与服务器建立一个持久性连接。一旦连接被建立以后，服务器就可以向客户端推送数据了。每当有新的数据发送时，服务器端都会触发事件，EventSource 对象可以通过监听 onmessage 事件来接收数据。
结语
经过这个简单的示例，我相信你已经明白了 Server-Sent Events 技术的实现原理，同时我们也了解了如何使用它来实现非常酷的实时推送功能。在实际的应用中，你会发现 Server-Sent Events 技术在某些场景下表现的比 WebSocket 更好，更加稳定可靠。
示例代码：https://github.com/luchenqiang/server-sent-events-demo。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bbad66306f20b3a6b58ff4
