概述
SSE （Server-Sent Events）是一种用来实现服务器端到浏览器端的持续连接的技术，可以很好地用来实现像聊天室这样需要实时更新数据的应用。
在本文中，我们将介绍如何使用 SSE 建立一个类似于聊天室的应用，并提供相应的示例代码。
准备工作
在开始之前，我们需要先了解一些 SSE 的基础知识：
- SSE 基于 HTTP 协议，因此它不需要使用特定的协议或插件。
- SSE 使用 EventSource 接口来与服务器进行通信。
- 与传统的 Ajax 不同，SSE 使用的是单向连接，即数据只能从服务器端流向客户端。
接下来，我们将介绍如何在客户端和服务器端分别实现 SSE 通信。
客户端实现
在客户端，我们需要通过 JavaScript 中的 EventSource 接口来建立与服务器的连接，并接收来自服务器端的消息。
const source = new EventSource('/chat');
source.addEventListener('message', event => {
// 处理来自服务器端的消息
const data = JSON.parse(event.data);
console.log(data);
});上述代码创建了一个 EventSource 对象，它与服务器端的地址是 '/chat'，客户端通过监听 'message' 事件来接收来自服务器的消息。
当服务器端发送消息时，客户端会触发 'message' 事件，并将 event.data 属性传递给回调函数。在这里，我们将 event.data 转换为 JSON 对象，并将其打印到控制台上。
接下来，我们需要在服务器端实现 SSE 通信。
服务器端实现
在服务器端，我们需要遵循 SSE 的规范，向客户端发送包含一些特定字段的数据。
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
-- -----
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-- ----
-------------- -- -
----- ---- - -
----- ------
-------- ------ -------
--
---------------- ------------------------------
-- ------
----------------上述代码创建了一个 HTTP 服务器，客户端可以通过地址 'http://localhost:3000/chat' 来连接这个服务器。
在创建服务器的回调函数中，我们首先设置了响应头，包括 'Content-Type'、'Cache-Control' 和 'Connection' 三个字段，这是 SSE 规范的一部分。
接着，我们使用 setInterval 定时发送数据。在这里，我们将数据存储在一个对象中，并使用 res.write() 方法将其写入响应流中。需要注意的是，每次数据之间需要通过 '\n\n' 来进行分隔，这是 SSE 规范的要求。
通过以上步骤，我们已经可以建立起 SSE 通信，并实现了数据的实时接收和发送。接下来，我们将利用 SSE 建立一个简单的聊天室应用。
构建聊天室应用
在前面的代码基础上，我们可以通过添加一些交互逻辑，来实现一个简单的聊天室应用。
首先，我们需要在客户端添加一个表单，用于输入用户名和消息。
<form id="message-form"> <input type="text" id="name-input" placeholder="输入昵称"> <input type="text" id="message-input" placeholder="输入消息"> <button type="submit">发送</button> </form>
接着，我们需要监听表单的提交事件，并通过 XMLHttpRequest（或 fetch）来向服务器发送消息。
-- -------------------- ---- ------- ----- ---- - ---------------------------------------- ------------------------------- ----- -- - ----------------------- ----- ---- - -------------------------------------------- ----- ------- - ----------------------------------------------- ----- --- - --- ----------------- ---------------- --------- ------------------------------------ -------------------- ------------------------- ----- ------- ---- ---
以上代码监听表单的提交事件，并使用 XMLHttpRequest 发送了一个 POST 请求，内容是一个包含用户名和消息的 JSON 对象。
最后，我们需要在服务器端接收并处理这个请求。在代码中，我们首先使用 bodyParser 中间件来解析请求体，然后将数据转发给 SSE 通道。通道会将数据发送给所有连接到服务器的客户端。
-- -------------------- ---- -------
----- ------- - -------------------
----- ---------- - -----------------------
----- --- - ----------
-- -- --- --
----- ------- - --- ------
-------- ------------------- -
--- ------ ------ -- -------- -
------------------- ------------------------------
-
-
---------------------------
-- --- --
---------------- ----- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-----------------
--------------- -- -- -
--------------------
---
---
-- ---- --
----------------- ----- ---- -- -
----- - ----- ------- - - ---------
--------------- ----- ------- ---
---------------
---
-----------------通过以上代码，我们已经成功地构建了一个基于 SSE 技术的聊天室应用。
总结
本文介绍了如何使用 SSE 技术来建立一个实时聊天室应用，并提供了相应的示例代码。
SSE 技术可以实现服务器与客户端之间的持续连接，并支持单向数据流，适用于需要实时更新数据的应用场景。
如果您对 SSE 技术感兴趣，可以继续深入学习其它相关技术，例如 WebSocket、长轮询等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647ca031968c7c53b079d98d