在网页应用程序中实现实时聊天是一个常见的需求，在过去的几年中，我们已经看到了许多解决方案，其中包括 WebSocket，AJAX 长轮询和 Server-Sent Events（SSE）等。
本文将介绍如何使用 SSE 在浏览器中实现简单实时聊天，并提供一个完整的示例代码，以便读者更好地理解和使用 SSE 技术。
SSE 简介
Server-Sent Events（SSE）是一种浏览器与服务器之间的通信协议，它允许服务器向客户端发送事件流（Event Stream）。在 SSE 中，浏览器与服务器之间仅需建立一条 HTTP 连接，即可通过该连接不断地发送数据。
SSE 与 AJAX 长轮询和 WebSocket 相比，具有以下优势：
- SSE 仅使用 HTTP 连接，无需升级到 WebSocket 或其他协议，降低了实现和维护的成本。
- SSE 消息可以被缓存和重试，从而在不重新启动连接的情况下重新发送。
- SSE 是一种纯文本格式，易于阅读和调试。
实现 SSE 聊天应用程序
为了实现 SSE 聊天应用程序，我们需要遵循以下步骤：
1. 建立 SSE 连接
我们需要创建一个 SSE 连接，并在服务器端向客户端发送消息。
在客户端，我们可以通过以下代码建立 SSE 连接：
const source = new EventSource('/stream');其中，'/stream' 是 SSE 事件流的 URL，我们将在服务器端创建该事件流。
在服务器端，我们需要设置响应头并输出 SSE 事件流，示例代码如下：
-- -------------------- ---- ------- ------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------ --- ---------------- ----- ---------- - -------------- -- - ---------------- ----- ----------------------------------- -- ------ ----------------------------------- -- -- - -------------------------- ------------------- --------------- ---------- ---
其中，'Content-Type' 表示响应内容是 SSE 事件流，'Cache-Control' 告诉浏览器不要缓存事件流，'Connection' 表示使用长连接。
在创建 SSE 响应之后，我们设置了一个定时器，每隔 1 秒钟向客户端发送一条消息。注意，每条消息要以 'data:' 开头，以 '\n\n' 结束。
2. 接收 SSE 消息并显示在客户端
接下来，我们需要在客户端接收 SSE 消息，并将其显示在页面上。
我们可以通过以下代码接收 SSE 消息：
source.addEventListener('message', event => {
console.log(event.data);
});在接收到消息后，我们可以将其显示在页面上。以下代码显示在页面上：
const chatWindow = document.getElementById('chat-window');
chatWindow.innerHTML += `(${new Date().toLocaleTimeString()}) ${message}<br>`;完整的示例代码
以下是完整的示例代码，包含了前述所有步骤：
服务端代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ---- - -----
----- ------ - ----------------------- ---- -- -
-- -------- --- ---------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
----------------
----- ---------- - -------------- -- -
---------------- ----- -----------------------------------
-- ------
----------------------------------- -- -- -
--------------------------
------------------- ---------------
----------
---
- ---- -
-------------- ----------
-
---
------------------- -- -- -
------------------- ------- -- ----------------------------
---客户端 HTML 和 JavaScript 代码：
-- -------------------- ---- -------
--------- -----
------
------
---------- ---- -----------
-------
------
---- -----------------------
------ ----------- -------------
------- ------------------------------
--------
----- ---------- - ---------------------------------------
----- ------------ - -----------------------------------
----- ---------- - ---------------------------------------
----- ------ - --- -----------------------
---------------------------------- ----- -- -
----- ------- - -----------
-------------------- -- ------- ----------------------------- ----------------
---
------------------------------------ -- -- -
----- ------- - -------------------
---------------------- -
------- -------
-------- -
--------------- ------------------
--
----- -------------------------
---
------------------ - ---
---
---------
-------
-------总结
本文介绍了如何使用 SSE 在浏览器中实现简单实时聊天。通过建立 SSE 连接，并在服务器端向客户端发送消息，我们可以实现一个简单的 SSE 聊天应用程序。SSE 还有许多其他用途，例如实时数据更新和通知等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646f2c56968c7c53b0d91dc2