WebSocket 是一种在单个 TCP 连接上提供全双工通信的协议，在前端和后端开发中被广泛应用。Fastify 是一个快速、低开销和可扩展的 Node.js Web 框架，提供了内置支持 HTTP2 和 WebSocket 的插件。本文将介绍如何在 Fastify 中使用 WebSocket，为您的 Web 应用程序增强实时通信的能力。
安装 Fastify 和 fastify-websocket
在开始之前，您需要确保在计算机上安装了 Node.js 和 npm。如果还没有安装，请跟随官方文档进行安装：https://nodejs.org/
安装 Fastify 和 fastify-websocket 插件：
npm install fastify fastify-websocket
创建一个带有 WebSocket 的 Fastify 应用程序
首先，在您的项目目录中创建一个新文件 app.js，并在其中引入所需的库和插件：
const fastify = require('fastify')({
logger: true
})
const wsPlugin = require('fastify-websocket')
fastify.register(wsPlugin)然后，使用 fastify.get 方法创建一个新路由并启用 WebSocket：
fastify.get('/websocket', { websocket: true }, (connection, req) => {
console.log('Client connected')
connection.on('message', (msg) => {
console.log('Received message:', msg)
connection.send(msg)
})
})在此代码中，我们使用 fastify.get 方法创建了一个新路由并启用了 WebSocket。websocket: true 选项告诉 Fastify 这是一个 WebSocket 请求，而不是传统的 HTTP 请求。
然后，在连接事件上，我们监听来自客户端的消息，并发送相同的消息回去。在生产环境中，您可能会更改此代码以根据应用程序的特定需求处理消息。
最后，启动 Fastify 服务器并侦听端口：
fastify.listen(3000, (err, address) => {
if (err) throw err
console.log(`Server listening on ${address}`)
})启动您的应用程序：
node app.js
编写前端 JavaScript 代码
现在，您已经编写了使用 WebSocket 的 Fastify 应用程序，请编写前端 JavaScript 代码以连接到此应用程序。
创建一个新的 HTML 文件 index.html，其中包括一个按钮，当用户单击该按钮时，将连接到 WebSocket 服务器并触发“Hello，World！”消息：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------- --------- ---------------
-------
------
------- -------------------- -- --------- ---------------
--------
----- ------ - ----------------------------------
-------------------------------- -- -- -
----- ------ - --- ------------------------------------------
------------- - -- -- -
------------------- --------
-
---------------- - ------- -- -
------------------------ -----------
-
--
---------
-------
-------在此代码中，我们使用 WebSocket 类创建一个新的 WebSocket 连接，并在连接打开后发送“Hello，World！”消息。然后，我们监听来自服务器的消息并将其打印到控制台。
测试
现在，您已经完成了使用 Fastify 和 WebSocket 创建实时通信的示例应用程序。启动此应用程序并打开 index.html 文件以测试它。在浏览器窗口中点击“Connect to WebSocket Server”按钮，应该在控制台中看到来自服务器的“Hello，World！”消息。
总结
在本文中，我们介绍了如何在 Fastify 中使用 WebSocket，启用实时通信能力。我们从安装 Fastify 和 fastify-websocket 插件开始，创建了一个具有 WebSocket 的 Fastify 应用程序，然后编写了前端 JavaScript 代码以连接到服务器。此应用程序只是使用 WebSocket 实现实时通信的一个例子。在实际应用中，您可以根据需求调整服务端和客户端代码，提供更多的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6486e0ea48841e989457c4e8