什么是 SSE？
SSE（Server-Sent Events）是一种 HTML5 技术，可以将服务器端数据实时推送到客户端浏览器，而不需要客户端进行轮询。这种技术可以使得 Web 应用程序在不刷新页面的情况下更新数据，从而提升用户体验。
SSE 支持哪些数据格式？
SSE 不是传统意义上的请求-响应机制，而是服务器向客户端发送即时事件。因此，SSE 可以支持任何服务器端语言，并且可以发送多种数据格式，例如：
- 文本数据
- JSON 数据
- XML 数据
在这里，我将详细介绍如何使用 SSE 发送这三种数据格式。
SSE 发送文本数据
发送文本数据非常简单。服务器可以使用 text/event-stream 媒体类型进行文本发送，例如：
--------------------- -------------------- ---------------------- ----------- ---- ------ ---- -- - ---- -------------
上面的示例中，我们使用了 header 函数设置了媒体类型和缓存控制策略。然后，在数据发送中，使用 "data" 字段来指定发送的数据，后面使用一个空行标识结束。浏览器会将这个数据解析并显示在页面上。我们可以在客户端使用以下代码来接收这个数据。
--------
----- ------ - --- --------------------------
---------------- - ----------- -
--------------------
--
---------当然，服务器可以以任何方式生成文本数据，例如从文件或数据库获取数据。
SSE 发送 JSON 数据
发送 JSON 数据与发送文本数据类似，只需要设置正确的媒体类型，并在数据中指定正确的格式即可。下面是一个示例：
--------------------- -------------------- ---------------------- ----------- ----- - ------------ -- ------- ----- -- ---- ---- ------ - - ------------------ - -------
在客户端，我们可以像使用文本数据一样处理 JSON 数据，只需要将数据通过 JSON.parse 函数转换为 JavaScript 对象即可。
--------
----- ------ - --- --------------------------
---------------- - ----------- -
----- ---- - -------------------
------------------
--
---------SSE 发送 XML 数据
类似于 JSON 数据，我们可以将 XML 数据作为字符串发送。我们可以将 XML 数据嵌入在 "data" 字段中，如下所示：
--------------------- -------------------- ---------------------- ----------- ---- - ---------------------------------------------- ---- ------ - - ---------------------- - -------
注意，我们需要使用 htmlspecialchars 函数对 XML 字符串进行编码，以避免与 SSE 事件格式发生冲突。
在客户端，我们可以使用以下代码来解析 XML 数据：
--------
----- ------ - --- --------------------------
---------------- - ----------- -
----- --- - -------
----- ------ - --- ------------
----- ------ - ---------------------------------------
----------------------------------------------------------------------------
--
---------结论
如上所述，SSE 可以轻松地支持多种数据格式传输，而无需使用轮询或其他机制。在前端开发中，使用 SSE 可以大大提升用户体验并减少服务器资源开销。希望本篇文章可以为读者带来启发和指导。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670cbb6f5f551281025b81ba