WebSocket 是一种在客户端和服务器之间实现双向通信的协议，它可以使得 Web 应用更加实时和高效。在前端开发中，我们经常会使用 WebSocket 技术来实现即时聊天、实时推送，或者其他需要实时交互的功能。
Fastify 是一个高效、低开销的 Node.js Web 框架，它为我们提供了一个简单的方法来实现 WebSocket 服务。本文将介绍如何使用 Fastify 实现一个基于 WebSocket 的实时聊天室。本文主要包括以下几部分：
- 简介：介绍什么是 WebSocket，以及为什么要使用 Fastify 框架。
- 准备工作：介绍如何安装和使用 Fastify 框架。
- 实现过程：详细介绍如何使用 Fastify 框架实现 WebSocket 服务。
- 示例代码：提供完整的示例代码。
1. 简介
WebSocket 是一种在客户端和服务器之间实现双向通信的协议，它建立在 HTTP 协议基础之上，使用 TCP 协议传输数据。WebSocket 可以在客户端和服务器之间建立一个长连接，双方可以随时发送消息，实现实时交互。
Fastify 是一个快速、低开销、使用简单的 Node.js Web 框架，它在性能和功能两方面都表现得很出色。Fastify 的核心特点包括：
- 高效的路由和中间件机制。
- 高度可定制化的插件系统，可以方便地添加、删除和管理各种插件。
- 低开销和高性能的代码执行。通过使用 async 和 await 关键字，以及优化的内部逻辑，Fastify 可以提供更快的响应时间和更少的 CPU 使用率。
由于 Fastify 框架的高性能和优良的特性，它是实现 WebSocket 服务的理想选择。
2. 准备工作
在开始使用 Fastify 实现 WebSocket 服务之前，你需要先安装 Fastify 和 ws 模块。
可以使用 npm 或者 yarn 来安装 Fastify 和 ws：
npm install fastify ws # 或者 yarn add fastify ws
安装完成之后，你需要创建一个 Node.js 项目，并在项目中引入 Fastify 和 ws 模块。
const fastify = require('fastify')(); const WebSocket = require('ws');
3. 实现过程
实现 WebSocket 服务可以分为以下几步：
- 创建 Fastify 实例。
- 创建 WebSocket 服务器。
- 监听 WebSocket 连接事件。
- 发送和接收 WebSocket 消息。
下面我们将一步一步地实现这些步骤。
1. 创建 Fastify 实例
首先，我们需要创建一个 Fastify 实例。Fastify 实例提供了路由、中间件、插件等功能。在创建 Fastify 实例时，我们需要指定一些配置，以便于 Fastify 针对我们的应用进行一些优化。
以下是一个创建 Fastify 实例的示例代码：
const fastify = require('fastify')({ logger: true, });
这里我们使用了 logger 配置，使得 Fastify 输出一些日志信息，方便调试。
2. 创建 WebSocket 服务器
接下来，我们需要创建一个 WebSocket 服务器。我们可以使用 Node.js 内置的 WebSocket 模块来创建 WebSocket 服务器，也可以使用 ws 模块来创建。
以下是使用 ws 模块创建 WebSocket 服务器的示例代码：
const WebSocket = require('ws'); const wsServer = new WebSocket.Server({ port: 8080, });
这里我们使用了 ws 模块的 WebSocket.Server 类创建 WebSocket 服务器，指定了端口号为 8080。
3. 监听 WebSocket 连接事件
当有客户端连接到 WebSocket 服务器时，我们需要监听连接事件。在连接事件中，我们可以执行一些初始化操作，比如添加 WebSocket 属性或者向客户端发送欢迎消息。
以下是监听 WebSocket 连接事件的示例代码：
wsServer.on('connection', (socket) => { socket.send('Welcome to the chat room!'); });
这里我们将添加一个监听 function，当有客户端连接到服务器时，会回调这个 function，我们在这个 function 里添加 send 功能，向客户端发送一条欢迎消息。
4. 发送和接收 WebSocket 消息
当连接建立完成之后，客户端和服务端都可以通过 send 方法发送消息，通过 on 方法监听消息。在发送和接收消息时，我们需要注意以下几点：
- 使用 JSON 格式对消息进行序列化和反序列化，方便跨平台传输。
- 使用 uid 或者其他唯一标识符标识用户，方便服务端管理和回复消息。
- 对非法消息进行过滤和处理，以免出现安全问题。
以下是一个发送和接收 WebSocket 消息的示例代码：
-- -------------------- ---- ------- ------------------------- -------- -- - ----- --- - ------------------------ - ------ ---------------------------- ----- ---------- ----- -------- -- --- ---- ----- ------------- --- -------------------- --------- -- - --- - ----- - ----- ---- - - -------------------- -- ----- -- ----- - ------ ------ - ---- ---------- -- --------- ------ ---- --------- -- ----------- ------ -------- -- ---------- ------ - - - ----- ----- - -- -------------- - --- ---展开代码
这里我们在连接建立之后，会生成一个唯一标识符 uid，用于标识用户。然后我们向客户端发送一条欢迎消息，包括欢迎语和用户 uid。接着，我们监听消息事件，处理客户端发送的消息并进行适当的响应。
4. 示例代码
下面是一个完整的使用 Fastify 实现 WebSocket 服务的示例代码：
-- -------------------- ---- ------- ----- ------- - -------------------- ------- ----- --- ----- --------- - -------------- ---------------- ----- ---- -- - --------------- --------- --- -------------------- ------------ ----- -------- -- - -- ----- - ----------------------- ---------------- - ------------------------ --------- -- ------------- --- ----- -------- - --- ------------------ ----- ----- --- ------------------------- -------- -- - ----- --- - ------------------------ - ------ ---------------------------- ----- ---------- ----- -------- -- --- ---- ----- ------------- ---- -------------------- --------- -- - --- - ----- - ----- ---- - - -------------------- -- ----- -- ----- - ------ ------ - ---- ---------- -- --------- ------ ---- --------- -- ----------- ------ -------- -- ---------- ------ - - - ----- ----- - -- -------------- - --- ---展开代码
这个示例代码实现了一个简单的 WebSocket 服务，通过 Fastify 提供 HTTP 访问，通过 ws 模块提供 WebSocket 通信，实现实时聊天室的功能。在实际项目中，你可以基于这个代码进行扩展，添加更多的功能和逻辑，实现更强大的实时交互功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bed3b30c976d473a31cde6
