Nodejs+Express+Server-Sent Events(服务器向浏览器端推送事件通知)

阅读时长 4 分钟读完

在 Web 开发中,有时需要实时更新某些数据,比如聊天更新、持续监视服务器端的更新以及用户交互的通知。 Server-Sent 事件(SSE)使这些任务变得容易而简单。

SSE 是一种轻便的服务器到客户端通讯协议,用于实现服务器向客户端推送数据。使用 SSE,服务器可以向客户端推送新的数据,而无需浏览器重新请求,这可以极大地加快网站的速度。

在本篇文章中,我们将使用 Node.js 和 Express 来创建一个基本的 SSE 应用程序。

安装 Node.js 和 Express

要创建 SSE 应用程序,我们需要先安装 Node.js 和 Express。您可以使用 Node.js 官方网站的指南进行安装并使用以下命令:

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

纠错
反馈

纠错反馈