前言
在现代 web 应用中，实时性变得越来越重要，用户希望能够接收到即时更新的信息，而不需要手动刷新页面。Server-Sent Events（SSE）正是一个很好的实现即时更新的方式之一。SSE 是一种客户端和服务器之间的单向通信方式，它允许服务器向客户端推送事件流，这些事件流可以是任何数据类型，包括 JSON、XML 和普通文本等。
在本文中，我们将使用 SSE 实现一个简单的聊天应用，演示 SSE 的基本应用和如何在前端应用中使用 SSE。
准备工作
在开始本文之前，我们需要准备以下工作：
- 一个基本的 HTTP 服务器（使用 Node.js、Python Flask 或其他 HTTP 服务器皆可）
- 一个支持 SSE 的浏览器（几乎所有现代浏览器都支持 SSE）
在我的演示中，我将使用 Node.js 作为 HTTP 服务器，但也可以使用其他工具。需要注意的是，SSE 只适用于单向通信，如果需要实现双向通信，可以考虑使用 WebSocket。
简单聊天应用
我们的聊天应用将非常简单，有两个页面：一个是发送聊天消息的页面，一个是显示聊天消息流的页面。当用户在发送消息页面上输入内容并点击发送时，消息将发送到服务器，并通过 SSE 推送给所有客户端。消息流页面将使用 SSE 实时更新消息。
服务器端
首先，我们需要设置一个 HTTP 服务器，用于处理客户端的请求、处理 API 调用和 SSE 事件流的处理。在这个演示中，我们将使用 Node.js 和 express.js 框架。这是一个非常基本的服务器端代码，它包含两个路由：
/：显示发送消息页面/messages：处理消息发送 API 和 SSE 事件流
-- -------------------- ---- -------
----- ------- - -------------------
----- ---------- - -----------------------
----- --- - ----------
---------------------------
------------ ----- ---- -- -
---------------------- - ---------------
---
-------------------- ----- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
----------- -------------
---
----------------- ----------
-- ----- --------------- --- ---
---
--------------------- ----- ---- -- -
-- ----- ------
---
---------------- -- -- -
------------------- -----------
---在 GET /messages 的路由中，我们使用 res.writeHead() 将响应头设置为 SSE 格式，并使用 res.write() 向客户端发送事件流。在 POST /messages 的路由中，我们将处理新的消息，并将之存储在数组中。我们将在下一节中继续讨论这些内容。
信息存储
我们需要在服务器端存储所有的消息，以便在新消息到达时，可以将它们推送给所有已连接的客户端。在这个简单的演示中，我们将使用一个数组来执行此任务。
-- -------------------- ---- -------
--- -------- - ---
-- ------
--------------------- ----- ---- -- -
----- ------- - ---------
-----------------------
------------------
---
-- -----
-------------------- ----- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
----------- -------------
---
----------------- ----------
----- -- - ----------------
-------------------------- ------ -- -
-- ------ -- --- -
---------------- ---------------------------------
-
---
----- ---------- - -------------- -- -
-- ---------------- - --- -
------------------------------------ -- -
---------------- ---------------------------------
---
-- - ----------------
-
-- ------
--------------- -- -- -
--------------------------
---
---在 POST /messages 的路由中，我们将新消息存储在 messages 中。在 GET /messages 的路由中，我们先将响应头设置为 SSE 格式，然后将事件流推送给客户端。我们处理所有消息并向客户端发送最新的消息。我们使用 setInterval() 定期检查客户端是否有新消息，如果有新消息，则发送消息。如果没有，则保持连接。最后，我们在 req.on('close') 事件中清除定时器。
客户端
在客户端中，我们将使用 EventSource API 来监听 SSE 事件流，并在事件发生时更新消息流。
-- -------------------- ---- ------- ----- ---------------- - ------------------------------------ ----- ------ - --- ------------------------- ------------- - -- -- - ---------------- ---------- ------- -- ---------------------------------- ------- -- - ----- ------- - ----------------------- -------------------------- -- ---------------------- --------------------- --- -------------- - ------- -- - --------------------- --
在客户端中，我们使用 new EventSource() 创建一个 SSE 连接，指向服务器端的 /messages 路由。在 onopen 事件处理程序中，我们可以记录 SSE 连接是否已经打开。在 addEventListener() 中，我们处理来自服务器的消息，并将其插入到页面的代码中。onerror 处理程序将所有连接错误输出到控制台。
发送聊天消息
最后，我们将创建发送聊天消息的页面。
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
---------- ---- - ------------
-------
------
------- ---- --------
----- ------------------
------ --------------------------
------ ----------- ----------- ------------- --
--- --
------ ------------------------------
--------- ------------ -----------------------
--- --
------ ------------- ------------ --
-------
--------
----- ---- - ----------------------------------------
------------------------------- ------- -- -
-----------------------
----- ------- - -
------- --------------------------
----- ------------------------
--
------------------ -
------- -------
-------- -
--------------- -------------------
--
----- ------------------------
---
---------------------
---
---------
-------
-------在这个页面中，我们向 /messages 发送 POST 请求，并将消息数据序列化为 JSON 格式。这将触发服务器端的 POST /messages 路由，将数据存储到 messages 中。
结论
在本文中，我们创建了一个使用 SSE 实现的简单聊天应用，并演示了如何使用 Node.js 和 express.js 作为 HTTP 服务器，并使用 EventSource API 监听 SSE 事件流和向客户端发送消息。SSE 不仅可以实现聊天应用，还可以用于实时更新数据和网络游戏等其他用途。希望本文能够为您提供一些有关 SSE 和如何在前端应用中使用 SSE 的信息和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67766fea6d66e0f9aa24a901