在现代 Web 应用程序中，实时通信已经成为了一个必备的功能，因为无论是现在的社交媒体还是游戏或其他实时数据处理应用程序，都需要传输实时数据或连接用户之间的通信。Server-sent Events（SSE）是一种 Web 技术，它允许服务器发送数据流到前端，这种技术是轻量级、基于 HTTP 的推送技术。
工作原理
SSE 的工作原理非常简单，它基于浏览器和服务端之间的长轮询通信。浏览器会打开一个指向服务端 URL 的连接，然后服务端在时间间隔内将数据推送至浏览器，这种模式被称为 Comet 通信。
当浏览器与服务端建立 SSE 连接后，服务端的响应头应包含以下信息：
Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive
在建立连接后，服务端会通过发送 SSE 标识符的数据包来确保连接的正确性，该标识符格式如下：
event: ping data: ping
如果浏览器接收到 ping 数据包，则表示连接仍然存活，服务端还在运行，否则浏览器将自动关闭连接，这可以确保浏览器与服务端之间的通信正确性。
在连接建立确认之后，服务端会将事件按照以下格式发送至浏览器：
event: eventName data: event data
其中 eventName 表示事件的名称，event data 表示数据，当服务端发送该数据时，浏览器将自动处理。
实现 SSE
在实现 SSE 时，我们需要进行以下步骤：
- 创建一个 SSE 连接
- 发送单个或多个事件
- 关闭连接
代码示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ------------
--------
--- ------ - --- -----------------------
---------------- - --------------- -
-- ------
------------------------
--
------------- - ---------- -
-- ------
---------------------
--
-------------- - ---------- -
-- ----
--------------------
--
---------
-------
------
------- -------
-------
--------- -------------------- ---- -------
-----
--------------------- --------------------
---------------------- -----------
------------------- -------------
-- -----
------ - -----------
-- --
----- - ------- ------
-- -------
---- ------- ------- - --------
---- ------- ------ - -------- -- ---------------
---- ------ ------ - --------
-----------
--------
-- ----
-------- ----------------- -
---- ------- ------ - --------
---- ------ ----- - --------
---- --------
-----------
--------
--------
-
-- ------------------
-------------------
-------------------------
----------------------------------------------在代码示例中，我们为 EventSource 对象提供一个 URL，该 URL 是服务端脚本的路径。服务端通过发送事件和数据来通知浏览器，EventSource 对象在接收到数据后会触发 onmessage 事件。
学习意义
SSE 是一种全新的即时通信技术，它为现代 Web 应用程序减少了不必要的负载量，提高了性能和响应时间，并提供了持久化连接，避免了频繁的请求和响应。因此它是高度可扩展的技术，能够与现有的服务器通信协议和技术集成。
指导意义
SSE 技术在现代 Web 应用程序中具有很高的实用性和发展前景。开发人员可以利用 SSE 技术来构建各种实时通信应用程序，例如在线聊天室、游戏、股票市场追踪和其他实时数据处理等应用程序。因此，掌握 SSE 技术将会是一个跨越未来的前端开发技能。
结论
SSE 是一种简单、高效的即时通信技术，它具有很高的可扩展性和可维护性，并且可以轻松地与现有的服务器通信协议集成。使用 SSE 技术，开发人员可以构建各种类型的实时通信应用程序，因此 SSE 技术已成为现代 Web 开发中不可或缺的技术之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67232cd02e7021665e0eb876