Server-Sent Events（简称 SSE）是一种实现服务器向客户端推送数据的技术。与传统的 AJAX 轮询相比，SSE 更加高效、实时，并且可以减少服务器和客户端之间的通信量。在前端开发中，SSE 可以用于实现即时通知、聊天室、实时数据展示等功能。
本文将介绍如何使用 SSE 实现一个即时新闻通知应用。我们将使用 Node.js 和 Express 框架搭建服务器，前端将使用 HTML5 和 JavaScript。本文假设读者已经具备一定的 Node.js 和前端开发基础。
服务器端实现
首先，我们需要在服务器端实现 SSE。Express 框架提供了一个中间件 res.sse()，可以用于发送 SSE 数据。我们可以在路由中使用该中间件，如下所示：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ---------------- ----- ---- -- - --------- --------------- -------------------- ---------------- ----------- ------------- ------------ --- --------------- -------------- -- - --------------- ----------------------------- -- ------ ---展开代码
在上面的代码中，我们创建了一个 /news 路由，当客户端访问该路由时，服务器会每隔 1 秒钟发送一条带有当前时间的 SSE 消息。
其中，res.set() 用于设置响应头，Content-Type 设置为 text/event-stream 表示该响应是 SSE 数据，Cache-Control 设置为 no-cache 表示不缓存数据，Connection 设置为 keep-alive 表示保持连接。
res.sseSetup() 用于设置 SSE 的响应头，包括 Content-Type、Cache-Control 和 Connection。res.sseSend() 用于发送 SSE 消息，可以传递一个字符串或一个对象，例如：
res.sseSend({ event: 'news', data: '今日头条：中国成功发射神舟十二号飞船' });
在上面的代码中，我们通过 event 字段指定了 SSE 事件的名称，通过 data 字段指定了 SSE 数据的内容。
客户端实现
接下来，我们需要在客户端实现 SSE 的接收和处理。在 HTML5 中，我们可以使用 EventSource 对象来接收 SSE 数据。代码如下：
const source = new EventSource('/news'); source.addEventListener('news', (event) => { const data = JSON.parse(event.data); console.log(data); });
在上面的代码中，我们创建了一个 EventSource 对象，指定了 SSE 数据的来源为 /news 路由。然后，我们通过 addEventListener 方法监听了 news 事件，当服务器端发送 SSE 数据时，会触发该事件，我们可以在事件处理函数中获取数据并进行处理。
需要注意的是，SSE 数据是以文本流的形式传输的，因此我们需要将 JSON 字符串解析成 JavaScript 对象，才能进行处理。
示例代码
下面是一个完整的示例代码，包括服务器端和客户端的实现：
-- -------------------- ---- ------- -- ---- ----- ------- - ------------------- ----- --- - ---------- ---------------- ----- ---- -- - --------- --------------- -------------------- ---------------- ----------- ------------- ------------ --- --------------- -------------- -- - ---------------------------- ------ ------- ----- -------------------- ---- -- ------ --- -- --- ----- ------ - --- --------------------- ------------------------------- ------- -- - ----- ---- - ----------------------- ------------------ ---展开代码
在上面的代码中，我们每隔 1 秒钟发送一条 SSE 消息，客户端接收到消息后打印出来。
指导意义
使用 SSE 实现即时新闻通知是一个简单而实用的应用场景。在实际开发中，我们可以根据需求自定义 SSE 事件和数据格式，实现更加复杂的功能，例如聊天室、实时数据展示等。
需要注意的是，SSE 只能从服务器向客户端推送数据，客户端无法向服务器发送数据。如果需要实现双向通信，可以考虑使用 WebSocket 等其他技术。
另外，由于 SSE 数据是以文本流的形式传输的，因此在处理大量数据时需要注意性能问题，避免造成服务器和客户端的负载过大。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d2af4ba941bf7134535c0e
