随着互联网的快速发展，我们对即时反馈信息的需求越来越高。在前端开发中，我们经常需要实现实时更新的功能，比如实时聊天、实时推送等等。本文将介绍如何利用 SSE（Server-Sent Events）技术实现前端实时反馈信息。
SSE 简介
SSE 是一种基于 HTTP 协议的服务器推送技术，它允许服务器端通过一个持久化的连接实时向客户端发送事件信息。每次发送的信息可以是文本或二进制数据，它们被包装在类似于 HTTP 响应的事件流中。
相比于其他实时数据传输技术，如 WebSocket 和长轮询，SSE 更简单，更易于实现，同时也更适合一些特定场景的应用。例如，在需要实时传输低频率事件的场合，使用 SSE 就可以很好地满足需求。
SSE 的使用
SSE 主要由三部分构成，分别是客户端、服务器端和事件流。客户端通过 EventSource 接口向服务器端请求事件流，服务器端通过在响应头中添加 "Content-Type: text/event-stream" 和 "Cache-Control: no-cache" 等信息来告知浏览器事件流的格式，然后通过持久化连接向客户端发送事件信息。
客户端可以通过监听 EventSource 的 message 事件来获得服务器端发送的信息，并对页面进行相应更新。下面是一个简单的示例：
-- -------------------- ---- -------
---- ----------- ---
------- -----------------------
--- ----------- - --- -------------------------------------------
--------------------- - -------- ------- -
--- ---- - -----------------------
----------------------------------------- - -------------
--
------------------- - -------- ------- -
------------------ -------- ----- --------- ----- ----------
--
---------
---- ------------------ -------------------- ---- -------
-- ---------
----- ---- - ----------------
-------------------------- ----- ---- -
-- -------- --- --------- -
------------------ -
--------------- --------------------
---------------- ----------
---
-------------- -- -
--- ----- - -
-------- -------- ---- -- - - --- ---------------------------
--
---------------- - - --------------------- - --------
-- ------
- ---- -
------------------ ---------------- --------------
---------
------
------
---------- ------------
-------
------
------- ---------
------- ---------------------------
-------
-------
---
-
----------------
------------------- -- ------- -- ------------------------在上面的示例中，我们创建了一个 HTTP 服务器，监听了 "http://localhost:8080" 这个地址。当客户端首次请求该地址时，服务器端返回一个 HTML 页面，该页面通过 script 标签引入了 client.html 文件，其中包含了客户端的代码。
客户端的代码中创建了一个 EventSource 对象，并向 "http://localhost:8080/event" 这个地址请求事件流。当服务器端向客户端发送事件信息时，客户端通过监听 message 事件来更新页面信息。
在服务器端的代码中，我们判断客户端请求的地址是否为 "/event"，如果是，我们在响应头中添加必要的信息，并使用 setInterval 定时向客户端发送事件信息。在这里，我们每秒钟向客户端发送一个包含当前时间的信息。
启动该示例后，在浏览器中打开 "http://localhost:8080" 这个地址，你可以看到一个页面，该页面每秒钟更新一次当前时间。如果你在命令行中运行该服务器，你也可以看到类似于下面的日志输出：
Server is running on http://localhost:8080 ::ffff:127.0.0.1 - - [26/Jan/2022:16:01:11 +0800] "GET / HTTP/1.1" 200 340 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.80 Safari/537.36" ::ffff:127.0.0.1 - - [26/Jan/2022:16:01:14 +0800] "GET /event HTTP/1.1" 200 - "http://localhost:8080/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.80 Safari/537.36"
总结
本文简要介绍了 SSE 技术的基本原理和使用方法，并提供了一个简单的示例。通过该示例，你可以学习到如何利用 SSE 实现前端实时反馈信息的功能。
需要注意的是，SSE 技术不适用于需要高频率实时传输数据的场合，此时应该考虑使用其他技术，如 WebSocket 等。同时，在使用 SSE 技术时，还应注意兼容性和安全性等问题，以保证应用的稳定、可靠和安全。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647d9cbb968c7c53b0867bc7