WebSocket 是一种实时通信协议，可以在客户端和服务器端之间创建 "实时" 的双向连接。而 Fastify 是一个高效、低开销的 Web 框架，它非常适合构建高性能Web项目。
在本篇文章中，我们将引导您如何在 Fastify 中集成 node-socket.io 实现 WebSocket，以及如何使用它。本文假设您已经了解了基本的 HTML、JavaScript 和 Node.js。
准备工作
在开始之前，您需要确保已经安装了 Node.js 和 npm。
安装 Fastify 和 socket.io：
npm install fastify socket.io
集成 socket.io
Fastify 并不提供 WebSocket 的实现，但是我们可以很容易地使用 socket.io。接下来，我们将展示如何将它集成到 Fastify 中，并实现一个简单的聊天室应用程序。
创建服务器
首先，我们需要创建一个 HTTP 服务器和一个 Fastify 实例，以便 socket.io 可以使用它。让我们创建一个 index.js 文件：
-- -------------------- ---- -------
----- ------- - ---------------------
----- ---- - --------------------------------------
----- -- - ---------------------------
------------------- -------- -- -
-------------- ---- ------------
----------------------- -- -- -
----------------- ---------------
---
---
----------------- -- -- -
---------------------- -- ---------
---在这里，我们创建了一个 HTTP 服务器和 Fastify 实例，并使用 http 与它们相关联。然后，我们使用 socket.io 创建一个 WebSocket 服务器，并将其附加到这个 HTTP 服务器上。io.on() 事件监听器用于侦听来自客户端的连接和断开事件。
创建客户端
接下来，我们需要创建一个基本的客户端，以便验证 WebSocket 服务器是否正在工作。在您的 HTML 文件中添加以下代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
----- ---------------------------- ----------------- --
---------------- ---------------
-------
------
------------- ------------
------- ---------------------------------------
--------
--- ------ - -----
-------------------- -------- -- -
-------------------------
---
----------------------- -------- -- -
----------------------------
---
---------
-------
-------这个客户端文件创建了一个基本的 HTML 页面，其中包含一个用于添加 socket.io JavaScript 库的 <script> 标签。然后，它实例化一个 io() 对象，并使用 socket.on() 事件监听器侦听连接和断开事件。
测试
现在，让我们启动服务器并在浏览器中打开客户端文件。使用以下命令在终端中启动服务器：
node index.js
此时，您应该能够看到终端中的 "listening on *:3000" 消息。在浏览器中打开 http://localhost:3000，打开开发者工具，在控制台中将看到 "connected" 消息。
创建聊天室
接下来，我们将改造我们的服务器代码，以便能够实现我们的聊天室。我们将为连接的每个客户端创建一个用户对象，以便跟踪连接。
在 index.js 文件中添加以下代码：
-- -------------------- ---- -------
--- ---------- - --
--- ----- - ---
------------------- -------- -- -
-------------- ---- ------------
-- ------ - --- ---- ------ --- ---- ------ ----------
----- ---- - -
--- -------------
------- -------
--
-- --- --- ---- -- --- ----- ------
-------------- - -----
-- ------ -------- --------
-------------------- ----- -- -
--------------------- -------------------------
-- ---- --- ------- -- ----- --------- ------ ------ --- ------
-------------------------------- -- -
-- ----- --- -------- -
-------------------
-
---
---
-- ------ -----------
----------------------- -- -- -
----------------- ---------------
-- ------ --- ---- ---- --- ----- ------
------ ---------------
---
---这个更新过的代码使用 let 和 const 关键字声明了两个变量。一个是 nextUserId，它将在每次连接时分配一个唯一的用户 ID。另一个变量是 users，它是一个应用程序范围的对象，用于存储所有已连接的用户。
当一个新的客户端连接时，我们将创建一个新的 user 对象，并将其添加到 users 对象中。我们使用 socket.on('message', ...) 处理接收到的消息，并将每条消息发送给所有连接的客户端。
在这个版本的代码中，我们也处理了连接的断开。当一个客户端断开连接时，我们将删除该客户端的 user 对象。
现在，我们已经完成了我们的服务器代码。接下来，我们将更新客户端代码，以便能够发送和接收消息。
在您的 HTML 文件中添加以下代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
----- ---------------------------- ----------------- --
---------------- ---------------
-------
------
------------- ------------
---- --------------------
----- ------------------
------ ----------- ------------------ --
------- ---------------------------
-------
------- ---------------------------------------
--------
--- ------ - -----
-------------------- -------- -- -
-------------------------
---
----------------------- -------- -- -
----------------------------
---
-- ------ -------- --------
-------------------- -------- ----- -
----- -------- - ------------------------------------
----- - - ----------------------------
------------- - ----
------------------------
---
-- ------ ---- ----------
----- ---- - ----------------------------------------
------------------------------- -------- --- -
-------------------
----- ----- - -----------------------------------------
----- ---- - -------------------
-- ------ -
------------------
----------- - ---
-
--------------
---
---------
-------
-------这个更新后的代码添加了一个简单的表单，以便发送 WebSocket 消息。我们还将收到的消息添加到页面上的消息列表中。
测试
现在，让我们现将服务器启动并在浏览器中打开客户端文件。使用以下命令在终端中启动服务器：
node index.js
在浏览器中打开 http://localhost:3000，并尝试与其他窗口或标签进行交互。您应该能够在页面中确认发送和接收到的消息，这证明了我们已经成功地集成了 socket.io 并使用它构建了一个简单的聊天室。
结论
在本文中，我们学习了如何使用 Fastify 和 socket.io 构建一个简单的 WebSocket 聊天室应用程序。我们了解了 Fastify 和 socket.io 的工作原理，并创建了一个用于跟踪连接的用户对象。最后，我们展示了如何实现基本的聊天室功能。
这个例子是非常简单的，但是你可以在这个基础上建立更复杂的实时应用，比如即时游戏、交互式聊天应用、在线协作等。希望这篇文章能给你提供一些想法和指导，让你能够更好地使用 WebSocket 在你的项目中进行实时通信。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67136e56ad1e889fe20cd498