Server-sent Events（SSE）是一种基于 HTTP 的服务器推送技术，可以在客户端和服务器之间建立一种持久性的连接，实现服务器主动向客户端发送事件数据。SSE 通常用于实时通知、实时数据更新等场景，相比于传统的轮询方式，SSE 可以大幅减少网络带宽和服务器资源的消耗。
SSE 的原理
SSE 的原理其实很简单，其核心就是使用了浏览器内置的 EventSource API，通过向服务器发送 HTTP 请求，建立一条持久性的 HTTP 连接，服务器会将事件数据通过这条连接直接发送到客户端，从而实现了实时推送的效果。
SSE 的请求和响应格式都是符合 HTTP 规范的，请求头中需要指定 "text/event-stream" 的媒体类型，响应数据则需要按照规定的格式进行组织，每个事件以 "data:" 开头，以 "\n\n" 结束，示例如下：
HTTP/1.1 200 OK Content-Type: text/event-stream data: hello world\n\n
以上响应数据会被解析成一个名为 "message" 的事件，事件数据为 "hello world"。
SSE 的应用实践
在实际应用中，SSE 可以用于实现实时通知、实时数据更新等场景，下面是一个简单的应用实例，通过 SSE 实现一个实时聊天室。
服务端代码
服务端使用 Node.js 的 express 框架实现，代码如下：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
----- --- - ----------
----------------
---------------- ----- ---- -- -
---------
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
---------------- ----- ---------------------------- - ------- ---- -------------
-- ------
---
---------------- -- -- -
------------------- ------- -- ------------------------
---以上代码创建了一个名为 "/chat" 的路由，当客户端访问该路由时，会创建一条 SSE 连接，并每秒向客户端发送一条事件数据。
客户端代码
客户端使用 JavaScript 实现，代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------
-------
------
--- -------------------
--------
----- -------- - ------------------------------------
----- ------ - --- ------------------------------------------
---------------------------------- ----- -- -
----- -- - -----------------------------
-------------- - -----------
-------------------------
---
---------
-------
-------以上代码创建了一个名为 "messages" 的列表，当客户端收到来自服务器的事件数据时，会将数据添加到列表中。
总结
SSE 是一种基于 HTTP 的服务器推送技术，可以实现实时通知、实时数据更新等场景，相比于传统的轮询方式，SSE 可以大幅减少网络带宽和服务器资源的消耗。SSE 的原理很简单，其核心就是使用了浏览器内置的 EventSource API，通过建立一条持久性的 HTTP 连接，实现服务器主动向客户端发送事件数据。SSE 的应用实践也很简单，可以通过 Node.js 的 express 框架实现一个简单的实时聊天室。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/663fdc9cd3423812e4e0bead