在前端开发中，我们经常需要和服务器进行通信，比如向服务器发送请求获取数据、提交表单等等。通常情况下，这种通信都是客户端向服务器发送请求，服务器返回响应的模式。但在某些情况下，我们需要实现服务器主动向客户端推送消息的功能，比如实时聊天、在线状态变更等等，这时候就可以使用 SSE（Server-Sent Events）技术实现。
什么是 SSE？
SSE 是一种基于 HTTP 协议的服务器推送技术，它允许服务器实时向客户端发送事件流（Event Stream）。客户端通过监听这个事件流，可以实时获取服务器端推送的消息，从而实现了服务器主动向客户端推送消息的功能。
SSE 的优点在于它使用简单、易于实现，不需要像 WebSocket 那样实现繁琐的握手协议，同时实现了服务器向客户端主动推送消息的功能。
SSE 的使用
1. 实现 SSE 服务器端
在服务器端实现 SSE，需要返回一个 Content-Type 为 "text/event-stream" 的响应，同时将消息以特定格式发送给客户端。以 Node.js 为例，下面是一个简单的 SSE 服务器实现：
----- ---- - ----------------
-------------------------- ----- ---- -
-- -----
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
---
-- -------------------
-------------- -- -
----- ---- - -
-------- ------ ----- --------------------------
--
---------------- ------------------------------
-- ------
--------------- -- -- -
---------------- ------ --------------------- ----
---在这个例子中，我们在服务器端通过 setInterval 定时器实现每秒向客户端发送一次消息，消息格式为 data: ${JSON.stringify(data)}\n\n，其中 data 表示消息内容，每条消息以 \n\n 结尾。
2. 在客户端接收 SSE 消息
在客户端接收 SSE 消息，可以使用 JavaScript 中的 EventSource 对象。使用 EventSource 可以监听服务器端发送的事件流，在事件流到达时触发指定的回调函数，以实现对服务器推送消息的处理。
--------- -----
------
------
----- ----------------
---------- ------------
-------
------
--------------
---- ---------------
--------
----- ----------- - --- -------------------------------------
-- -----------------------
--------------------------------------- -------- ------- -
----- ---- - -----------------------
---------------------------------------- - -------------
---
---------
-------
-------在这个例子中，我们在客户端使用 EventSource 对象监听 "http://127.0.0.1:3000" 上的事件流，当有消息到达时，使用 JSON.parse 解析消息内容，并将消息内容显示在页面上。需要注意的是，EventSource 对象仅在支持 SSE 技术的浏览器中可用。
总结
SSE 技术是一种基于 HTTP 协议的服务器推送技术，它允许服务器实时向客户端发送事件流，从而实现了服务器推送消息的功能。SSE 技术使用简单、易于实现，是实时通信、轻量级推送消息的首选技术之一。
通过上面的介绍，我们可以学习到 SSE 的基本使用方法。在具体应用中，我们还可以根据实际情况进行优化，比如实现服务器端向多个客户端推送消息、设置超时时间等等。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/653ce7f07d4982a6eb6dac7a