Server-Sent Events（SSE）是一种用于实现服务器推送数据到客户端的技术，它可以使得客户端在不刷新页面的情况下获取到最新的数据。SSE 相对于传统的轮询和长轮询技术，具有更低的延迟和更高的效率。本文将详细介绍 SSE 的实现原理，以及如何在前端中使用 SSE。
SSE 的实现原理
SSE 技术是基于 HTTP 协议的，它使用了 HTTP 的长连接机制来实现服务器向客户端推送数据。当客户端向服务器发送 SSE 请求时，服务器会保持连接打开，直到有数据需要推送时才会向客户端发送数据。在 SSE 连接期间，客户端可以不断地接收服务器发送的数据。
SSE 通信过程中，客户端与服务器之间的数据传输是单向的，即服务器只能向客户端发送数据，而不能从客户端接收数据。客户端可以通过监听 message 事件来获取服务器发送的数据。SSE 还支持 event 和 id 字段，用于标识数据的类型和序号。
SSE 使用了一种特殊的 MIME 类型 text/event-stream 来表示数据格式，数据以纯文本的形式发送。每条数据以两个连续的换行符（\n\n）作为结束符，这种结束符的作用是告诉客户端一条数据已经发送完毕。
在前端中使用 SSE
在前端中使用 SSE 非常简单，可以通过创建一个 EventSource 对象来发起 SSE 请求，并通过监听 message 事件来获取服务器发送的数据。下面是一个简单的示例代码：
----- ------ - --- -------------------- ---------------------------------- ----- -- - ----- ---- - ----------------------- ------------------ ---
上面的代码中，EventSource 构造函数的参数是 SSE 请求的 URL，服务器端需要返回正确的 MIME 类型和数据格式。客户端可以通过 addEventListener 方法来监听 message 事件，事件回调函数中的 event.data 表示服务器发送的数据。
在服务器端，需要使用一些特定的技术来实现 SSE 的推送功能，常用的技术包括 Node.js 的 http 模块和 Express 框架的 EventSource 插件。下面是一个使用 Express 框架实现 SSE 的示例代码：
----- ------- - -------------------
----- --- - ----------
----------------------------------
--------------- ----- ---- -- -
---------
--------------- --------------------
---------------- -----------
------------- ------------
---
--- ----- - --
----- -------- - -------------- -- -
---------------- ------------------------ -----------------
-- ------
--------------- -- -- -
------------------------
---
---
---------------- -- -- -
------------------- ------- -- ------------------------
---上面的代码中，app.get('/sse') 路由处理函数返回的是一个 SSE 数据流，设置了正确的 MIME 类型和响应头信息。在 setInterval 定时器中，每隔一秒向客户端发送一条数据，并通过 JSON.stringify 方法将数据转换为 JSON 格式。在 req.on('close') 事件中清除定时器，释放资源。
总结
本文详细介绍了 SSE 技术的实现原理，以及如何在前端中使用 SSE。SSE 技术相对于传统的轮询和长轮询技术，具有更低的延迟和更高的效率，适用于需要实时获取数据的场景。在实际开发中，需要注意 SSE 的数据格式和 MIME 类型设置，以及服务器端的推送逻辑实现。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6601391ed10417a222c63d38