实时应用程序是现代 Web 应用程序的一项重要功能。它们可以提供实时更新，从而改善用户体验并增强应用程序的交互性。在这篇文章中，我们将介绍如何利用 Server-sent Events 来构建实时应用程序。
什么是 Server-sent Events？
Server-sent Events（SSE）是一种 Web 技术，它允许服务器向客户端推送实时数据。与传统的轮询技术相比，SSE 是一种更高效、更可靠的实时通信方式。它使用 HTTP 协议，因此可以在现代 Web 浏览器中轻松实现。
如何使用 Server-sent Events？
在客户端，我们可以使用 JavaScript API 来订阅 SSE。订阅 SSE 的代码如下所示：
const eventSource = new EventSource('/events');
eventSource.onmessage = event => {
const data = JSON.parse(event.data);
console.log(data);
};在服务器端，我们需要设置 SSE 的路由。下面是一个使用 Node.js 和 Express 框架的示例代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
------------------ ----- ---- -- -
---------
---------------- -----------
--------------- --------------------
------------- ------------
---
-------------- -- -
----- ---- - - -------- ------- ------- --
---------------- ------------------------------
-- ------
---在这个示例中，我们设置了 /events 路由，它会每秒钟向客户端推送一条消息。
实时聊天应用程序示例
现在，我们来构建一个实时聊天应用程序示例。我们将使用 Node.js、Express 和 SSE 来实现它。以下是应用程序的基本结构：
. ├── public │ └── index.html ├── server.js └── package.json
首先，我们需要安装 Express 和 body-parser：
npm install express body-parser --save
接下来，我们创建 server.js 文件并添加以下代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---------- - -----------------------
----- --- - ----------
------------------------------- --------- ----- ----
----------------------------------
--- ------- - ---
------------------ ----- ---- -- -
---------
---------------- -----------
--------------- --------------------
------------- ------------
---
------------------
--------------- -- -- -
------- - --------------------- -- ------ --- -----
---
---
--------------------- ----- ---- -- -
----- ------- - -----------------
---------------------- -- -
------------------- ------------------ ------- ----------
---
---------------
---
---------------- -- -- -
------------------- ------- -- ------------------------
---在这个示例中，我们创建了两个路由。/events 路由用于 SSE，/messages 路由用于接收客户端发送的消息。我们使用 clients 数组来存储所有已连接的客户端。
在客户端，我们创建 public/index.html 文件并添加以下代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- ------------
-------
------
--- -------------------
----- ------------------
------ ----------- -------------------
------- ---------------------------
-------
--------
----- -------- - ------------------------------------
----- ----------- - ----------------------------------------
----- ------------ - -----------------------------------------
----- ----------- - --- -----------------------
--------------------- - ----- -- -
----- ---- - -----------------------
------------------ -- ---------------------------
--
-------------------------------------- ----- -- -
-----------------------
----- ------- - -------------------
------------------ -
------- -------
-------- - --------------- ----------------------------------- --
----- ----------------------------------------
---
------------------ - ---
---
---------
-------
-------在这个示例中，我们创建了一个简单的聊天界面。当用户发送一条消息时，我们使用 fetch API 将消息发送到服务器。当服务器收到消息时，它会将消息发送给所有已连接的客户端。
总结
Server-sent Events 是一种强大的 Web 技术，它可以帮助我们构建高效、可靠的实时应用程序。在本文中，我们介绍了如何使用 SSE 来构建实时应用程序，并提供了一个实时聊天示例。希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651016ef95b1f8cacd8b8c89