WebSocket 是一种全双工通信协议，允许服务器和客户端之间进行实时的通信。在前端领域，WebSocket 往往被用于构建实时通信、游戏、聊天等应用，而 Fastify 是一个高效、低开销的 Node.js Web 框架，非常适合构建高并发、低延迟的应用。
本文将介绍如何使用 Fastify 构建 WebSocket 服务，包括创建 WebSocket 连接、发送和接收消息等操作，以及应用示例和实用技巧，帮助读者更好地理解和运用 WebSocket 技术。
安装 Fastify 和 WebSocket
首先，我们需要安装 Fastify 和 ws 这两个库，ws 是 Node.js 中比较流行的 WebSocket 库，提供了许多 WebSocket 相关的 API 和事件。
npm i fastify ws
创建 WebSocket 服务
我们可以基于 Fastify 和 ws 库，快速创建一个 WebSocket 服务：
-- -------------------- ---- -------
----- ------- - -------------------- ------- ---- --
----- --------- - -------------
-------------------------- -------- ----- -- -
----- --- - --- ------------------ ------- -------------- --
-------------------- ---- -- -
---------------------- -----------
---------------- --------- -- -
--------------------- -------- ------------
--------------- --------- ------------
--
-------------- -- -- -
---------------------- --------------
--
------------ --- --------- -- --------- --------
--
------
--
-------------------- ----- -------- -- -
-- ----- -
----------------------
---------------
-
------------------- --------- -- ------------
--在上述代码中，我们使用了 Fastify 的服务器和 ws 库创建了一个 WebSocket 服务，监听在 3000 端口。当客户端连接到这个服务器时，会触发 connection 事件，我们可以在该事件里处理收到的消息，以及连接关闭的操作。
-- -------------------- ---- -------
-------------------- ---- -- -
---------------------- -----------
---------------- --------- -- -
--------------------- -------- ------------
--------------- --------- ------------
--
-------------- -- -- -
---------------------- --------------
--
------------ --- --------- -- --------- --------
--在这个事件里，我们监听 message 事件来处理接收到的消息，同时使用 send 方法向客户端发送消息。收到的消息一般是字符串类型的，而发送的消息可以是字符串、二进制数据或者 Buffer 对象。
随后，我们使用 on 监听 close 事件，在连接关闭时执行相应的操作。最后，我们可以发送一条欢迎消息，以确认客户端已经成功连接到服务器。
连接 WebSocket
客户端在连接 WebSocket 服务器时，可以使用 WebSocket 对象发起连接，我们可以在前端使用原生的 WebSocket 对象，也可以使用第三方库如 socket.io 等。
-- -------------------- ---- ------- ----- -- - --- -------------------------------- --------------------------- -- -- - ---------------------- -- --------- -------- -------------- ---- -------- -- ------------------------------ ------- -- - --------------------- -------- --------------- --
在上述代码中，我们创建了一个 WebSocket 对象，指向我们刚刚创建的服务器地址。当连接建立成功时，会触发 open 事件，我们在该事件里发送一条消息。
ws.addEventListener('open', () => {
console.log('Connected to WebSocket server')
ws.send('Hello from client')
})在收到消息时，我们可以通过 message 事件来监听，并处理接收到的消息。
ws.addEventListener('message', (event) => {
console.log(`Received message: ${event.data}`)
})发送消息
客户端和服务器在连接成功后，可以互相发送消息。我们可以在客户端使用 send 方法发送消息：
ws.send('Hello from client')在服务器中，我们可以在 connection 事件的 message 子事件中，处理所接收到的消息：
ws.on('message', (message) => {
console.log(`Received message: ${message}`)
ws.send(`Server received: ${message}`)
})在上述代码中，我们监听 message 事件，使用 send 方法将客户端发送的消息回传。
实用技巧
接下来，我们来介绍一些 WebSocket 开发中的实用技巧。
处理错误
在 WebSocket 连接中，可能出现各种错误，例如服务器关闭、网络中断等。我们需要在合适的时候处理这些错误，并恰当地向用户反馈。
在 Fastify 中，我们可以监听 error 事件来处理错误：
-- -------------------- ---- -------
-------------------- ----- -------- -- -
-- ----- -
----------------------
---------------
-
------------------- --------- -- ------------
--
-------------------------- ----- -- -
--------------------- -------- ----
--在服务器的 connection 事件中，我们可以监听 error 事件来处理该连接中可能出现的错误：
-- -------------------- ---- -------
-------------------- ---- -- -
---------------------- -----------
---------------- --------- -- -
--------------------- -------- ------------
--------------- --------- ------------
--
-------------- ----- -- -
------------------------ -------- ----
--
-------------- -- -- -
---------------------- --------------
--
------------ --- --------- -- --------- --------
--客户端重连
在使用 WebSocket 进行实时通信时，由于网络等原因，可能出现断开连接的情况，这时我们需要对客户端进行重连，保证连接的持续性。
可以使用类似如下的代码来实现客户端重连：
-- -------------------- ---- -------
--- -- - --- --------------------------------
---------------------------- -- -- -
------------------------- ---- --------- ------- -------------
------------- -- -
-- - --- --------------------------------
-- -----
--在上述代码中，我们监听客户端的 close 事件，在该事件里进行重连操作。这里使用了 setTimeout 来添加一个 2 秒的等待时间，避免过于频繁地尝试重连。
广播消息
在实时通信的应用中，可能需要同时向多个客户端广播消息。我们可以实现广播消息的功能：
-- -------------------- ---- -------
--- ------- - --- -----
-------------------- ---- -- -
---------------
-------------- -- -- -
------------------
--
---------------- --------- -- -
------------------------------------ -- -
-- ------------------ --- --------------- -
--------------------
-
--
--
--在上述代码中，我们使用 Set 来存储所有连接到服务器的客户端，当新的客户端连接时，将其添加到 clients 集合中。在客户端关闭连接时，从集合中删除该客户端。
在收到消息时，我们可以遍历所有客户端，如果该客户端打开状态，则发送消息到该客户端。
应用示例
最后，我们给出一个简单的聊天室应用示例，演示如何使用 Fastify 和 WebSocket 构建实时通信应用。
-- -------------------- ---- -------
----- ------- - -------------------- ------- ---- --
----- --------- - -------------
-------------------------- -------- ----- -- -
----- --- - --- ------------------ ------- -------------- --
--- ------- - --- -----
-------------------- ---- -- -
---------------------- -----------
---------------
-------------- -- -- -
------------------
---------------------- ------------- --------------- ------- -----------
--
---------------- --------- -- -
--------------------- -------- ------------
------------------------------------ -- -
-- ------------------ --- --------------- -
--------------------
-
--
--
--
------
--
---------------- --------- ------ -- -
-----------------------
------------
----- ----------
------ ----------- ---------- --
------- ---------------------------
--- -------------------
-------
--------
----- -- - --- --------------------------------
----- ---- - -------------------------------
----- ----- - --------------------------------
----- -------- - -----------------------------------
------------------------------ ------- -- -
----- -- - ----------------------------
-------------- - ----------
------------------------
--
------------------------------- ------- -- -
----------------------
--------------------
----------- - --
--
---------
--
--
-------------------- ----- -------- -- -
-- ----- -
----------------------
---------------
-
------------------- --------- -- ------------
--在上述代码中，我们使用了 Fastify 注册了 WebSocket 服务器，并且在该服务器的 connection 事件中，实现了聊天室的功能。所有连接到服务器的客户端，都可以在 Chat 客户端发送消息，在服务器中被广播到所有其他客户端。
同时，我们在服务器中维护了一个 clients 集合，存储所有连接到服务器的客户端。
在 Fastify 中，我们使用 get 方法来创建一个 HTTP 路由。在这个应用中，我们使用 / 路由来渲染 Chat 客户端的 HTML，包括消息输入框、消息列表和提交按钮等元素。
<form id="form"> <input type="text" id="input" /> <button type="submit">Send</button> <ul id="messages"></ul> </form>
我们将 Chat 客户端的 JavaScript 代码直接内嵌在 HTML 中，方便读者直接理解整个应用的实现流程。
总结
本文介绍了如何使用 Fastify 构建 WebSocket 服务，包括创建 WebSocket 服务、连WebSocket 接、发送和接收消息等操作，以及应用示例和实用技巧，帮助读者更好地理解和运用 WebSocket 技术。
通过本文的学习，你将了解到：
- 如何使用 Fastify 和 ws 库创建 WebSocket 服务
- 如何连接 WebSocket 服务器和发送和接收消息
- 如何处理 WebSocket 连接中可能出现的错误
- 如何实现客户端的重连和消息广播功能
我们希望本文能够对读者在使用 WebSocket 进行实时通信时有所帮助，同时也欢迎读者在评论区分享任何有关 WebSocket 的经验或者问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653a123a7d4982a6eb3d6e46