使用 Server-Sent Events 和纯 JavaScript 进行实时通信
在前端开发中，实时通信往往是不可或缺的一环。传统的实时通信方式包括 WebSocket 和 AJAX 轮询，但它们都有它们的缺点。WebSocket 需要服务器端和客户端都支持，而 AJAX 轮询则需要频繁发送请求，容易给服务器带来压力。而 Server-Sent Events（SSE）则是一种新兴的解决方案，它只需要服务器端支持，能够稳定高效地进行实时通信。
本文将会详细地介绍如何使用 SSE 和纯 JavaScript 实现实时通信，并提供相应的代码示例。首先，让我们了解一下 SSE 的基本知识。
SSE 是一种浏览器和服务器通信的标准方式，它使用 HTTP 协议，服务器向客户端发送一次连接请求，然后客户端保持该连接打开，直到服务器发送信息。与 Ajax 请求不同，SSE 是单向连接，服务器只向客户端发送通知，而不接收客户端请求。
接下来，我们来看一下如何使用 SSE 实现实时通信。首先，创建一个 HTML 页面：
--------- ----- ------ ------ ----- ---------------- ---------- ------------ ------- ------ ------- --------- ---- ------------------- ------- -------
我们需要在页面中添加一个用来显示接收到的信息的 div：
---- -------------------
接下来，我们来编写 JavaScript 代码。首先创建一个 EventSource 对象，然后指定要监听的服务器地址：
----- ----------- - --- -----------------------------------------
然后，我们需要为该对象设置 onmessage 回调函数，当服务器发送信息时调用该回调函数，并将信息展示在页面上：
--------------------- - --------------- - ----- ---------- - ----------------------------------- -------------------- - ----------- --
最后，我们来创建服务器端代码。我们使用 Node.js 创建一个服务器，然后通过 Express 框架和 SSE 中间件实现服务器端推送信息。首先，安装相关依赖：
--- ------- ------- --- ------- -----------
然后，创建服务器代码：
----- ------- - ------------------- ----- --- - ----------------------- ----- --- - ---------- ----- --- - --- ------ --------------- ---------- -------------- -- - ------------------------ -- ------ ---------------- -- -- - ---------------- --------- -- ---- ------- ---
我们使用 setInterval 定时向客户端推送信息，并使用 SSE 中间件将信息发送到客户端。最后，使用 Express 启动服务器，并监听 3000 端口。
最终，我们可以在浏览器中运行该页面，实现实时通信。每隔1秒，服务器会向客户端发送一条随机数。该随机数会被展示在页面上。
在实际开发中，我们可以根据需要自定义消息，或者将 SSE 与其他技术结合使用，实现更强大的实时通信功能。
总结
本文介绍了使用 SSE 和纯 JavaScript 实现实时通信的方法。使用 SSE 与 WebSocket 和 AJAX 轮询相比，具有更稳定，更高效的特点。通过本文的介绍，我们可以了解 SSE 的基本知识，并使用实例代码实现基本的实时通信功能。我们相信，该技术对于实际开发中的实时通信需求是非常有指导意义的。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/654797297d4982a6eb1f09c0