使用 Server-Sent Events 实现处理请求的通用框架-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要向服务器发送请求并获取响应。而随着 Ajax 技术的发展，我们可以使用 XMLHttpRequest 对象来实现异步请求。但是，在某些场景下，我们需要实现服务器主动向客户端推送数据的功能。这时候，Server-Sent Events 就成为了一个不错的选择。

什么是 Server-Sent Events

Server-Sent Events（SSE）是一种基于 HTTP 的服务器推送技术。它允许服务器向客户端发送事件流，而客户端则可以通过 EventSource 对象监听这些事件。

与 WebSocket 不同，SSE 是一种单向通信方式，即数据只能由服务器向客户端推送，而客户端不能主动向服务器发送数据。但是，SSE 的优势在于它使用的是 HTTP 协议，可以避免一些防火墙和代理的问题。

如何使用 Server-Sent Events

在使用 SSE 之前，我们需要先在服务器端设置一个事件流，然后在客户端监听这个事件流。

服务器端设置事件流

在服务器端，我们可以使用以下代码来设置一个事件流：

const http = require('http');

http.createServer((req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

  // 每隔一秒钟发送一个事件
  setInterval(() => {
    res.write('data: ' + new Date().toISOString() + '\n\n');
  }, 1000);
}).listen(8080);

在这个例子中，我们创建了一个 HTTP 服务器，并设置了响应头的 Content-Type 为 text/event-stream，这告诉浏览器这是一个事件流。然后，我们使用 setInterval 每隔一秒钟向客户端发送一个事件。

客户端监听事件流

在客户端，我们可以使用以下代码来监听事件流：

const eventSource = new EventSource('/sse');

eventSource.onmessage = (event) => {
  console.log(event.data);
};

在这个例子中，我们创建了一个 EventSource 对象，并指定了事件流的 URL。然后，我们可以使用 onmessage 事件监听事件流中的消息，并在控制台输出消息内容。

使用 SSE 实现处理请求的通用框架

使用 SSE 可以实现服务器主动向客户端推送数据的功能，但是在实际开发中，我们可能需要更加灵活的处理方式。下面，我们将使用 SSE 实现一个通用的请求处理框架。

服务器端设置事件流

在服务器端，我们可以使用以下代码来设置一个事件流：

const http = require('http');
const url = require('url');

http.createServer((req, res) => {
  const { pathname } = url.parse(req.url);

  if (pathname === '/sse') {
    res.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive'
    });

    // 处理请求
    handleRequest(req, res);
  } else {
    res.writeHead(404);
    res.end();
  }
}).listen(8080);

function handleRequest(req, res) {
  // 处理请求的逻辑
  // ...

  // 向客户端发送事件
  res.write('data: ' + JSON.stringify(data) + '\n\n');

  // 完成请求
  res.end();
}

在这个例子中，我们首先判断请求的 URL 是否为 /sse，如果是，则设置响应头的 Content-Type 为 text/event-stream，并调用 handleRequest 函数处理请求。在 handleRequest 函数中，我们可以处理请求的逻辑，并向客户端发送事件。最后，我们需要调用 res.end() 完成请求。

客户端监听事件流

在客户端，我们可以使用以下代码来监听事件流：

function handleRequest(url, callback) {
  const eventSource = new EventSource(url);

  eventSource.onmessage = (event) => {
    callback(JSON.parse(event.data));
  };
}

在这个例子中，我们定义了一个 handleRequest 函数，它接受一个 URL 和一个回调函数作为参数。在函数内部，我们创建了一个 EventSource 对象，并使用 onmessage 事件监听事件流中的消息。当收到消息时，我们将消息解析为 JSON 对象，并调用回调函数。

总结

Server-Sent Events 是一种基于 HTTP 的服务器推送技术，它允许服务器向客户端发送事件流，而客户端则可以通过 EventSource 对象监听这些事件。使用 SSE 可以实现服务器主动向客户端推送数据的功能，并且可以使用 SSE 实现一个通用的请求处理框架。

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