使用 Server-Sent Events 和纯 JavaScript 进行实时通信
在前端开发中，实时通信往往是不可或缺的一环。传统的实时通信方式包括 WebSocket 和 AJAX 轮询，但它们都有它们的缺点。WebSocket 需要服务器端和客户端都支持，而 AJAX 轮询则需要频繁发送请求，容易给服务器带来压力。而 Server-Sent Events（SSE）则是一种新兴的解决方案，它只需要服务器端支持，能够稳定高效地进行实时通信。
本文将会详细地介绍如何使用 SSE 和纯 JavaScript 实现实时通信，并提供相应的代码示例。首先，让我们了解一下 SSE 的基本知识。
SSE 是一种浏览器和服务器通信的标准方式，它使用 HTTP 协议，服务器向客户端发送一次连接请求，然后客户端保持该连接打开，直到服务器发送信息。与 Ajax 请求不同，SSE 是单向连接，服务器只向客户端发送通知，而不接收客户端请求。
接下来，我们来看一下如何使用 SSE 实现实时通信。首先，创建一个 HTML 页面：
// javascriptcn.com 代码示例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>SSE 实时通信</title> </head> <body> <h1>SSE 实时通信</h1> <div id="message"></div> </body> </html>
我们需要在页面中添加一个用来显示接收到的信息的 div：
<div id="message"></div>
接下来，我们来编写 JavaScript 代码。首先创建一个 EventSource 对象，然后指定要监听的服务器地址：
const eventSource = new EventSource('http://localhost:3000/sse');然后，我们需要为该对象设置 onmessage 回调函数，当服务器发送信息时调用该回调函数，并将信息展示在页面上：
eventSource.onmessage = function(event) {
const messageDiv = document.getElementById('message');
messageDiv.innerHTML = event.data;
};最后，我们来创建服务器端代码。我们使用 Node.js 创建一个服务器，然后通过 Express 框架和 SSE 中间件实现服务器端推送信息。首先，安装相关依赖：
npm install express npm install express-sse
然后，创建服务器代码：
// javascriptcn.com 代码示例
const express = require('express');
const SSE = require('express-sse');
const app = express();
const sse = new SSE();
app.get('/sse', sse.init);
setInterval(() => {
sse.send(Math.random());
}, 1000);
app.listen(3000, () => {
console.log('SSE listening on port 3000');
});我们使用 setInterval 定时向客户端推送信息，并使用 SSE 中间件将信息发送到客户端。最后，使用 Express 启动服务器，并监听 3000 端口。
最终，我们可以在浏览器中运行该页面，实现实时通信。每隔1秒，服务器会向客户端发送一条随机数。该随机数会被展示在页面上。
在实际开发中，我们可以根据需要自定义消息，或者将 SSE 与其他技术结合使用，实现更强大的实时通信功能。
总结
本文介绍了使用 SSE 和纯 JavaScript 实现实时通信的方法。使用 SSE 与 WebSocket 和 AJAX 轮询相比，具有更稳定，更高效的特点。通过本文的介绍，我们可以了解 SSE 的基本知识，并使用实例代码实现基本的实时通信功能。我们相信，该技术对于实际开发中的实时通信需求是非常有指导意义的。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654797297d4982a6eb1f09c0