Server-Sent Event（SSE）是一种支持服务器向客户端实时推送数据的协议。它与 WebSocket 相似，但是相比于 WebSocket 更加轻量级，而且不需要建立双向通信。
在本文中，我们将介绍如何使用 SSE 实现数据推流。我们先看一下 SSE 的基本原理，然后再通过代码示例来说明如何实现。
SSE 的基本原理
SSE 是一种在 HTTP 连接上发送文本数据的协议。它的基本原理是，客户端通过 HTTP 连接向服务器发送请求，服务器返回一条事件流，然后通过事件流实时向客户端发送数据。
SSE 的事件流由一系列的事件和数据组成。每个事件由一个标题（event）、数据（data）和一个可选的标识符（id）组成。客户端可以根据标题来处理事件，而数据则是事件的具体内容。
客户端通过 JavaScript 代码监听服务器返回的事件流，实时获取数据。下面我们来看一下如何使用 SSE 实现数据推流。
使用 SSE 实现数据推流的步骤
1. 服务器端代码
首先，我们需要在服务端编写代码，将需要推送的数据以事件流的方式发送给客户端。下面是一个使用 Node.js 的例子（需要安装 express 库）：
-- -------------------- ---- -------
----- ------- - ------------------
----- --- - ---------
-------------------------------- - -----------
--------------- ------------- ---- -
----------------------------- --------------------
------------------------------ -----------
---------------------- -
--- ---- - -- ------------ --
---------------- - - -------------------- - -------
-- -----
--
----------------上面的代码中，我们定义了一个路由 /sse，当客户端发送 GET 请求到 /sse 时，服务端会返回一个事件流，每隔一秒钟发送一条数据。其中，res.setHeader('Content-Type', 'text/event-stream') 和 res.setHeader('Cache-Control', 'no-cache') 分别设置返回数据的类型和缓存控制。
在每个事件中，我们使用 res.write() 方法将数据发送给客户端。需要注意的是，在每行数据的末尾需要添加 \n\n，表示一个事件的结束。同时，为了方便客户端处理数据，我们还将数据转换成了 JSON 字符串。
2. 客户端代码
客户端的代码相对来说比较简单，只需要使用 JavaScript 监听服务器返回的事件流即可。下面是一个使用 jQuery 的例子：
$(function() {
var source = new EventSource('/sse')
source.addEventListener('message', function(event) {
var data = JSON.parse(event.data)
/* 在这里处理推送的数据 */
})
})我们首先使用 EventSource 对象建立一个 SSE 连接。然后，使用 addEventListener() 方法监听事件流中的 'message' 事件，从中获取推送的数据。由于服务端发送的是 JSON 字符串，我们需要使用 JSON.parse() 方法将其转换成 JavaScript 对象。
至此，我们已经实现了使用 SSE 实现数据推流的功能。在实际应用中，我们可以根据业务需求定期向客户端发送最新的数据，从而实现实时推送。
总结
在本文中，我们介绍了使用 SSE 实现数据推流的基本原理和步骤。SSE 相比于 WebSocket 更加轻量级，适用于需要实现一些简单的实时数据推送场景。同时，在使用 SSE 时，需要考虑客户端和服务器的浏览器兼容性问题，以及如何优化推送性能等问题。希望本文能够帮助读者了解和应用 SSE 技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647a9e2c968c7c53b064ec19