SSE (Server-Sent Events) 是一种基于 HTTP 协议的服务器推送技术，它可以实现服务器向客户端主动推送数据的功能。SSE 在前端实时通信中发挥着至关重要的作用，例如在线聊天、股票行情、实时数据分析等领域都可以使用 SSE 技术来实现实时推送。
本文将介绍 SSE 的原理，并结合示例代码讲解在实际项目中如何运用 SSE 技术。
SSE 原理
SSE 的原理是通过在客户端与服务器之间建立长连接 (long-polling) ，从而实现服务器对客户端的推送。该技术基于 HTTP 协议，而 HTTP 协议是一个请求-响应模型，也就是说当客户端向服务器发出 HTTP 请求时，服务器会给客户端返回响应，在响应完毕后，连接就会自动关闭。但是，如果我们想要实现服务器向客户端持续推送数据的功能，那么我们就需要将连接保持打开状态，而常见的做法是通过长轮询 (long-polling) 来实现。
长轮询的原理是通过不断向服务器发送异步请求，等待服务器响应后再发送下一个请求，从而保持连接的打开状态。在实现 SSE 技术时，我们可以通过在客户端与服务器之间建立长连接，并在服务器端实时产生数据后，将数据发送给客户端，从而实现服务器对客户端的实时推送。
SSE 如何实现
在实现 SSE 技术时，我们需要先创建一个 EventSource 对象，并通过该对象与服务器建立连接。EventSource 对象支持上下文类型和 onmessage 事件，当服务器有新数据推送到客户端时，就会触发 onmessage 事件，并将数据回传到客户端。
下面是一个使用 SSE 技术的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ---------------
-------
------
---- ---------------
--------
-- -- ----------- --
--- ------ - --- -----------------------
-- ------------ --------- --
---------------- - ----------- -
-- ---------
---------------------------------------- - -------
--
---------
-------
-------在上面的代码中，我们创建了一个 EventSource 对象，并将其连接到 /events 路径，当服务器有新数据推送时，将触发 onmessage 事件，并将数据更新到页面上。
在服务器端的实现上，我们需要返回一个响应头 Content-Type 为 text/event-stream 的 HTTP 响应，并持续不断地向客户端发送数据。下面是一个使用 Node.js 实现 SSE 技术的示例代码：
-- -------------------- ---- -------
--- ---- - ----------------
------------------------------- ---- -
-- -----
------------------ - --------------- --------------------
---------------- -----------
------------- ------------ ---
-- ----------
---------------------- -
---------------- - - --- ------ - --------
-- ------
----------------在上面的代码中，我们创建了一个 HTTP 服务器，并向客户端发送一个响应头 Content-Type 为 text/event-stream 的 HTTP 响应，从而告知客户端该请求是一个 SSE 请求。之后，我们通过 setInterval 函数来模拟服务器实时产生数据的过程，并将数据发送给客户端。
总结
SSE 技术是实现服务器主动向客户端推送数据的一种重要技术，它能够为我们实现在线聊天、股票行情、实时数据分析等领域的应用提供支持。本文介绍了 SSE 的原理及在实际项目中如何运用 SSE 技术。对于新手而言，可以使用 Express 框架来实现 SSE 服务，这样使用起来会更加方便。希望本文能够对读者们有所启发，让大家在实现实时通信时更加得心应手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c35d3c83d39b488175fe0f