WebSocket 是一种用于在客户端和服务器之间进行双向通信的协议。传统的 HTTP 请求通常是单向、无状态的，而 WebSocket 可以保持客户端和服务器之间的持久连接，从而允许实时数据的双向传输。在前端开发中，通过 WebSocket 可以实现实时聊天、小游戏等功能，而 Fastify 则是一个高效、低开销的 Web 框架，基于 Node.js 编写，它能够使得我们轻松地构建和优化我们的 WebSocket 应用程序。
本文将介绍如何使用 Fastify 开发 WebSocket 应用。我们将讨论 WebSocket 协议的基本概念，介绍 Fastify 的基础知识以及如何在 Fastify 中添加 WebSocket 支持。本文假设你已经了解 JavaScript 和 Node.js 的基础知识。
WebSocket 协议介绍
WebSocket 协议是一种基于 TCP 的协议，允许客户端和服务器之间进行双向通信。当客户端与服务器连接时，它们建立一个持久连接。这个连接可以用于双方之间的实时数据传输，而不需要客户端不停地向服务器发送请求，这样可以显著降低网络开销和延迟。WebSocket 协议还提供一些其他的功能，例如心跳检测和断线重连等。
WebSocket 协议建立连接时需要进行握手协议，因此客户端和服务器必须都能够理解 WebSocket 握手协议。在建立连接后，客户端可以向服务器发送消息，并且服务器也可以向客户端发送消息。消息可以是文本或二进制数据，由于 WebSocket 是基于 TCP 的，因此它可以传输任何类型的数据。
WebSocket 协议的优点：
- 实时双向通信
- 降低网络开销和延迟
- 可以传输任何类型的数据
Fastify 框架介绍
Fastify 是一个坚持 "快速构建" 原则的 Web 框架。它的特点是非常快，同时还具有简单易用、可扩展性高等特点。Fastify 采用了多种技术作为底层支持，包括 Express.js 的路由系统、Hapi.js 的插件体系以及 Node.js 的套接字和流操作。
Fastify 的主要特性如下：
- 高效的请求处理，采用了一些快速的 JSON 序列化/反序列化库
- 自动化的 API 文档生成工具
- 支持插件架构，可以方便地扩展功能
- 高效的错误处理机制
Fastify 可以像 Express.js 那样轻松处理 HTTP 请求，并且还能够轻松支持 WebSocket 应用程序。
Fastify 添加 WebSocket 支持
Fastify 的默认行为只支持 HTTP 协议，但是它可以很容易地扩展到支持 WebSocket 协议。对于 WebSocket 应用程序，需要使用接口定义语言新增注册一个 WebSocket 路由，如下所示：
----- ------- - ---------------------
----- --------- - --------------
---------------------------------------------- -
------- ------ ---- -- -
----- -- - --- ---------------------- ---------------------------------------
---------------- ------- -- -
-- ----
---
-------------- -- -- -
-- ------
---
-
---
---------------- ----- ---- -- -
--------------- ---------
---
-------------------- ----- -------- -- -
-- ----- -
-------------------
----------------
-
------------------- --------- -- -------------
---上面的代码中，我们使用了 fastify-websocket 插件，可以在 Fastify 上注册一个 WebSocket 路由，每当有 WebSocket 连接到服务器时，将调用 handle 方法。 我们可以从 conn.socket 中获取到原始的 TCP socket，然后使用该 socket 连接创建一个 WebSocket 实例。在新的 WebSocket 实例上注册 message 和 close 事件。当 WebSocket 收到消息时，将调用指定的消息处理函数，当 WebSocket 关闭时，处理关闭事件。
最后，我们在 Fastify 上注册一个 HTTP 路由，以便客户端可以通过该路由连接到 WebSocket 服务器。
实现一个简单聊天室
我们可以使用上述的方法来实现一个简单的聊天室应用程序。在这个聊天室中，客户端可以连续地发送消息，而所有在线用户都可以收到所有来自其他用户的消息。这里我们展示了一个简单聊天室的服务器示例代码：
----- ------- - ---------------------
----- --------- - --------------
---------------------------------------------- -
------- ------ ---- -- -
----- -- - --- ---------------------- ---------------------------------------
---------------- ------- -- -
-- ----
---------------------------------------------- -- -
-- ------------------ --- --------------- -
---------------------
-
---
---
-------------- -- -- -
-- ------
---
-
---
---------------- ----- ---- -- -
----------------------------------------
---
-------------------- ----- -------- -- -
-- ----- -
-------------------
----------------
-
------------------- --------- -- -------------
---这里实现了一个简单的聊天室，当用户连接到服务器时，它们将被添加到所有客户端列表中。当客户端发送消息时，聊天室将广播消息到所有在线用户。
最后，我们来看一下如何在客户端使用 WebSocket 连接到聊天室服务器：
--------- -----
------
------
----- --------------- --
---------------- ---- ------------
-------
------
------------- ---- ---------
----- ------------------------------
------ ----------- ------------ --
------- ---------------------------
-------
--- --------------
-----
--------
----- --------- - ----------------------
----- ------ - --- ---------------------
------------------------------- ----- -- -
---------------------- ------------
---
---------------------------------- ----- -- -
----- -------- - ------------------------------------
----- -- - -----------------------------
-------------- - -----------
-------------------------
---
-------- ------------------ -
-----------------------
----- ------------ - -----------------------------------
----- ------- - -------------------
---------------------
------------------ - ---
---------------------
-
---------
-------
-------客户端通过 WebSocket 连接到服务器，当连接建立时，打印了“WebSocket Connected”消息。当接收到消息时，客户端将创建新的列表项，其中包含来自服务器的消息。客户端还使用 sendMessage 方法向服务器发送消息。
结论
本文介绍了如何使用 Fastify 快速构建 WebSocket 应用程序。我们首先讨论了 WebSocket 协议的基本概念和作用，然后介绍了 Fastify 框架的基础知识和扩展方法。最后，我们展示了如何使用 Fastify 和 WebSocket 创建一个简单的聊天室应用程序，并提供了客户端和服务器端的代码示例。
通过本文的指导，我们可以初步掌握 Fastify 的使用，以及在其中使用 WebSocket 进行双向通信的方法。对于想要构建实时应用程序的开发者来说，这是一个有用的技术工具。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670256bdd91dce0dc847287d