Node.js 下使用 EventSource 实现服务器推送-JavaScript中文网-JavaScript教程资源分享门户

背景

在 Web 应用程序中，实时推送是一个重要的功能。当要求客户端实时接收服务器端的更新时，常用的方式是轮询或者长轮询。但是这些方式不是很高效，因为如果没有实际的更新，客户端将不得不不断地发送请求以等待更新，这会导致网络和服务器负担的浪费。

EventSource 是一个 Server-Sent 事件（SSE）API，允许服务器推送数据到客户端的浏览器。它使用标准的 HTTP 连接，因此不需要像 WebSocket 那样建立新的连接，并且可以通过 Node.js 轻松地实现。

概述

使用 Node.js 实现服务器推送需要做以下三个步骤：

创建一个 HTTP 服务器
在 HTTP 服务器上启用 EventSource
使用 EventSource 从服务器推送数据到客户端

实现步骤

步骤一：创建 HTTP 服务器

要创建一个 HTTP 服务器，我们可以使用 Node.js 的内置模块 http。

// javascriptcn.com 代码示例
const http = require('http');

const server = http.createServer((req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/html',
    'Access-Control-Allow-Origin': '*' // 允许跨域请求
  });
  res.end('<h1>Hello World</h1>');
});

server.listen(3000);

步骤二：启用 EventSource

要启用 EventSource，我们需要在 HTTP 响应头中添加以下内容：

res.writeHead(200, {
  'Content-Type': 'text/event-stream',
  'Cache-Control': 'no-cache',
  'Access-Control-Allow-Origin': '*' // 允许跨域请求
});

这些响应头告诉浏览器响应的格式，防止缓存，并允许跨域请求。

步骤三：推送数据到客户端

在服务器端，我们可以使用以下代码通过 EventSource 向客户端推送数据：

setInterval(() => {
  res.write(`event: message\n`);
  res.write(`data: ${new Date().toISOString()}\n\n`); // 向客户端发送数据
}, 1000);

这段代码使用 setInterval 定期向客户端推送消息。 event: message 表示是自定义事件，data: 是实际的数据。每个消息结束后必须有两个换行符。

服务器端代码如下：

// javascriptcn.com 代码示例
const http = require('http');

const server = http.createServer((req, res) => {
  if (req.url === '/events') {
    res.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Access-Control-Allow-Origin': '*' // 允许跨域请求
    });

    setInterval(() => {
      res.write(`event: message\n`);
      res.write(`data: ${new Date().toISOString()}\n\n`);
    }, 1000);
  } else {
    res.writeHead(200, {
      'Content-Type': 'text/html',
      'Access-Control-Allow-Origin': '*' // 允许跨域请求
    });
    res.end('<h1>Hello World</h1>');
  }
});

server.listen(3000);

示例代码

以下是完整的示例代码：

// javascriptcn.com 代码示例
const http = require('http');

const server = http.createServer((req, res) => {
  if (req.url === '/events') {
    res.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Access-Control-Allow-Origin': '*'
    });

    setInterval(() => {
      res.write(`event: message\n`);
      res.write(`data: ${new Date().toISOString()}\n\n`);
    }, 1000);
  } else {
    res.writeHead(200, {
      'Content-Type': 'text/html',
      'Access-Control-Allow-Origin': '*'
    });
    res.end('<h1>Hello World</h1>');
  }
});

server.listen(3000);

在浏览器中打开 http://localhost:3000/events 就可以看到每秒钟推送一次时间戳的效果。

总结

本文介绍了使用 EventSource 在 Node.js 中实现服务器推送的基本步骤。通过本文，您已经了解到如何使用 EventSource 向客户端推送实时数据。这种方法可以减少网络和服务器负担，提高应用程序的效率。

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