SSE 实现 Web 推送演示

前言

Web 推送是一种实时传输数据的技术，它能够无需刷新浏览器页面就可以实时地向页面发送数据。这种技术在很多场合中都被广泛应用，例如即时通讯、股票实时行情等。本文将介绍如何使用 SSE 技术实现 Web 推送，并提供详细的代码示例。

SSE 简介

SSE（Server-Sent Events）是一种基于 HTTP 协议的服务器向客户端推送数据的技术。它的原理是在服务器端建立一个长连接，向客户端推送数据，客户端在收到数据后通过 JavaScript 进行处理。

与其他 Web 推送技术不同，SSE 是单向通信的，即服务器向客户端发送数据，而客户端不能向服务器发送数据。因此，SSE 通常被用于服务器向客户端推送实时更新的数据。

SSE 实现的原理

SSE 是通过 HTTP 协议实现的。服务器端将数据封装在一个 HTTP 响应中，客户端通过一个 EventSource 对象打开一个 HTTP 连接，直到服务器端关闭连接，客户端就可以不间断地接收服务器端推送的数据。

下面是 SSE 的一个通讯流程：

1. 客户端通过 EventSource 对象向服务器发送一个 HTTP 请求。
2. 服务器返回一个 HTTP 响应，包含 "Content-Type: text/event-stream" 头部和无限期的 "Connection: keep-alive" 头部。
3. 服务器将数据封装在 HTTP 响应中推送给客户端，数据格式为 "data: xxx"，其中 xxx 为服务器端推送的数据。
4. 客户端通过 onmessage 事件接收服务器端推送的数据，并进行处理。

SSE 实现示例

服务器端代码示例

首先我们需要编写一个服务器端代码，用于向客户端推送数据。这里我们以 Node.js 为例，代码如下：

const http = require('http');

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

  setInterval(function () {
    const data = new Date().toLocaleTimeString();
    res.write('data: ' + data + '\n\n');
  }, 1000);
}).listen(3000);

以上代码通过 http 模块创建了一个 HTTP 服务器，设置响应头部信息，它会在每隔 1 秒钟向客户端推送当前时间数据。

客户端代码示例

接下来我们需要编写客户端代码，用于接收服务器端推送的数据。这里我们以 HTML5 中的 EventSource 对象为例，代码如下：

const source = new EventSource('/stream');
source.onmessage = function (event) {
  const data = event.data;
  console.log(data);
};

以上代码创建了一个 EventSource 对象，它会向服务器端发送一个 HTTP 请求，请求地址为 "/stream"。当服务器端推送数据时，这个对象就会触发 onmessage 事件，其中 event.data 表示服务器端推送的数据。

总结

本文介绍了 SSE 技术的原理和实现，并提供了详细的代码示例。通过学习本文，读者可以了解 SSE 技术的基本原理和使用方法，以及如何在 Web 开发中应用 SSE 技术实现实时数据推送功能。

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