随着互联网的快速发展，实时通信在我们的生活中变得越来越重要。今天，我们将使用 Fastify 框架和 WebSocket 技术来实现一个简单的聊天室应用程序。
准备工作
在开始这个项目之前，我们需要确保已经安装了以下工具：
- Node.js v12+
- npm v5+
创建项目和安装依赖
使用 npm 初始化项目：
npm init -y
然后使用以下命令安装 Fastify 和 ws：
npm install fastify ws
创建 WebSocket 服务器
我们将使用 ws 模块创建 WebSocket 服务器。在根目录下创建 server.js 文件，然后添加以下代码：
-- -------------------- ---- -------
----- ------- - --------------------
----- --------- - -------------
----- --- - --- ------------------ ----- ---- --
-------------------- -------- -- -
-------------------- ----- -- -
--------------------- -------- -- ----
---------------------------- -- -
-- ------------------ --- --------------- -
----------------
-
--
--
--
-------------------- ----- -- -
-- ----- ----- ---
------------------- --------- -- ----------------------------------
--代码中我们首先引入了 Fastify 和 ws 模块，然后创建 WebSocket 服务器并监听 3000 端口。当一个 WebSocket 连接建立时，我们将其添加到连接池中，并在连接上接收到消息时广播消息到所有连接中。
⚠️ 注意：由于 ws 模块是一个 Node.js 模块，因此在浏览器中无法直接使用。因此，我们需要在前端中使用 WebSocket API 来实现客户端逻辑。下面我们将编写客户端代码。
编写客户端代码
在根目录下创建 public 目录，并创建一个 index.html 文件，然后添加以下代码：
-- -------------------- ---- -------
--------- -----
------
------
------------- ---- ------------
--------
----- -- - --- --------------------------------
-------- ------------------- -
----- --- - -----------------------------
--------------- - -------
----------------------------------------------------
-
-------- ------------- -
----- ----- - --------------------------------
----- ------- - -----------
----------------
----------- - --
-
------------------------------ ------- -- -
----------------------
--
---------
-------
------
---- --------------------
------ ---------- ----------- --
------- -------------------------------------
-------
-------代码中我们首先创建了一个 WebSocket 连接，并在接收到消息时调用 addMessage 函数来显示消息。当用户在文本框内输入消息并点击发送按钮时，我们将发送消息到服务器端。这里我们使用了 WebSockets 的原生 API，无需安装其他库。
运行程序
现在我们已经编写好了服务端和客户端代码。在根目录下运行以下命令：
node server.js
然后在浏览器中打开 index.html，即可进入聊天室。当您在一个浏览器标签页中发送消息时，所有在其他标签页中打开该应用程序的用户都能收到该消息。
结论
在本文中，我们学习了如何使用 Fastify 和 WebSocket 技术来实现一个简单的聊天室应用程序。您可以继续构建这个项目，增加更多的功能，比如加入聊天记录、私聊功能、用户注册等。这个项目有非常高的可扩展性，希望能给您带来一些启示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6770c077e9a7045d0d80af5b