在 Web 开发中,有时需要实时更新某些数据,比如聊天更新、持续监视服务器端的更新以及用户交互的通知。 Server-Sent 事件(SSE)使这些任务变得容易而简单。
SSE 是一种轻便的服务器到客户端通讯协议,用于实现服务器向客户端推送数据。使用 SSE,服务器可以向客户端推送新的数据,而无需浏览器重新请求,这可以极大地加快网站的速度。
在本篇文章中,我们将使用 Node.js 和 Express 来创建一个基本的 SSE 应用程序。
安装 Node.js 和 Express
要创建 SSE 应用程序,我们需要先安装 Node.js 和 Express。您可以使用 Node.js 官方网站的指南进行安装并使用以下命令:
npm install express
SSE 应用
创建 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