Server-Sent Events (SSE) 技术是一种用于服务器向客户端发送即时事件流（stream of events）的技术。相对于传统的 web 请求，SSE 具有低延迟、高效率、可靠性等优点，在前端开发中得到广泛的应用。本文将详细介绍 SSE 技术的实现原理、应用场景，并提供示例代码，帮助读者更好地理解并应用 SSE 技术。
SSE 技术的实现原理
SSE 技术基于 HTTP 协议和 EventSource 接口实现。简单来说，SSE 技术通过一种特殊的 HTTP 请求方式，即 EventSource 接口，实现了浏览器和服务器的长连接机制。这种机制可让服务器实时地向客户端发送事件流，用于更新客户端的数据。具体来说，SSE 技术包括以下步骤：
- 创建 EventSource 对象
在客户端的 JavaScript 代码中，我们需要创建一个 EventSource 对象，用于建立与服务器的长连接通道。代码如下：
let eventSource = new EventSource("/sse");
其中 /sse 是服务器 URL，用于指定 SSE 服务的地址。
- 接收服务端发送的事件流
SSE 技术是基于事件流（stream of events）实现的，服务端会向客户端不断地发送事件流，客户端需要监听这些事件并进行处理。在 JavaScript 代码中，我们可以通过 addEventListener() 方法添加事件监听器，接收服务端发送的事件流。
eventSource.addEventListener("message", function(event) { let data = event.data; // ... update data on webpage });
在 addEventListener() 的第一个参数中，我们需要指定事件类型，常用的事件类型包括 message、open、error 等。其中 message 事件类型是 SSE 技术中最常用的事件类型，代表服务端发送的消息。在 message 事件的回调函数中，我们可以读取服务端发送的数据，并在网页上更新数据。
- 服务端发送事件流
最后，我们需要在服务端来实现事件流的发送。在 Node.js 中，我们可以使用 sse-express 模块来实现 SSE 服务。代码如下：
const sseExpress = require('sse-express'); app.get('/sse', sseExpress(), (req, res) => { setInterval(() => { res.sse('data: ' + Math.random() + '\n\n'); }, 1000); })
在上述代码中，我们向 /sse URL 发送 SSE 事件流，每隔一秒钟就会生成一个随机数据并发送给客户端。
SSE 技术的应用场景
SSE 技术在前端开发中有着广泛的应用场景，以下列举几个：
- 实时数据更新
SSE 技术最常见的应用场景之一是实时数据更新。例如，在在线聊天室中，我们需要实时向用户发送新的聊天消息；在股票网站中，我们需要实时向用户展示股票行情。在这些场景下，SSE 技术非常适合用于实现实时数据的更新。
- 服务器端推送
SSE 技术在服务器端推送方面也有着很大的应用潜力。在和移动端交互的场景中，服务器通常需要向客户端推送一些消息，例如推送新的广告、推送新闻等。在这些场景下，SSE 技术可以帮助我们轻松地实现服务器端推送。
- 实时地图更新
在地图应用中，我们经常需要实时地显示移动的车辆或者行人等信息。在这些场景下，SSE 技术可以帮助我们实现实时地图更新，让用户更好地了解周边的情况。
示例代码
以下是一个使用 SSE 技术实现实时数据更新的示例代码。在这个示例中，我们向客户端发送时间戳，并在网页上实时显示时间戳。代码包括两个文件：
➜ app.js
-- -------------------- ---- ------- ----- ---------- - ----------------------- ----- ------- - ------------------- ----- --- - ---------- -------------------------------- - ------------ --------------- ------------- ----- ---- -- - -------------- -- - --- --------- - ---- ------------------ -------------- - - --------- - -------- -- ------ --- -----------------展开代码
➜ index.html
-- -------------------- ---- ------- --------- ----- ------ ------ ---------- ------------ ------- ------ ---- ------------------------------- -------- --- ----------- - --- -------------------- --------------------------------------- --------------- - --- --------- - ----------- ---------------------------------------------- - ---------- --- --------- ------- -------展开代码
在这个示例中，我们在服务器端的 /sse URL 上发送时间戳事件流，客户端 JavaScript 代码通过 EventSource 接口接收事件流，并将时间戳更新到网页上。通过这个示例，读者可以更好地理解和应用 SSE 技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bef19c0c976d473a34ea39
