前言
在 web 端开发中，通讯是一个非常重要的部分。我们需要通过通讯机制实现服务器与浏览器之间的数据交换，从而实现各种功能。在过去，我们通常采用 AJAX 技术来实现数据交换，但是这种方式有其局限性。例如，在长时间的数据传输过程中，浏览器可能会被阻塞，无法处理其他任务。
为了解决这个问题，HTML5 引入了一个新的通讯协议，即 SSE（Server-Sent Events）。SSE 允许服务器向浏览器推送数据，而无需浏览器发起请求。在本文中，我们将详细介绍 SSE 的原理、用法以及相关注意事项。
SSE 原理
SSE 基于 HTTP/1.1 协议，类似于 AJAX，通过 HTTP 进行通讯。与 AJAX 不同的是，SSE 是单向通讯，即服务器可以向浏览器推送数据，但是浏览器无法向服务器发送请求。
SSE 的使用很简单，客户端通过创建一个 EventSource 对象并指定服务器地址，即可开始接收从服务器推送过来的数据。服务器需要设置相应的响应头，告诉浏览器这是 SSE 协议，而不是普通的 HTTP 响应。以下是一个典型的 SSE 响应头示例：
------------- ----------------- -------------- -------- ----------- ----------
其中，Content-Type 指定为 text/event-stream，代表这是 SSE 协议的响应。Cache-Control 指定为 no-cache，禁止浏览器对响应进行缓存。Connection 指定为 keep-alive，使得浏览器与服务器之间的连接保持长连接，以便服务器可以向浏览器推送数据。
在响应头设置完成后，服务器可以向浏览器推送数据。数据以 plain/text 格式进行传输，并以“event:”、“data:”等字段进行标记。服务器推送一条数据时，可以通过“data:”字段将数据传输给浏览器，例如：
----- ----------- ------- ------------
浏览器通过监听 EventSource 对象的 message 事件，即可收到从服务器推送过来的数据。
SSE 示例
下面我们通过一个简单的示例来介绍 SSE 的用法。假设我们在服务器端生成了一个随机数，并将它通过 SSE 推送到客户端。客户端需要实时接收并显示这个随机数。
服务器端代码
我们使用 Node.js 作为服务器端开发环境。以下是一个简单的 Node.js 代码，用于生成随机数并通过 SSE 推送到浏览器：
----- ---- - ----------------
----- ---- - -----
----- ------ - ----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----- ---- - -
------- ------------------------ - ----
--
---------------- ------------------------------
-- ------
---
------------------- -- -- -
------------------- --------- -- ---- ----------
---这段代码创建了一个 Node.js 服务器，并在每秒钟向客户端推送一个带有随机数的 JSON 对象。
客户端代码
我们使用简单的 HTML、JavaScript 代码来实现客户端功能。以下是一个示例代码，用于显示从服务器接收到的随机数：
--------- -----
------
------
----- ----------------
---------- ---------------
-------
------
---- ------------------
--------
----- ------ - --- -------------------------------------
---------------- - --------------- -
----- ---- - -----------------------
------------------------------------------- - --------- ----------------
--
---------
-------
-------这段代码创建了一个 EventSource 对象，并将服务器地址指定为 localhost:8000。每当服务器向客户端推送数据时，我们在 onmessage 事件中接收并解析 JSON 对象，并将数据显示在 HTML 页面上。
总结
然而，需要注意的是，SSE 并不是适用于所有的 web 应用程序。由于 SSE 采用长连接和逐条推送的方式，因此它适用于需要实时推送数据的应用程序，例如实时聊天程序、实时数据监控系统等。但是，对于大量数据交换或者异步操作等场景，SSE 并不是最佳的解决方案，此时我们仍然需要使用 AJAX 等技术。
总的来说，SSE 技术的出现，使得 web 应用程序可以实现更加实时、高效的数据交互。了解 SSE 技术的原理及用法，对于提升 web 开发中的通讯效率具有重要的指导及应用意义。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/653deaa67d4982a6eb78b49b