Server-sent Events(SSE) 是一种在浏览器端实现服务器推送消息的技术。它可以让服务器向客户端发送实时消息，而无需客户端发起请求。在前端开发中，SSE 的应用非常广泛，比如聊天室、实时通知等。
本文将介绍如何在 JavaScript 中实现 SSE，并提供最佳实践和示例代码。
SSE 的基本原理
SSE 的基本原理是通过 HTTP 协议中的长连接来实现。客户端向服务器发送一个 HTTP 请求，服务器返回一个不断保持连接的响应。当服务器有新的消息需要推送时，就可以直接往这个响应中写入数据，从而实现实时推送。
使用 EventSource 对象
在 JavaScript 中，我们可以使用 EventSource 对象来实现 SSE。EventSource 对象是浏览器内置的 API，可以帮助我们创建 SSE 连接，并监听服务器的推送消息。
以下是使用 EventSource 对象的基本代码：
----- ------ - --- -------------------- ---------------------------------- ----- -- - --------------------- ---------- ------------ --- ------------------------------- ----- -- - ----------------------- ---------- --- -------------------------------- ----- -- - ------------------------- -------- ------- ---
这个代码片段中，我们首先创建了一个 EventSource 对象，并将其连接到服务器的 SSE 接口。然后，我们通过 addEventListener 方法监听三种事件：
- message：当服务器推送消息时触发。
- open：当连接成功建立时触发。
- error：当连接出现错误时触发。
当服务器推送消息时，EventSource 对象会自动将消息封装成一个 MessageEvent 对象，并触发 message 事件。我们可以通过监听这个事件来获取服务器推送的消息。
服务器端的实现
在服务器端，我们需要实现一个 SSE 接口，用来向客户端推送消息。下面是使用 Node.js 和 Express 框架实现 SSE 接口的示例代码：
----- ------- - -------------------
----- --- - ----------
--------------- ----- ---- -- -
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
----- ---------- - -------------- -- -
----- ------- - --- ---------------------
---------------- -----------------
-- ------
--------------- -- -- -
--------------------------
---
---
---------------- -- -- -
------------------- ------- -- ---- --------
---这个代码片段中，我们首先创建了一个 SSE 接口，地址为 /sse。当客户端连接到这个接口时，我们设置响应头，告诉浏览器这是一个 SSE 响应。然后，我们使用 setInterval 方法每秒向客户端推送一条消息。
当客户端关闭连接时，我们需要清除定时器，释放资源。
最佳实践
在使用 SSE 技术时，我们需要注意以下几点：
- SSE 接口需要设置正确的响应头，包括 Content-Type、Cache-Control 和 Connection 等。
- SSE 接口需要保持长连接，以便服务器可以随时向客户端推送消息。
- SSE 推送的消息需要以 data: 开头，并以两个换行符结尾。
- SSE 推送的消息不能包含换行符，否则会被解析为多条消息。
- SSE 推送的消息格式可以自定义，但建议使用 JSON 格式，方便客户端解析。
总结
在本文中，我们介绍了如何在 JavaScript 中实现 SSE，并提供了最佳实践和示例代码。SSE 技术可以帮助我们实现实时推送消息，应用场景非常广泛。在实际开发中，我们需要注意 SSE 接口的设置和消息格式的规范，以确保技术的稳定性和可靠性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65e2b6da1886fbafa4f5412f