在前端开发中，我们经常会面临着要实时更新数据的情况。传统的做法可能是通过定时器或者轮询来实现实时更新，但是这种方式会占用大量的网络带宽和服务器资源，而且实时性也无法保证。这时候我们可以使用 Server-Sent Events （SSE）来优化我们的 web 应用性能。
SSE 是什么
Server-Sent Events 是一种基于 HTTP 协议的实时通信技术，在 HTML5 中被正式引入到浏览器中。相较于 WebSocket，SSE 仅使用了 HTTP 协议中的一个部分，即服务器端向客户端发送长连接的一种方式。其特点是：
- SSE 无需客户端发起请求，而是由服务器端主动推送消息给客户端
- SSE 使用了 HTTP 协议，因此它是基于传统的 HTTP 协议工作的，可以直接处理跨域请求问题
- SSE 具有更好的兼容性，因为大多数浏览器都支持 SSE，而我们所使用的技术栈，如 Node.js 也都可以方便地实现 SSE
SSE 的应用场景
SSE 可以应用于数据实时推送、事件提醒、服务器日志推送、股票行情推送等需求场景。比如，在一个在线多人协作编辑器的场景中，当有人更新了文档，就可以通过 SSE 技术将更新的文档推送到其他客户端，从而实现编辑实时同步。
如何使用 SSE
在服务端，我们需要使用 Node.js 的 http 模块创建一个 HTTP 服务。具体实现代码如下：
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
----- ------- - -
--------------- --------------------
---------------- -----------
------------- -------------
------------------------------ ---
--
------------------ ---------
-------------- -- -
----- ---- - --- ----------------------------
---------------- --------------
-- ------
---
------------------- -- -- -
------------------- -- ------- -- ------------------------
---上述代码创建了一个 HTTP 服务并监听 9090 端口，在每次请求中都会返回一个 MIME 类型为 text/event-stream 的响应头，其中 Access-Control-Allow-Origin:* 表示跨域请求允许所有来源。随后我们使用 setInterval 设置了一个定时器，每秒钟向客户端发送一条消息，其中 data 表示消息实体，两个换行符表示消息结束。
在客户端，我们可以通过 EventSource 类来接收服务端推送的消息。具体实现代码如下：
----- ------ - --- -------------------------------------
---------------------------------- ------- -- -
------------------------
---上述代码通过创建 EventSource 对象并传入服务地址，从而建立了与服务端的长连接。当服务端向客户端推送消息时，客户端会触发 message 事件，我们可以通过监听该事件来获取服务端推送的消息。在本例中，我们简单地将消息打印到控制台上。
总结
通过使用 SSE 技术，我们可以实现高效、实时地更新数据，而不会占用大量的带宽和服务器资源。SSE 具有与 WebSocket 相同的优点，但是它的实现更加简单，兼容性更好，因此在一些场景中可以替代 WebSocket 来使用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6532ee187d4982a6eb5fc0a4