如今实时聊天应用越来越普及，想要在前端领域里成为一名优秀的开发人员，掌握实时聊天应用的开发技术是必不可少的。 在本篇文章中，我将介绍如何使用 Fastify 和 Socket.IO 构建一款简单的实时聊天应用程序。
什么是 Fastify 和 Socket.IO
Fastify 是一款专注于性能的 Web 框架，它是一个自由且开放源代码的软件，使用基于 MIT 许可证的 Apache 许可证2.0进行发布，它具有极快的请求响应速度。
Socket.IO 是一款为实现实时、双向、事件式通信而设计的 JavaScript 库。 它使用了 WebSockets 和其它通信技术的封装，因此可以轻松地实现实时聊天应用程序。
程序介绍
我们将使用 Fastify 和 Socket.IO 开发一款实时聊天应用程序，其中包含以下功能：
- 新用户进入房间时发出提示信息
- 用户发送信息时，将消息实时发送给所有用户
- 用户离开房间时发出提示信息
开始构建
安装依赖
我们需要先安装 Node.js 环境，并使用 npm 或 yarn 安装 Fastify 和 Socket.IO
# 使用 npm 安装 npm install fastify fastify-websocket socket.io # 或者使用 yarn 安装 yarn add fastify fastify-websocket socket.io
初始化 Fastify 应用程序
在我们的项目中，我们需要使用 fastify 模块初始化 Fastify 应用程序，代码如下：
-- -------------------- ---- -------
----- ------- - -------------------- ------- ---- --
----------------------------------------------
---------------- --------- ------ -- -
------------------------------
----------- -- --------- ---------
------
------ --------------------------------
------ ----------- --------------- ------------- ---------
--- --
------ ------------------------
------ ----------- ----------- --------- ---------
--- --
------ ------------- --------------
-------
--
--
-------------------- ----- -------- -- -
-- ----- ----- ---
------------------- --------- -- ------------
--在这个例子中，我们设置 Fastify 应用程序的日志记录器，并注册了 fastify-websocket 插件，以便使用 WebSocket。 我们还定义了路由处理程序以返回 HTML 输入表单，用于输入用户名和房间名称。
初始化 Socket.IO
现在我们需要初始化 Socket.IO 并将其附加到我们的 Fastify 应用程序中。 我们在以下代码中添加了 Socket.IO 的初始化和附加代码：
-- -------------------- ---- -------
----- ------- - -------------------- ------- ---- --
------------
----- -- - ------------------------------------
------------------- -------- -- -
---------------------- -- --------- ---- -- -- -
-----------------
------------------------------------------------ ---------
--
-------------------- -- ----- ------- -- -- -
------------------------------- --------
--
----------------------- -- -- -
---------------------------- ----------------
--
--在以上代码中，我们将 Socket.IO 初始化为 Fastify 应用程序的服务器实例，并将其附加到 Fastify 服务器上。 接下来，我们添加了 Socket.IO 的 connection 事件处理程序，这将调用每个新连接的套接字执行的逻辑代码。
在join-room事件中，我们监听了从前端发送过来的username,room的两个参数，此时的 socket 与前端是相连接的 socket 。然后，我们使用 join 方法将此 socket 加入到特定的房间中，以便 Socket.IO 为房间内的所有人发送消息。
我们还使用 socket.broadcast.to(room).emit() 方法广播提示信息并通知用户加入/离开房间等信息。
在 message 事件中，我们监听了从前端发送过来的 room 和 message 两个参数，然后使用 io.to(room).emit() 方法将聊天消息发送到特定房间中的所有用户。
最后，在 disconnect 事件中，我们使用 socket.username 发出用户断开连接的提示信息。
编写前端 HTML 代码
现在我们需要编写前端代码来处理用户输入并通过 WebSocket 实例连接到 Socket.IO。 我们将使用以下示例 HTML 代码来创建用户输入表单和聊天框：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- ------------
------- ---------------------------------------
-------
------
------
------ --------------------------------
------ ----------- --------------- ------------- ---------
--- --
------ ------------------------
------ ----------- ----------- --------- ---------
--- --
------ ------------- --------------
-------
---- ------------------- --------------- ------
--- -------------------
------
------ ---------- -------------------
---------------------
-------
------
--------
----- ------ - ----
----- ---------- - ------- -- -
----------------------
----- -------- - -----------------------------------------
----- ---- - -------------------------------------
------------------------ - --------- ---- -- -- -- -
------------------------------------------------------- - -------
-------------------------------------------- - ------
--
-
--------------------------------------------------------- -----------
----- ----------- - --------------------------------------- ------
----- ------------ - --------------------------------------- -------
----- ----------- - -----------------------------------
----- ---------- - --------- -- -
----- -- - ----------------------------
------------ - -------
---------------------------
-
----- ----------- - ------- -- -
----------------------
-- -------------------- -
---------------------- - ----- ----- -------- ------------------ --
----------------------------------------- -----------------------
------------------ - --
-
-
-------------------------------------- ------------
--------------------------- ---------- -- -
--------------------------- --- ------ --- -------------------
--
------------------------ --------- -- -
-------------------
--
------------------------------ ---------- -- -
--------------------------- --- ---- --- -------------------
--
---------
-------
-------在上面的代码中，我们首先到处 io 函数，以便在客户端使用它。 然后，我们在提交表单时使用 socket.emit() 方法将“join-room”事件发送到服务器，该事件包含用户名和房间名称。
还有和登录状态相对应的房间和用户名，在登录之后通过socket.join()进行加入对应的房间，然后在加入房间中监听user-connected事件，并在事件被监听到的时候，通过 addMessage 来添加提示信息并通知用户加入聊天室。
在chat-container中，通过使用 socket.on() 方法来监听“new-message”事件，以接收消息，并将消息添加到消息列表中。 最后，我们的 sendMessage 函数通过 socket.emit() 发送 message 事件，并在将聊天消息添加到列表中后，将输入框清空。
结论
这篇文章向您展示了如何使用 Fastify 和 Socket.IO 构建实时聊天应用程序。 我们已经详细了解了使用 Socket.IO的一些常见事件。 掌握这些事件以及 Socket.IO 具有的大量其它特性，将使您能够在实时聊天应用程序领域里更自信和优秀.。
完整代码示例：https://github.com/zzjmche/fastify-socketio-example
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675169448bd460d3ad8975cc