在现代 Web 应用程序中，即时通信已成为一项必不可少的功能。使用 Server-Sent Events（SSE）和 Node.js，您可以轻松地创建即时 Web 应用程序。SSE 是一种 Web 技术，它允许服务器主动向客户端推送数据。
在本文中，我们将介绍如何使用 SSE 和 Node.js 创建一个简单的即时 Web 应用程序。我们将从介绍 SSE 的基本概念开始，然后讨论如何使用 Node.js 实现 SSE 服务器。最后，我们将创建一个示例应用程序，演示如何使用 SSE 在客户端和服务器之间进行实时通信。
SSE 的基本概念
SSE 是一种 Web 技术，它允许服务器向客户端推送数据。与传统的 AJAX 请求不同，SSE 不需要客户端发起请求。相反，服务器将数据发送到客户端，这使得 SSE 成为一种非常有效的实时通信方式。
SSE 是基于 HTTP 协议的，因此它与现有的 Web 技术集成得非常好。与 WebSocket 不同，SSE 不需要额外的协议或握手过程。它使用纯文本的 HTTP 协议，因此可以在任何支持 HTTP 的环境中使用。
SSE 使用了一个称为“事件流”的协议。服务器将数据作为事件流发送到客户端，客户端可以使用 JavaScript 代码来捕获这些事件。每个事件都包含一个事件类型和一个数据字段，客户端可以根据事件类型来处理数据。
使用 Node.js 实现 SSE 服务器
现在，让我们来看看如何使用 Node.js 实现 SSE 服务器。我们将使用 http 模块创建一个 HTTP 服务器，然后使用 SSE 发送数据。
首先，我们需要导入 http 和 fs 模块：
const http = require('http');
const fs = require('fs');然后，我们创建一个 HTTP 服务器：
const server = http.createServer((req, res) => {
// ...
});在请求处理程序中，我们需要设置响应头，以便客户端知道我们正在使用 SSE：
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});接下来，我们可以使用 setInterval 函数向客户端发送数据。在这个例子中，我们将每隔一秒发送一个简单的事件：
setInterval(() => {
res.write(`event: message\n`);
res.write(`data: Hello, world!\n\n`);
}, 1000);最后，我们需要监听端口并启动服务器：
server.listen(3000, () => {
console.log('Server running on port 3000');
});现在，我们已经创建了一个简单的 SSE 服务器。当客户端连接到服务器时，它将开始接收事件流。
示例应用程序
现在，让我们创建一个简单的示例应用程序，演示如何使用 SSE 在客户端和服务器之间进行实时通信。我们将创建一个聊天应用程序，允许用户发送消息并将其广播给所有连接到服务器的客户端。
首先，我们需要创建一个 HTML 文件，用于显示聊天消息和允许用户发送新消息：
-- -------------------- ---- -------
--------- -----
------
------
-------------------
-------
------
--- -------------------
------
------ ------------ -------------------
---------------------
-------
--------
----- -------- - ------------------------------------
----- ------------ - -----------------------------------
----- ---------- - ---------------------------------
----- ------ - --- ---------------------
---------------------------------- ----- -- -
----- -- - -----------------------------
-------------- - -----------
-------------------------
---
------------------------------------ ----- -- -
-----------------------
----- ------- - -------------------
------------------ - ---
-------------- -
------- -------
----- -------
---
---
---------
-------
-------在这个 HTML 文件中，我们创建了一个 <ul> 元素，用于显示聊天消息。我们还创建了一个表单，允许用户发送新消息。当用户发送新消息时，我们使用 fetch 函数将消息发送到服务器。
现在，让我们来看看服务器端的代码。我们将使用与之前相同的 SSE 服务器代码，但是我们将在请求处理程序中处理 POST 请求，并将消息广播给所有连接到服务器的客户端：
-- -------------------- ---- -------
----- ------ - ----------------------- ---- -- -
-- ----------- --- ------ -- ------- --- -------- -
--- ---- - ---
-------------- ----- -- -
---- -- -----------------
---
------------- -- -- -
----------
---------------------- -- -
------------------- --------------
---
---
- ---- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
----------------
------------------
--------------- -- -- -
------------------------------------ ---
---
-
---在这个代码中，我们检查请求的方法和路径是否为 /chat，如果是，我们将消息广播给所有连接到服务器的客户端。我们使用一个数组来跟踪所有连接到服务器的客户端，当客户端连接时，我们将其添加到数组中。当客户端断开连接时，我们从数组中删除它。
现在，我们已经创建了一个简单的聊天应用程序，允许用户发送消息并将其广播给所有连接到服务器的客户端。这个应用程序只是一个简单的示例，但它演示了如何使用 SSE 在客户端和服务器之间进行实时通信。
结论
在本文中，我们介绍了使用 SSE 和 Node.js 创建即时 Web 应用程序的基本概念。我们讨论了 SSE 的原理和如何使用 Node.js 实现 SSE 服务器。最后，我们创建了一个简单的示例应用程序，演示了如何使用 SSE 在客户端和服务器之间进行实时通信。
使用 SSE 和 Node.js，您可以轻松地创建高效的即时 Web 应用程序。无论是聊天应用程序还是实时博客，SSE 都是一种非常有效的实时通信方式。希望这篇文章能够帮助您开始使用 SSE 和 Node.js 创建您自己的即时 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67541cf41b963fe9cc4c4e91