在前端开发中，常常会遇到需要实时获取服务器状态的情况，比如实时聊天、股票行情等。在这种情况下，我们需要一种能够让服务器状态源源不断地更新的技术，而 SSE（Server-Sent Events）正是这样一种技术。
什么是 SSE？
SSE 是一种基于 HTTP 的长连接技术，它允许服务器端向客户端推送数据，而不需要客户端发起请求。这种方式相比于传统的轮询技术，可以更加高效地实现实时更新。
SSE 的工作原理非常简单，服务器端通过 HTTP 连接向客户端发送数据，客户端通过监听该连接的事件来接收数据。在建立连接后，服务器端可以随时向客户端发送数据，客户端也可以随时关闭连接。
如何使用 SSE？
使用 SSE 需要满足以下条件：
- 服务器支持 SSE。大部分现代的 Web 服务器都已经支持 SSE，如 Node.js、Apache、Nginx 等。
- 客户端支持 SSE。现代浏览器均已支持 SSE，包括 Chrome、Firefox、Safari 等。
接下来，我们以 Node.js 为例，介绍如何使用 SSE。
服务器端实现
在 Node.js 中，我们可以使用 http 模块来实现 SSE。首先，我们需要创建一个 HTTP 服务器：
----- ---- - ---------------- ----- ------ - ----------------------- ---- -- - -- ----- ---- --- ------------------- -- -- - ------------------- -- ------- -- ------------------------ ---
然后，我们在处理请求的回调函数中，设置响应头 Content-Type: text/event-stream，并发送数据：
------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------ --- ---------------- ------------ -------------- -- - ---------------- ----- ---------------------------- -- ------
在上面的代码中，我们设置了响应头 Content-Type: text/event-stream，表示返回的是 SSE 数据。然后，我们发送了一条数据 data: hello\n\n，表示服务器端向客户端发送了一条消息。最后，我们使用 setInterval 定时向客户端发送当前时间戳。
客户端实现
在客户端中，我们可以使用 JavaScript 的 EventSource 对象来实现 SSE。首先，我们需要创建一个 EventSource 对象：
----- -- - --- --------------------
在上面的代码中，我们向 /sse 发送了一个 HTTP 请求，该请求将返回 SSE 数据。
然后，我们可以通过监听 message 事件来接收数据：
------------------------------ ------- -- - ------------------------ ---
在上面的代码中，我们监听了 message 事件，并输出了接收到的数据。
最后，我们需要在适当的时候关闭连接：
---------------------------- -- -- - ----------------------- --------- ---
在上面的代码中，我们监听了 close 事件，并输出了连接已关闭的消息。
总结
通过 SSE，我们可以实现服务器端向客户端推送实时数据的功能，从而提高应用程序的效率和用户体验。在使用 SSE 时，需要注意服务器和客户端的支持情况，并注意数据格式的正确性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/663913ded3423812e4730534