随着 Web 应用的不断发展，实时通信是一个越来越重要的功能，而 WebSocket 作为一种新的通信协议，使得前端实时通信更加便利。在正常情况下，Web 应用服务器为每个客户端连接都需要创建一个新的 HTTP 请求/响应，这样的方式存在实时性不足的问题。而 WebSocket 协议则能够提供一个双向通信的渠道，使得服务器能够主动向客户端发送消息，而无需等待客户端主动发起请求，从而达到更加高效的实时通信。
在 Node.js 世界中，有众多优秀的 WebSocket 框架，比如 Socket.io、ws 等。本文将介绍另一款轻量级、高性能的 Fastify 框架中如何使用 WebSocket 实现聊天室功能。
一、Fastify 框架介绍
Fastify 是一个由 Tomas Della Vedova 开发的轻量级、高性能的 Web 框架，它基于 Node.js 的 http 模块进行开发，并且支持异步处理请求，从而大幅提升了性能。Fastify 的设计思想是可插拔的，它允许用户自由选择需要使用的插件，从而使得 Fastify 既灵活又易于扩展。
Fastify 的特点如下：
- 轻量级高性能：Fastify 是目前 Node.js 中性能最高的 Web 框架之一；
- 可插拔的插件机制：用户可以根据自己的需求选择需要使用的插件，这大大提高了框架的可拓展性；
- 路由和请求处理方便易用；
- 异步处理：Fastify 支持异步请求处理，使得整个应用程序更高效；
- JSON schema 验证：Fastify 支持对请求传入参数进行 JSON schema 格式验证。
二、Fastify 中使用 WebSocket
Fastify 框架通过 @fastify/websocket 插件来支持 WebSocket 协议的实现。这个插件允许 Fastify 应用程序同时支持 HTTP 和 WebSocket 协议。在使用这个插件之前，我们需要先安装它：
npm i fastify@^3.0.0 @fastify/websocket@^3.0.0
接下来，我们就可以在 Fastify 应用程序中使用 @fastify/websocket 插件了。
1. 创建 WebSocket 路由
Fastify 中通过创建路由来支持 WebSocket 协议的处理。我们通过 fastify.websocket() 方法来创建一个 WebSocket 路由：
fastify.get('/chat', { websocket: true }, (connection, request) => {
// WebSocket 代码
});其中，'chat' 是指定的路由地址，{ websocket: true } 是必须的配置，用来指定这是一个 WebSocket 路由。
2. WebSocket 连接建立时的处理
当客户端连接到 WebSocket 服务时，首先会触发 'connection' 事件。我们可以通过监听这个事件来进行一些初始化操作：
-- -------------------- ---- -------
-------------------- - ---------- ---- -- ----- ------------ -------- -- -
------------------- ------------
------------------------------- --------- -- -
------------------- ---- - ---------- ---------
---
----------------------------- -- -- -
------------------- ---------------
---
---上述代码实现了当客户端连接时，在控制台输出 'Client connected'；当客户端断开连接时，在控制台输出 'Client disconnected'。同时，我们也监听 'message' 事件，用来接收客户端发来的消息。
3. 发送消息到客户端
当在服务器端由某些操作需要发送消息到客户端时，我们可以直接通过 connection.socket.send() 方法来实现：
-- -------------------- ---- -------
-------------------- - ---------- ---- -- ----- ------------ -------- -- -
------------------------------ ----------
------------------------------- --------- -- -
------------------- ---- - ---------- ---------
--------------------------- ----- -------------
---
----------------------------- -- -- -
------------------- ---------------
---
---上述代码实现了在客户端连接成功后，首先发送一条消息 'Hello, client!'，当服务器接收到来自客户端的消息后，会在服务器端控制台中输出这个消息，并将一个回复消息发送到客户端。
4. 实现群聊
要实现聊天室功能，我们需要将一个客户端发送的消息转发给其他所有客户端。实现这个功能需要在服务器端存储所有连接的 WebSocket 实例，同时监听每个客户端发来的消息，将其转发给其他所有客户端。
-- -------------------- ---- -------
--- ------- - ---
-------------------- - ---------- ---- -- ----- ------------ -------- -- -
------------------- ------------
--------------------------------
------------------------------- --------- -- -
------------------- ---- - ---------- ---------
------------------------ -- -
-- ------- --- ------------------ -
---------------------
-
---
---
----------------------------- -- -- -
------------------- ---------------
------- - ----------------------- -- ------ --- -------------------
---
---上述代码实现了当一个客户端连接成功后，将其 WebSocket 实例存入一个数组 clients 中。当有客户端发送了一条消息时，遍历 clients 数组，将消息发送到数组中其他所有 WebSocket 实例。同时，在客户端断开连接时，需要将其 WebSocket 实例从 clients 数组中移除。
三、完整示例
-- -------------------- ---- -------
----- ------- - -------------------- ------- ---- ---
----- --------- - --------------
--- ------- - ---
-------------------- - ---------- ---- -- ----- ------------ -------- -- -
------------------- ------------
--------------------------------
------------------------------- --------- -- -
------------------- ---- - ---------- ---------
------------------------ -- -
-- ------- --- ------------------ -
---------------------
-
---
---
----------------------------- -- -- -
------------------- ---------------
------- - ----------------------- -- ------ --- -------------------
---
---
----- ----- - ----- -- -- -
--- -
----- ---------------------
------------------- ----------
- ----- ----- -
-----------------------
----------------
-
--
--------四、总结
本文介绍了在 Fastify 框架中如何使用 WebSocket 实现聊天室功能。Fastify 是一款轻量级、高性能的 Web 框架，它通过 @fastify/websocket 插件提供了对 WebSocket 协议的支持。我们可以使用 Fastify 提供的 WebSocket API 来实现 WebSocket 协议中的各种操作，如接收客户端消息、发送消息到客户端、广播消息等。
通过本文的介绍，我们可以更加深入地理解 WebSocket 协议的实现原理，同时也可以学习到如何使用 Fastify 框架来进行 WebSocket 开发。在实际的项目中，我们可以根据需要选择不同的框架和协议来实现实时通信功能，从而满足用户的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647ed36848841e9894e814d8