在前端开发中，创建实时聊天应用是一个常见的需求。传统的实现方式是使用 WebSocket 技术，但是在某些情况下，WebSocket 可能会受到防火墙的限制，因此 Server-Sent Events（SSE）成为了另一个可选的方案。
本文将介绍如何使用 SSE 创建一个简单的聊天应用，包括 SSE 的基本概念、如何在前端和后端实现 SSE，并提供完整的示例代码。
SSE 简介
Server-Sent Events 是一种基于 HTTP 的实时通信技术，它允许服务器向客户端推送新数据，而不需要客户端发送请求。与 WebSocket 不同，SSE 使用标准的 HTTP 协议，因此不需要特殊的协议支持或端口打开。
SSE 的核心是 EventSource 对象，它是浏览器提供的 API，用于接收来自服务器的事件。当服务器发送一个事件时，EventSource 对象会触发 message 事件，从而让前端代码能够获取到新的数据。
实现 SSE
前端实现
在前端，我们需要创建一个 EventSource 对象，并监听 message 事件。当有新的数据到达时，我们可以通过该事件的 data 属性获取到数据，然后将其显示在页面上。
----- ----------- - --- --------------------- --------------------------------------- ------- -- - ----- ------- - ----------------------- -- --------- ---
在上述代码中，我们创建了一个 EventSource 对象，并将其连接到 /chat 路径。当服务器发送一个事件时，message 事件会被触发，我们可以通过 event.data 获取到事件的数据。
后端实现
在后端，我们需要创建一个 HTTP 服务器，并监听 /chat 路径。当有新的消息到达时，我们可以使用 SSE 协议将其发送给客户端。
下面是一个使用 Node.js 和 Express 框架实现的 SSE 服务器示例：
----- ------- - -------------------
----- --- - ----------
-- -- ----- --
---------------- ----- ---- -- -
-- ------------ --- --
----------------------------- ---------------------
------------------------------ ------------
-- ------- --- ---------
----------------- -----------------
-- ------------------
------------------ --------- -- -
---------------- ---------------------------------
---
---
-- -----
----- ------ - -----------------在上述代码中，我们创建了一个 Express 应用，并监听 /chat 路径。当客户端连接到该路径时，我们设置响应头表明返回的是 SSE 数据，并发送一个初始的 SSE 事件，用于保持连接。
当有新的消息到达时，我们将其发送给客户端，使用的是 SSE 协议中的 data 字段。注意，每个事件都必须以两个换行符结尾，否则客户端无法正确解析。
完整示例代码
下面是一个完整的 SSE 聊天应用示例，包括前端和后端代码。
前端代码
--------- -----
------
------
----- ----------------
---------- ------------
-------
------
--- -------------------
------
------ ---------- ----------- -------------------
---------------------
-------
--------
----- ----------- - --- ---------------------
----- -------- - ------------------------------------
----- ----- - ---------------------------------
--------------------------------------- ------- -- -
----- ------- - -----------------------
----- -- - -----------------------------
------------ - --------------------- -----------------
-------------------------
---
--------------------------------------------------------- ------- -- -
-----------------------
----- ------- - -
--------- --------
----- -----------
--
-------------- -
------- -------
-------- -
--------------- ------------------
--
----- -----------------------
---
----------- - ---
---
---------
-------
-------后端代码
----- ------- - -------------------
----- ---------- - -----------------------
----- ------------ - ------------------
----- --- - ----------
-- ------- ---- --
---------------------------
-- ---- ------------ ---------
----- ---- - --- ---------------
-- -- ----- --
---------------- ----- ---- -- -
-- ------------ --- --
----------------------------- ---------------------
------------------------------ ------------
-- ------- --- ---------
----------------- -----------------
-- ------------------
------------------ --------- -- -
---------------- ---------------------------------
---
---
-- ----------
----------------- ----- ---- -- -
----- ------- - ---------
-------------------- ---------
--------------------
---
-- -----
----- ------ - -----------------总结
本文介绍了如何使用 Server-Sent Events 创建一个简单的聊天应用，包括 SSE 的基本概念、如何在前端和后端实现 SSE，并提供完整的示例代码。SSE 可以作为一种替代 WebSocket 的方案，在某些情况下具有一定的优势。如果您需要创建实时通信应用，请考虑使用 SSE 技术。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65fbf17ed10417a22277e576