Server-sent Events 是 HTML5 规范中定义的一种服务器推送技术，它允许浏览器从服务器端接收实时的异步数据流。这种技术的优点在于它具有简单易用、高效快速的特点，特别适合于需要实时更新数据的场景，如金融、游戏、聊天等应用。
基本原理
SSE（Server-sent Events）使用的协议是 HTTP，只不过是 HTTP 1.1 的一个扩展协议。客户端浏览器通过一个 HTTP 连接请求服务器的一个特定 URL，服务器返回的是一个 MIME 类型为 text/event-stream 的响应。在这个响应中，服务器会按一个特定的格式不停地向客户端推送各种事件（event）和数据，客户端通过监听这些事件，实现了与服务端的实时通信。
服务器端实现
在服务器端，我们可以使用 Node.js 的 http 模块创建一个 HTTP 服务器，并为特定的 URL 路径指定请求处理回调函数（handler）。在这个回调函数中，我们需要设置响应头，以及不断发送 SSE 事件和数据。下面是一个基本的示例代码：
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----- ---- - ------ -------------------
----------------
-- ------
----------------
------------------- ------- -- -------------------------在这个示例中，我们为 URL 路径 /sse 指定了一个处理回调函数。在回调函数中，我们通过 res.writeHead() 函数设置了响应头，其中 Content-Type 设置为 text/event-stream，表明这是一个 SSE 请求；Cache-Control 设置为 no-cache，表示不使用缓存；Connection 设置为 keep-alive，表示 HTTP 连接保持持续连接。
接下来，我们使用 setInterval() 函数每秒钟向客户端发送一个事件 data，其中包含当前的时间戳。注意，每条 SSE 事件都必须以两个换行符 \n\n 结尾。
客户端实现
在客户端，我们可以通过 JavaScript 代码使用 SSE 技术来接收服务器端推送的事件和数据。下面是一个基本的客户端示例：
----- ------ - --- -------------------- ---------------------------------- ------- -- - ------------------------ --- -------------------------------- ------- -- - ------------------ -------- ------- ---
在这个示例中，我们创建了一个 EventSource 对象，并指定了要请求的 URL 路径 /sse。然后，我们通过 addEventListener() 函数监听客户端收到的事件，这里的 message 事件对应服务器端发送的 data 事件。
如果发生连接错误或者服务器端关闭了 SSE 连接，客户端会触发 error 事件，我们可以在回调函数中进行处理。需要注意的是，在 SSE 连接中，错误事件只能监听，不能手动关闭连接，因为 SSE 连接是由浏览器和服务器端共同维护的。
应用场景
SSE 技术主要适用于需要实时推送数据的应用场景，比如金融行情、股票交易、游戏、聊天等。下面我们以一个简单的聊天应用为例进行说明。
在聊天应用中，服务器需要实时推送新的消息给客户端，同时客户端也能够向服务器发送消息。传统的做法是使用轮询技术，即客户端定时向服务器发送请求查询是否有新消息。这种方式存在效率低下、带宽浪费、服务器压力大等缺点，而 SSE 技术则可以很好地解决这些问题。
客户端可以使用上面介绍的方式监听服务器端的消息事件，实时接收新的消息，并将消息展示给用户。同时，客户端也可以通过 SSE 协议向服务器端发送数据，实现和其他用户实时的交互。这样，整个聊天室的数据交互就变得非常高效和实时。
总结
Server-sent Events 是一种简单易用、高效快速的服务器推送技术，适用于需要实时更新数据的场景，如金融、游戏、聊天等应用。在使用 SSE 技术时，服务器需要按照一定的格式发送 SSE 事件和数据，客户端则通过 JavaScript 代码监听服务器端发送的 SSE 事件，从而实现与服务端的实时通信。
SSE 技术的应用场景非常广泛，特别是在需要高效处理实时数据的应用中，能起到事半功倍的效果。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64f0292ef6b2d6eab3a1a50d