如何使用 Server-Sent Events 提供实时通知-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们通常需要通过实时通知向用户传递消息。而 Server-Sent Events（SSE）是一种常用的轻量级实时通信技术，可以在客户端和服务器之间建立长连接，实现即时通知。

本文将介绍如何使用 SSE 来提供实时通知，并提供相应的示例代码。

什么是 Server-Sent Events？

SSE 是一种 HTML5 中的技术，它使用一种基于 HTTP 的协议，在客户端和服务器之间保持一个持久的连接，以实现服务器向客户端的实时通知。

它提供了一种简单有效的方法来推送新消息到客户端，无需使用 WebSocket 或其他实时通信协议，并且 SSE 可以与现有的 Web 应用程序架构很好地集成。

基本用法

使用 SSE 的基本工作流程如下：

在客户端上使用 JavaScript 向服务器发送请求以建立一个 SSE 连接。
服务器接收连接请求并保持与客户端的长连接，以便在需要时推送消息。
服务器向客户端发送消息。
客户端通过监听事件来处理收到的消息。

在在客户端上，你可以通过 EventSource 对象来建立 SSE 连接。同时，你需要在服务器端将消息组织成一定的格式推送给客户端。

下面是用于在客户端上建立 SSE 连接的代码：

const source = new EventSource('/sse-server');

这里我们将 EventSource 对象实例化，传递了一个 URL 参数。在客户端上使用 EventSource 实例来建立 SSE 连接，就会向指定 URL 发送请求，从而进行连接。

接下来，我们看一下在服务器端推送消息的实现：

// javascriptcn.com 代码示例
// 服务器端代码
res.writeHead(200, {
  'Content-Type': 'text/event-stream',  // 设置 Content-Type
  'Cache-Control': 'no-cache',  // 禁用缓存
  'Connection': 'keep-alive',  // 保持连接
});

// 循环发送消息
setInterval(() => {
  res.write('data: ' + new Date().toLocaleTimeString() + '\n\n');
}, 1000);

这里，我们定义了一个循环，在每次循环中调用 res.write() 方法来发送消息，并将消息的格式定为 data: + 消息内容 + \n\n。其中，“data:”表示这是数据类型，消息内容写在它后面，每个消息以两个分行符结尾。

Content-Type 设置为 text/event-stream，指示浏览器以 SSE 的方式解析返回的内容。同时要注意将 Cache-Control 设置为 no-cache，以禁用缓存。

完整的服务端代码如下：

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

const PORT = 3000;

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

  // 循环发送消息
  setInterval(() => {
    res.write('data: ' + new Date().toLocaleTimeString() + '\n\n');
  }, 1000);
}).listen(PORT);

console.log(`Server listening on port ${PORT}`);

为了测试这个示例代码，请在终端上执行 node server.js。在浏览器中输入 http://localhost:3000，你将看到 SSE 推送的消息。

总结

本文介绍了使用 Server-Sent Events 实现实时通知的方法，以及相关的 API，希望对您提供一些启示和帮助。

完整的示例代码如下：

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

const PORT = 3000;

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

  // 循环发送消息
  setInterval(() => {
    res.write('data: ' + new Date().toLocaleTimeString() + '\n\n');
  }, 1000);
}).listen(PORT);

console.log(`Server listening on port ${PORT}`);

// 客户端代码
const source = new EventSource('/sse-server');

source.onmessage = (event) => {
  const data = event.data;
  console.log(`Received message: ${data}`);
};

source.onopen = () => {
  console.log('Connection established.');
};

source.onerror = (error) => {
  console.error('Error occurred:', error);
};

Happy coding!

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

如何使用 Server-Sent Events 提供实时通知

什么是 Server-Sent Events？

基本用法

相关 API

EventSource

onmessage

onopen

onerror

总结

纠错反馈