在前端开发中，实时通信是一个非常重要的需求，例如在线聊天室、实时通知等。而 SSE（Server-Sent Events）是一种实现实时通信的技术，它可以让服务器向客户端推送数据，而不需要客户端不断地向服务器发送请求。
本文将介绍如何使用 SSE 实现一个简单的在线聊天室。我们将使用 Node.js 作为后端，Express 作为框架，以及 Vanilla JavaScript 作为前端。
服务器端实现
首先，我们需要创建一个 Node.js 项目，并安装 express 和 cors（用于跨域请求）：
$ mkdir sse-chat-room $ cd sse-chat-room $ npm init -y $ npm install express cors
接下来，我们创建一个 express 应用，并启用 cors：
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());然后，我们创建一个路由处理 SSE 请求。在这个路由中，我们使用 res.writeHead 方法设置响应头，告诉客户端这是一个 SSE 响应，并设置响应数据的格式为 text/event-stream。然后，我们使用 setInterval 方法每隔一秒钟向客户端发送一条数据：
-- -------------------- ---- -------
---------------- ----- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----- ---- - ------ ----- ----------------------------------
----------------
-- ------
---在这个例子中，我们每隔一秒钟向客户端发送一条数据，数据格式为 data: [数据]\n\n。其中，[数据] 可以是任意字符串。注意，每条数据的结尾必须是两个换行符 \n\n。
最后，我们在应用中启动服务器：
const server = app.listen(3000, () => {
console.log('Server listening on port 3000');
});至此，我们已经完成了服务器端的实现。
客户端实现
接下来，我们通过一个简单的 HTML 页面来演示如何使用 SSE 实现在线聊天室。首先，我们创建一个 HTML 文件，并在其中添加一个文本框、一个按钮和一个 <ul> 元素，用于显示聊天记录：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ---------- ---- ------------ ------- ------ ------ ----------- ------------ ------------------- ------- --------------------- --- --------------- ------- ---------------------- ------- -------
然后，我们在 app.js 中编写客户端代码。首先，我们创建一个 EventSource 对象，用于接收服务器推送的数据：
const source = new EventSource('http://localhost:3000/chat');然后，我们为 EventSource 对象的 onmessage 事件添加一个处理函数，用于将接收到的数据添加到聊天记录中：
source.onmessage = (event) => {
const chat = document.getElementById('chat');
const message = document.createElement('li');
message.innerText = event.data;
chat.appendChild(message);
};最后，我们为发送按钮添加一个点击事件处理函数，用于向服务器发送消息：
-- -------------------- ---- -------
----- ---------- - --------------------------------
------------------ - -- -- -
----- ------------ - -----------------------------------
----- ------- - -------------------
------------------ - ---
----------------------------------- -
------- -------
-------- -
--------------- ------------------
--
----- ---------------- ------- --
---
--在这个例子中，我们使用 fetch 方法向服务器发送 POST 请求，并将消息作为 JSON 数据发送。服务器端的实现可以参考下面的代码：
app.post('/send', (req, res) => {
const message = req.body.message;
console.log(`Received message: ${message}`);
res.sendStatus(200);
});至此，我们已经完成了客户端的实现。
总结
通过本文的介绍，我们了解了 SSE 技术的基本原理，并学习了如何使用 SSE 实现一个简单的在线聊天室。同时，我们也了解了如何使用 Node.js 和 Express 框架来实现服务器端的逻辑，并使用 Vanilla JavaScript 来实现客户端的逻辑。
在实际应用中，我们可以将 SSE 技术应用于各种实时通信场景，例如在线游戏、实时监控、实时数据展示等。同时，我们也可以结合其他技术，例如 WebSocket、Long Polling 等，来实现更加复杂的实时通信需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657ad8c6d2f5e1655d5554ff