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