使用 Server-Sent Events 流实时更新 HTML-JavaScript中文网-JavaScript教程资源分享门户

简介

在传统的 web 应用中，前端使用 AJAX 或 WebSockets 与后端进行数据通信。这种方式需要前端主动向后端发送请求，然后等待后端响应，效率很低。

Server-Sent Events (SSE) 是一种服务器向浏览器发送事件的协议，这种协议在浏览器和服务器之间创建了一个持久连接，使得服务器可以在需要的时候向浏览器推送数据。SSE 通过 HTTP 连接发送数据，并使用简单的文本协议将数据推送到浏览器。

SSE 提供了一种非常有效的方式来实现实时更新 HTML 页面的目的。本文将介绍如何使用 SSE 技术实现实时地更新 HTML 页面。

前提条件

本文假设您已经具备以下技能：

HTML、CSS 和 JavaScript 基础知识
Node.js 和 Express 框架基础知识

难点解析

在使用 SSE 技术实现实时更新 HTML 页面时，需要注意以下几个方面：

在 Node.js 中引入 sse 模块。
创建 SSE 路由，该路由会在客户端连接到服务器时自动启动。
在客户端使用 JavaScript，通过 EventSource 对象连接到 SSE 服务器。
实现向客户端推送数据的逻辑。

代码实现

服务端代码实现

安装 sse 模块依赖：

npm install sse

在项目中引入 sse 模块：

const sseExpress = require("sse-express");

创建 SSE 路由：

app.use("/events", sseExpress(), (req, res, next) => {
  // 设置 SSE 的响应类型
  res.sse("data: Hello World");
});

实现向客户端推送数据的逻辑：

app.use("/events", sseExpress(), (req, res, next) => {
  setInterval(() => {
    const data = new Date().toLocaleTimeString();
    res.sse("data:" + data);
  }, 1000);
});

客户端代码实现

在 HTML 中引入 EventSource 对象：

<script src="/path/to/eventsource.js"></script>

连接到 SSE 服务器：

const source = new EventSource("/events");
source.addEventListener("message", (e) => {
  console.log(e.data);
});

学习指导

本文介绍了如何使用 SSE 技术实现实时更新 HTML 页面的目的。使用 SSE 能够有效地减少服务器和浏览器之间的通信量，提高页面加载速度和用户体验。SSE 还可用于实时监视后端数据的变化并将其推送到前端。

如果您对 SSE 技术感兴趣，请深入了解其它更高级的应用场景，比如使用 SSE 技术实现一个实时聊天室或者实时地图等。

总结

本文介绍了如何使用 SSE 技术实现实时更新 HTML 页面的目的，包括创建 SSE 路由、在客户端使用 EventSource 对象连接到 SSE 服务器以及实现向客户端推送数据的逻辑。希望本文能够对您有所帮助。

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