在 Web 开发中，我们时常需要向客户端推送实时更新的数据。传统的方法是使用轮询或长轮询技术，但这些方法都有一些缺点，如增加服务器负担、延迟高等问题。HTML5 中提供了一种更为高效的方式，即 Server-Sent Events。
什么是 Server-Sent Events？
Server-Sent Events（SSE）是一种客户端与服务器之间实现实时更新数据的通讯协议。它允许服务器单向地向客户端推送数据。SSE 协议建立在 HTTP 协议之上，而且它的通讯大部分都是使用常规的 HTTP 方法和头部字段。
相比于传统的轮询和长轮询技术，SSE 有很多优点，如：
- 无需客户端主动请求数据，减少无效请求的发送，减轻服务器压力。
- 实时性比ajax轮询更高，接收到服务器返回数据就处理，不需要等待ajax轮询时间到才能接收。
- 便于管理和维护，无需客户端在请求时传递 token 或唯一标识，而由服务器主动向客户端推送数据。
- SSE 协议使用简单，易于实现和测试。
如何使用 SSE ？
在服务端，我们需要为客户端提供 SSE 数据源。实现 SSE 方案的服务端可以使用 nodejs、Java、C#、Python 等开发语言。下面使用 Node.js 为例，先看看如何设置 SSE 数据源。
----- ---- - ----------------
----- -- - --------------
------------------------------- ---- -
---------- --- ------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-- --------
-------------- -- -
----- ---- - ------ ----- ----------------------------------
----------------
-- ------
- ---- -
----- ---- - --------------------------------
------------------ ---------------- ----------- -----------------
--------------
-
----------------上面的代码会创建一个 HTTP 服务器，根据请求的 url 发送不同的响应。
当客户端请求 SSE 数据源时，返回的响应的 Content-Type 需要设置成 text/event-stream。每次服务器推送数据时，都需要设置事件字段为 data，并在数据后面加上两个换行符。
在客户端，我们只需要使用 EventSource API 就能轻易地接收 SSE 服务端的推送数据。下面是一个简单的例子。
--------- -----
------
------
----- ----------------
---------- ----------
-------
------
-- -------------
--------
----- --- - --- --------------------
------------- - ----------- -
---------------------------------------- - -------
--
---------
-------
-------上面的代码使用 EventSource 对象创建一个到服务端的连接。每次服务端推送数据时，会触发 onmessage 事件，根据返回的数据更新网页上的内容。
总结
SSE 是一种非常优秀的技术，它可以让客户端实时接收到服务端的数据更新。它比传统的轮询和长轮询有更多的优点，是现代 Web 开发中常用的技术之一。
在实际开发中，除了上面的示例代码，还需要注意 SSE 的一些实际问题。例如，浏览器对 SSE 的支持，服务端如何管理已连接的 SSE 客户端，如何处理连接中断等问题。当然，我们可以找到一些成熟的库来解决这些问题。
希望这篇文章能够帮助读者更好地了解 SSE 技术，同时也给 Web 开发者提供了一种高效的数据推送方案。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/652f6da77d4982a6eb08e474