前言
随着即时通讯的流行，很多 Web 应用都需要使用 WebSocket 技术来进行实时数据传输。WebSocket 是一种持久化的协议，使得客户端和服务器之间的双向通信变得更加简单和高效。本文将介绍如何使用 Express.js 框架来实现 WebSocket 的应用。
WebSocket 简介
WebSocket 是一种基于 TCP 的协议，可以在客户端和服务器之间建立双向通信的通道。它是一种持久化的协议，通过一次握手通信即可建立连接，然后可以进行实时的双向数据传输。WebSocket 通信协议的特点包括以下：
- 支持客户端和服务器的双向通信；
- 通过 HTTP/HTTPS 协议的握手建立连接；
- 使用轻量级的二进制消息协议；
- 支持跨域通信。
Express.js 框架介绍
Express.js 是一种 Node.js 的 Web 应用框架，它提供了一组强大的工具和特性，可以帮助我们快速地开发 Web 应用程序。Express.js 框架支持使用多种中间件，可以方便地扩展和定制应用程序的功能。
实现步骤
使用 Express.js 实现 WebSocket 通信的步骤主要包括以下：
- 安装 WebSocket 库；
- 创建 Express.js 应用程序；
- 创建 WebSocket 服务器；
- 创建 WebSocket 客户端。
接下来，我们将详细介绍每个步骤的实现方法。
1. 安装 WebSocket 库
我们需要使用 Node.js 的 WebSocket 库来实现 WebSocket 通信，可以使用 npm 工具来安装它。在命令行中输入以下命令进行安装：
npm install ws
2. 创建 Express.js 应用程序
用 Express.js 创建一个基本的 Web 应用程序非常简单，只需要按照以下步骤即可：
- 安装 Express.js 库。在命令行中输入以下命令进行安装：
npm install express
- 创建一个名为
app.js的 JavaScript 文件，添加以下代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
------------ ------------- ---- -
---------------------- - ---------------
---
---------------- ---------- -
----------------------- --- --------- -- ---- --------
---在这个代码中，我们创建了一个名为 app 的 Express 应用程序，并监听端口号 3000。同时，我们定义了一个路由，当用户访问根目录时，向客户端发送一个 index.html 文件。
- 创建
index.html文件，内容如下：
-- -------------------- ---- -------
--------- -----
------
------
---------------- ------------
-------
------
------------- ---------
--------
-- --------- ------ ---- ---- ----
---------
-------
-------在这个代码中，我们创建了一个名为 WebSocket Demo 的 Web 页面。我们还在页面中添加了一个空的 script 标签，我们将在后面的代码中添加 WebSocket 客户端的 JavaScript 代码。
3. 创建 WebSocket 服务器
使用 WebSocket 库创建 WebSocket 服务器也非常简单，可以按照以下步骤：
- 添加 WebSocket 库。在
app.js文件中添加以下代码：
const WebSocket = require('ws');- 添加 WebSocket 服务器。在
app.js文件中添加以下代码：
const server = new WebSocket.Server({ port: 8080 });在这个代码中，我们创建了一个名为 server 的 WebSocket 服务器，并监听端口号 8080。
- 设置 WebSocket 服务器监听事件。在
app.js文件中添加以下代码：
-- -------------------- ---- -------
----------------------- -------- -------------- -
---------------------- ------------
---------------- -------- ----------------- -
--------------------- -------- ---- ---------
--------------- -------- -------- - - ---------
---
-------------- ---------- -
---------------------- ---------
---
------------------ ------------
---在这个代码中，我们设置了 WebSocket 服务器的 connection 事件，并在连接成功时输出日志信息。然后我们设置了 WebSocket 服务器的 message 事件，当收到客户端消息时输出日志信息，并向客户端发送一条确认消息。
在最后，我们还设置了 WebSocket 服务器的 close 事件，当连接断开时输出日志信息。
4. 创建 WebSocket 客户端
在 index.html 文件之前，我们添加如下代码：
-- -------------------- ---- -------
----- -- - --- ---------------------------------
--------- - ---------- -
---------------------- ------ ------------
------------------ ------ ------------
--
------------ - --------------- -
--------------------- -------- ---- ------------
--
---------- - ---------- -
---------------------- ------ ---------
--在这个代码中，我们创建了一个名为 ws 的 WebSocket 客户端，并向服务器发送了一条消息。我们还设置了 WebSocket 客户端的 message 事件，当收到服务器消息时输出日志信息。
最后，我们设置了 WebSocket 客户端的 close 事件，当连接断开时输出日志信息。
示例代码
完整的 Express.js + WebSocket 案例代码如下：
-- -------------------- ---- -------
----- --------- - --------------
----- ------- - -------------------
----- --- - ----------
----- ------ - --- ------------------ ----- ---- ---
------------ ------------- ---- -
---------------------- - ---------------
---
----------------------- -------- -------------- -
---------------------- ------------
---------------- -------- ----------------- -
--------------------- -------- ---- ---------
--------------- -------- -------- - - ---------
---
-------------- ---------- -
---------------------- ---------
---
------------------ ------------
---
----- ---- - ---------------- -- -----
---------------- ---------- -
----------------------- --- --------- -- ---- -----------
---
----- -- - --- ---------------------------------
--------- - ---------- -
---------------------- ------ ------------
------------------ ------ ------------
--
------------ - --------------- -
--------------------- -------- ---- ------------
--
---------- - ---------- -
---------------------- ------ ---------
--总结
本文介绍了如何使用 Express.js 框架来实现 WebSocket 的应用。除此之外，本文还对 WebSocket 协议的特点、Express.js 框架的介绍以及实现步骤进行了详细的介绍。希望本文对大家学习和应用 WebSocket 技术提供了一些帮助和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645766b7968c7c53b0a1e592