在 Web 应用程序中，实时更新和通信是非常重要的功能之一。本文将介绍如何使用 Socket.io 和 Server-Sent Events（SSE）来实现实时通信，并给出相应代码示例供大家参考。
Socket.io
Socket.io 是一个实时通信库，它允许浏览器和服务器之间建立实时、双向的通信。它支持多种实时传输方式，包括 WebSocket、Flash Socket、Ajax Polling 等。下面我们将介绍如何使用 Socket.io 来实现实时通信：
1. 安装 Socket.io
使用 npm 安装 Socket.io：
npm install socket.io
2. 创建 Socket.io 服务器
在服务器端创建 Socket.io 服务器，示例代码如下：
-- -------------------- ---- -------
----- --- - -------------------------------
----- -- - --------------------------
-----------------
------------------- ------ -- -
-------------- ---- ------------
--------------- --------- --- -- -
--------------------- - - -----
------------- --------- -----
---
----------------------- -- -- -
----------------- ---------------
---
---这个示例代码创建了一个基本的 Socket.io 服务器，并监听连接、消息和断开连接事件。当有用户连接时，服务器会输出 'a user connected'，当用户发送消息时，服务器会输出消息内容，并使用 io.emit 将消息发送给所有客户端。
3. 创建 Socket.io 客户端
在客户端创建 Socket.io 客户端，示例代码如下：
-- -------------------- ---- ------- ----- ------ - ----- ------------------ -- - ------------------- ----------------- --------- --------------- ---------------- ------ ------ --- --------------- --------- --- -- - ------------------------------------------- ---
这个示例代码创建了一个基本的 Socket.io 客户端，并监听所连接的服务器的 'chat message' 事件。当客户端发送消息时，客户端会将输入框的值发送给服务器，并清空输入框。当客户端收到服务器发送的消息时，客户端会将消息添加到页面上。
Server-Sent Events
Server-Sent Events（SSE）是一种服务器推送数据到客户端的技术，它允许服务器向客户端发送自动更新的事件流。它使用标准的 HTTP 协议，所以它是一个轻量级、高效率的技术。下面我们将介绍如何使用 SSE 来实现实时通信：
1. 创建 SSE 服务器
在服务器端创建 SSE 服务器，示例代码如下：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----- --------- - --- ----------------------------
---------------- - - --------- - --------
-- ------
----------------这个示例代码创建了一个基本的 SSE 服务器，并每秒钟向客户端发送一个时间戳。
2. 创建 SSE 客户端
在客户端创建 SSE 客户端，示例代码如下：
const evtSource = new EventSource('/sse');
evtSource.onmessage = evt => {
$('#messages').append($('<li>').text(evt.data));
};这个示例代码创建了一个基本的 SSE 客户端，并监听服务器发送的 'message' 事件。当客户端接收到服务器发送的消息时，客户端会将消息添加到页面上。
总结
本文介绍了如何使用 Socket.io 和 Server-Sent Events 来实现实时 Web 应用程序，并给出相应的代码示例供大家参考。Socket.io 是一个强大且功能丰富的库，支持多种实时传输方式，并可以轻松地实现双向通信。SSE 是一种轻量级的技术，它使用标准的 HTTP 协议，所以它具有更广泛的兼容性和可靠性。使用这两种技术都可以帮助我们实现更加实时、高效的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651d656295b1f8cacd4f8d40