WebSocket 是一种在 Web 应用程序中实现双向通信的技术，它可以让服务器主动向客户端发送数据，而不需要客户端不断地向服务器发送请求。在前端开发中，我们经常需要使用 WebSocket 技术来实现实时通信、在线游戏、聊天室等功能。本文将介绍如何使用 Express.js 进行 WebSocket 客户端开发的完整教程。
什么是 Express.js
Express.js 是一个简洁而灵活的 Node.js Web 应用程序框架，它提供了一系列强大的特性，可以帮助我们快速地开发 Web 应用程序。Express.js 是 Node.js 生态系统中最受欢迎的 Web 框架之一，它的设计理念是“最小化约定，最大化灵活性”，可以让我们根据自己的需求来定制应用程序的结构和功能。
WebSocket 基础知识
在使用 Express.js 进行 WebSocket 客户端开发之前，我们需要先了解一些 WebSocket 的基础知识。
WebSocket 协议
WebSocket 协议是一种基于 TCP 的协议，它允许客户端和服务器之间进行双向通信。WebSocket 协议是 HTML5 中的一项新特性，它可以让 Web 应用程序实现实时通信、在线游戏、聊天室等功能。
WebSocket API
WebSocket API 是 HTML5 中提供的一组 JavaScript 接口，它可以让我们在浏览器中使用 WebSocket 技术。WebSocket API 提供了以下几个重要的方法：
WebSocket(url)：创建一个 WebSocket 对象，url 参数指定 WebSocket 服务器的地址。WebSocket.send(data)：向服务器发送数据。WebSocket.onopen：当 WebSocket 连接建立时触发的事件。WebSocket.onmessage：当接收到服务器发送的数据时触发的事件。WebSocket.onclose：当 WebSocket 连接关闭时触发的事件。
WebSocket 示例代码
以下是一个简单的 WebSocket 示例代码，它向服务器发送一条消息，并在接收到服务器的响应后将消息显示在页面上。
-- -------------------- ---- ------- --- -- - --- --------------------------------- --------- - ---------- - --------------- ---------- -- ------------ - --------------- - --- ------- - ----------- --------------------- -------- - - --------- --
Express.js 实现 WebSocket 客户端
使用 Express.js 实现 WebSocket 客户端非常简单，我们只需要使用 express-ws 中间件即可。express-ws 中间件是一个用于在 Express.js 应用程序中启用 WebSocket 功能的库，它提供了一组简单的 API，可以让我们快速地实现 WebSocket 客户端。
安装 express-ws
首先，我们需要安装 express-ws 中间件。在命令行中执行以下命令：
npm install express-ws
实现 WebSocket 客户端
接下来，我们需要在 Express.js 应用程序中启用 WebSocket 功能。我们可以使用以下代码来实现 WebSocket 客户端：
-- -------------------- ---- -------
----- ------- - -------------------
----- --------- - ----------------------
----- --- - ----------
---------------
------------- ------------ ---- -
---------------------- ---------- --------------
---------------- ----------------- -
--------------------- -------- - - ---------
--------------- ----------
---
---
---------------- ---------- -
----------------------- --- --------- -- ---- -------
---上面的代码中，我们使用 express-ws 中间件启用了 WebSocket 功能，并使用 app.ws 方法创建了一个 WebSocket 路由。在 WebSocket 路由中，我们监听了 message 事件，并在接收到客户端发送的消息后向客户端发送一条消息。
实现 WebSocket 客户端页面
最后，我们需要创建一个 HTML 页面来测试 WebSocket 客户端。以下是一个简单的 HTML 页面，它使用 JavaScript 来连接 WebSocket 服务器，并在接收到服务器的响应后将消息显示在页面上。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- --------------
-------
------
------------- -----------
---- ------------------
--------
--- -- - --- ------------------------------------
--------- - ---------- -
--------------- ----------
--
------------ - --------------- -
--- ------- - -----------
--- ------ - ----------------------------------
---------------- -- ------------ -------- - - ------- - -------
--
---------
-------
-------总结
本文介绍了如何使用 Express.js 进行 WebSocket 客户端开发的完整教程。通过本文的学习，我们可以了解到 WebSocket 的基础知识和使用方法，以及如何使用 express-ws 中间件在 Express.js 应用程序中启用 WebSocket 功能。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ca55e0add4f0e0ff437e07