如何使用 Express 和 sse-express 分别实现 SSE 的服务端和客户端-JavaScript中文网-JavaScript教程资源分享门户

Server-Sent Events（SSE）是一种在 Web 应用程序中实现服务器到客户端事件推送的技术。SSE 允许服务器通过 HTTP 协议向客户端发送事件流，这些事件流可以是文本、JSON 或 XML 数据。本文将介绍如何使用 Express 和 sse-express 分别实现 SSE 的服务端和客户端。

服务端实现 SSE

首先，我们需要安装 Express 和 sse-express：

npm install express sse-express

然后，我们可以使用以下代码实现 SSE 的服务端：

// javascriptcn.com 代码示例
const express = require('express');
const sseExpress = require('sse-express');

const app = express();

app.get('/events', sseExpress(), (req, res) => {
  setInterval(() => {
    const data = { message: 'Hello, SSE!' };
    res.sse(data);
  }, 1000);
});

app.listen(3000, () => {
  console.log('SSE server is running on http://localhost:3000');
});

在上面的代码中，我们创建了一个 Express 应用程序，并在 /events 路由上使用 sse-express 中间件。在路由处理程序中，我们使用 setInterval 定时向客户端发送事件流。

客户端实现 SSE

在客户端，我们可以使用 EventSource API 来接收 SSE 事件流。以下是一个基本的客户端实现：

const source = new EventSource('/events');

source.onmessage = function (event) {
  console.log(event.data);
};

在上面的代码中，我们创建了一个 EventSource 对象，将其连接到 SSE 服务端的 /events 路由。然后，我们使用 onmessage 事件处理程序来处理接收到的事件流。

总结

在本文中，我们介绍了如何使用 Express 和 sse-express 分别实现 SSE 的服务端和客户端。通过这种方式，我们可以轻松地在 Web 应用程序中实现服务器到客户端事件推送的功能。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65700361d2f5e1655d897b58