在 Web 开发中，有时需要实时更新某些数据，比如聊天更新、持续监视服务器端的更新以及用户交互的通知。 Server-Sent 事件（SSE）使这些任务变得容易而简单。
SSE 是一种轻便的服务器到客户端通讯协议，用于实现服务器向客户端推送数据。使用 SSE，服务器可以向客户端推送新的数据，而无需浏览器重新请求，这可以极大地加快网站的速度。
在本篇文章中，我们将使用 Node.js 和 Express 来创建一个基本的 SSE 应用程序。
安装 Node.js 和 Express
要创建 SSE 应用程序，我们需要先安装 Node.js 和 Express。您可以使用 Node.js 官方网站的指南进行安装并使用以下命令：
npm install expressSSE 应用
创建 SSE 应用程序通常需要两个步骤。首先，我们需要为 SSE 配置一个路由，以便客户端可以访问它。其次，我们需要在服务器端为 SSE 连接发送数据。
路由配置
我们将在Express中创建一个简单的路由，该路由将与 SSE 连接一起使用。路由将返回一个 HTML 页面，该页面将包含一些 JavaScript 代码，该代码将在 SSE 连接时向服务器发送请求。
-- -------------------- ---- ------- ----- ------- - ------------------ ----- --- - --------- ------------ ----- ---- -- - ---------------------- - --------------- -- ----- ---- - ---- ---------------- -- -- - ---------------- --------- -- -------------------------- --展开代码
服务器端 SSE 部分
我们将创建一个名为 /sse 的路由，并使用 res.writeHead() 方法将适当的响应头发送到客户端。 在我们的服务器端 SSE 部分，我们将向客户端发送一些消息。
-- -------------------- ---- ------- ----- ------- - ------------------ ----- --- - --------- ------------ ----- ---- -- - ---------------------- - --------------- -- --------------- ----- ---- -- - ------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------ -- -------------- -- - ---------------- - - --- --------------------------- - ------- -- ----- -- ----- ---- - ---- ---------------- -- -- - ---------------- --------- -- -------------------------- --展开代码
在上面的代码中，我们向客户端发送了一个持续的 loop。每秒钟，我们都会向客户端发送当前时间的消息。
SSE 客户端
在 SSE 客户端部分，我们将设置一个简单的事件侦听器，该侦听器将监听来自服务器的事件。连接 SSE 的客户端会随时接收新的消息。
-- -------------------- ---- ------- --------- ----- ------ ------ ---------- --------------- ------- ------ ---- --------- ---------- ---- ------ ------------ ------ -------- --- --- - --- ------------------- ------------- - -------- ------- - ----------------------- ---------------------------------------- -- ---------- - ------ - --------- ------- -------展开代码
以上代码会将连接到 /sse 的服务器并监听服务器发出的消息。将消息加载到页面中的 #sse 元素中。
启动应用程序，然后使用浏览器打开指向 localhost:3000 的页面。在本例中，您应该能够向页面添加一些 SSE 的数据。
结论
如上所述，使用 Node.js 和 Express 创建 SSE 应用程序非常简单。使用 SSE，您可以实时更新某些数据而无需重新加载整个页面。 SSE 可以用于各种简单和复杂的应用程序，比如聊天和实时监视。
在本例中，我们实现了一个基本的 SSE 应用程序，希望这个教程对您有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677129396d66e0f9aacc3bd6
