在现代 Web 开发中，实时数据的推送已成为一项必须的技术。例如，在电商网站上，当一个用户在购物车中添加了一件商品时，其他用户必须实时看到这个变化。这种实时数据推送需要 SSE 技术来实现。
什么是 SSE
SSE（Server-Sent Events）是一种在 Web 浏览器和服务器之间创建实时通信的技术。SSE 允许服务器向客户端发送异步事件，这些事件可以是字符串、JSON，或者是其他格式的数据。SSE 具有以下几个特点：
- 单向通信：服务器向客户端发送数据，而客户端无法向服务器发送数据。
- 基于 HTTP：SSE 基于常规的 HTTP 协议，可以使用 HTTP 标准端口（80）和安全端口（443）发布事件。
- 长连接技术：SSE 使用长连接技术，也就是客户端和服务器之间的一条持久化的 TCP 连接，可以在单个 HTTP 请求-响应周期中发送多个事件而无需重新建立连接。
SSE 的优点
相对于其他实时通信技术（如 WebSocket 和长轮询），SSE 有以下优点：
- 简单易学：SSE 只需要基本的 JavaScript 和服务器端推送技术，对开发人员友好。
- 轻量级：SSE 只需要一个 HTTP 连接，相对 WebSocket 更加轻量级。
- 长连接技术：SSE 使用长连接技术，不需要像长轮询那样频繁地发起请求。
SSE 的使用
要使用 SSE，需要在后端创建一个 SSE 服务器。我们可以使用 Node.js 的 EventSource 模块来实现 SSE 服务器。在服务器端，我们将发送一个事件流，用于在客户端上实时推送数据。
Node.js 服务器示例代码
以下是一个使用 Node.js 服务器实现 SSE 的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- -- - --------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
---------------- --------------------
-- ------
----------------
------------------- ------- -- -------------------------这段代码启动了一个 HTTP 服务器，通过 setInterval 函数每秒钟向客户端推送当前时间。
前端页面示例代码
以下是前端页面使用 SSE 的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
---------- ------------
----- ----------------
-------
------
------- ---------
---- ----------------
--------
----- ----------- - --------------------------------
----- ----------- - --- -------------------------------------
--------------------- - ------- -- -
--------------------- - -----------
--
---------
-------
-------这段代码使用 EventSource 对象连接 SSE 服务器，并在接收到服务器的消息时更新页面上的时间元素。这样，每秒钟，时间元素将显示一个新的时间值。
SSE 的指导意义
- 使用 SSE 可以实现多任务并发推送，服务器可以用一种简单的方式同时推送多个事件流，这样客户端可以同时订阅多个事件并实时获取数据。
- SSE 技术可以用于 Web 应用程序的实时通信，如聊天应用程序、在线游戏、股票报价等。
- SSE 技术的学习对 Web 开发人员来说是必须的技能之一。
总结
SSE 是一种简单、轻量级、易于学习的实时数据推送技术，使用 SSE 可以实现多任务并发推送，用于实现 Web 应用程序的实时通信。
希望本文对大家理解 SSE 技术有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cb3e6e5ad90b6d041f6737