随着互联网的不断发展，人们对于网络连接的依赖越来越重，同时也变得对网络传输的可靠性和稳定性越来越要求高，特别是在前端开发中。在实际开发中，经常会遇到客户端与服务器之间的断网问题，这时就需要一种方法来保证数据传输的可靠性，此时 SSE（Server-Sent Events）便应运而生。
什么是 SSE？
SSE 是一种能够在单向通信中实现从服务器向浏览器持续地发送事件的 HTTP 扩展。服务器可以向客户端发送数据，客户端不需要再发送请求，而是通过一个长时间开放的 HTTP 连接实现数据的实时推送。
在 SSE 中，服务器可以通过 HTTP 长连接不断地向客户端推送新的数据。这样就能够实现跟 WebSocket 类似的实时通信，在特定场景下也能够替代 WebSocket。
如何使用 SSE？
在前端使用 SSE 需要通过 JavaScript 的 EventSource 对象来实现。下面是一个简单的例子：
客户端：
-- -------------------- ---- -------
------
------
------- -----------------------
-- ---- ----------- --
--- ------ - --- -----------------------
-- ------------
---------------------------------- ----------- -
--------------------
-- -------
---------
-------
-------服务器：
-- -------------------- ---- -------
----- ---- - ----------------
-- ----- ---- - ------- ---
------------------------------- ---- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
--- -- - --
-------------- -- -
-- ----------
-------------- ------------
---------------- ----- --------------
-- ------
--------------- -------------通过上面的代码，我们可以看到客户端在调用 EventSource 对象时将接收一个 path 参数（即服务器地址），服务器监听了 path 为 /server 的请求，之后在每 2 秒之内向客户端发送一条消息。在客户端我们监听了 message 事件，并在其中进行对于数据的处理。
SSE 处理客户端与服务器的断网
在上述代码中，服务器会不停地向客户端发送数据，而如果客户端断网的话，会造成不必要的浪费，因此我们需要做一些特殊处理，当发现客户端断网后服务器暂停向客户端发送消息，等待客户端重新连接并继续发送消息。
我们可以通过在服务器代码中监听客户端的断网事件来完成上述处理，如下所示：
-- -------------------- ---- -------
----- ---- - ----------------
-- ----- ---- - ------- ---
------------------------------- ---- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
--- -- - --
-- ----------------------
--- ---------- - -----
-- ------ ----- --
---------------------- ---------- -
---------------------
---------- - ------
---
-------------- -- -
--------------- ------- -- ---------------
-- ----------
-------------- ------------
---------------- ----- --------------
-- ------
--------------- -------------通过监听客户端的 close 事件来判断客户端是否已断开，如果已经断开则不再向客户端发送数据。在客户端重新连接后，服务器会继续向客户端发送之前由于断网而未发送的数据。这样就能够实现在客户端断网的情况下，避免不必要的浪费，保证了数据传输的可靠性。
总结
使用 SSE 可以实现客户端与服务器的实时通信，并能够通过特殊处理来保证数据的可靠性，能够适用于很多场景。对于前端工程师来说，需要熟悉 SSE 的相关知识，以便在实际的开发中能够更好地应用 SSE，提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6486989148841e989452616d