在基于 Web 的应用程序中，经常需要实现实时通信的功能。而实时通信需要经过双向通信，而传统的 HTTP 协议是单向请求-响应协议，因此不能满足实时通信的需求。为了解决这个问题，WebSocket 应运而生。
WebSocket 是一种支持双向通信的协议，它可以使服务器主动向客户端推送信息，从而实现实时通信。在本文中，我们将探讨如何在 Express.js 应用程序中使用 WebSocket 实现实时通信。
WebSocket 的基础知识
在使用 WebSocket 之前，我们需要了解 WebSocket 的一些基础知识。
WebSocket 的概念
WebSocket 是 HTML5 中的一种新协议，它实现了浏览器和服务器之间的全双工通信。WebSocket 协议使得 HTML5 新技术能够实现实时通信功能，例如聊天室、在线游戏、协同编辑等应用。
WebSocket 的特点
WebSocket 的特点如下：
- 双向通信：客户端和服务端之间可以直接互相发送数据。
- 实时性：数据可以实时传输，降低了数据传输的延迟。
- 轻量级：WebSocket 协议的开销非常小，数据包头信息只有 2 个字节，比 HTTP 的头信息要小很多，减少了网络传输的负担。
- 跨域通信：WebSocket 协议支持跨域通信。
WebSocket 的实现方式
WebSocket 的实现方式有两种：浏览器自带的 WebSocket 和第三方库。浏览器自带的 WebSocket API，可以在浏览器端与服务端通信，但在 Node.js 中，我们需要使用第三方 WebSocket 库来实现 WebSocket 功能。常用的第三方 WebSocket 库有 ws 和 socket.io。
在 Express.js 应用程序中使用 WebSocket
下面，我们将介绍如何使用 ws 库在 Express.js 应用程序中实现 WebSocket 功能。
安装 ws 库
首先，我们需要在项目中安装 ws 库：
npm install ws --save
创建 WebSocket 服务器
在 Express.js 应用程序中，我们可以使用 ws 库的 WebSocket.Server 来创建 WebSocket 服务器。我们在项目中创建一个 websocket.js 服务文件，代码如下：
-- -------------------- ---- -------
----- --------- - --------------
-------------- - -------- -- -
----- --- - --- ------------------ ------ ---
-------------------- ---- -- -
---------------------- ---------- ---------------
---------------- --------- -- -
-------------------- --------- -------------
-- ---- --- ------- ---- -- --- -------
------------ ----- -------------
---
---
---------------------- ------ -- -------------
--在上面的代码中，我们首先引入了 ws 库，并使用 WebSocket.Server 创建了一个 WebSocket 服务器。在 connection 事件中，当有客户端连接到服务器时，通过 ws.on() 监听客户端发送的消息，然后使用 ws.send() 将消息发送回客户端。
集成 WebSocket 服务器
将我们创建好的 WebSocket 服务器集成到 Express.js 应用程序中。我们在项目的 app.js 文件中添加如下代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---- - ---------------- ----- --- - ---------- ----- ------ - ----------------------- ------------------------------- ------------------- -- -- - ------------------- -- --------- -- ---- -------- ---
在上面的代码中，我们创建了一个 HTTP 服务器，并将其传递给 websocket.js 文件，然后在监听端口 3000。
测试 WebSocket 服务器
在测试 WebSocket 服务器之前，我们需要在前端应用程序中使用 WebSocket 连接到服务器。下面是一个简单的 HTML 页面，通过 WebSocket 连接到服务器并发送消息：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- ------------
-------
------
------ ----------- -------------
------- -------------------------------------
--------
----- ------ - --- ---------------------------------
------------- - -- -- -
---------------------- ---------- ---------------
--
---------------- - ------- -- -
--------------------- -------- ----------------
--
-------- ------------- -
----- ------- - -----------------------------------------
---------------------
-
---------
-------
-------在上面的代码中，我们使用 new WebSocket() 创建了一个 WebSocket 对象，并指定了 WebSocket 服务器的地址。在 onopen 事件中，当 WebSocket 连接成功时，我们在控制台输出消息。在 onmessage 事件中，当客户端收到服务端发送的消息时，我们也在控制台输出消息。
在浏览器中打开该 HTML 页面，打开浏览器的开发者工具，可以看到 WebSocket 连接成功的消息。在文本框内输入一些文本，点击 Send 按钮，可以看到该消息发送到了服务端，并且服务端将该消息发送回客户端。
结论
在本文中，我们讲解了 WebSocket 的基础知识和特点，介绍了在 Express.js 应用程序中使用 ws 库实现 WebSocket 功能的方法，并提供了一个完整的示例代码以供学习参考。通过本文的学习，读者可以了解如何在 Express.js 应用程序中使用 WebSocket 实现实时通信功能，为开发实时通信应用程序提供了指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67535f088bd460d3ad9ce760