在前端开发中，实时通讯是一个非常重要的功能，它可以帮助我们实现聊天、在线协作等实时场景。而 WebSocket 则是实现实时通讯最好的技术之一，它可以让客户端和服务器建立长连接并实时交换数据。
Fastify 是一个极快的 Web 框架，它提供了良好的插件体系和路由系统，支持异步处理和中间件，而且还有着极高的性能。在本文中，我们将使用 Fastify 和 WebSocket 实现一个简单的实时通讯应用。
准备工作
首先，我们需要创建一个基础的 Fastify 项目，可以使用 fastify-cli 来快速创建。在命令行中输入以下命令安装 fastify-cli：
--- ------- -- -----------
安装完成后，可以使用以下命令创建一个 Fastify 项目：
------- ------
然后按照提示选择模板，并输入项目名称即可。
接下来，我们需要安装 fastify-websocket 插件来支持 WebSocket。在命令行中输入以下命令：
--- ------- -----------------
安装完成后，我们就可以开始编写实时通讯应用了。
编写服务器代码
在 app.js 文件中，我们需要引入 fastify 和 fastify-websocket，然后创建 Fastify 实例并注册 fastify-websocket 插件：
----- ------- - -------------------- ----- --------- - ---------------------------- ---------------------------
我们将创建一个简单的 WebSocket 服务器来处理客户端连接请求和消息交换。在 Fastify 实例中调用 get 方法来监听 /socket 路径：
---------------------- -
---------- ----
-- ------------ -------- -- -
------------------------ ----- --------- -- -
-- ---------
--
--其中，websocket 参数告诉 Fastify 这是一个 WebSocket 路由，connection 表示当前连接，request 表示客户端请求对象。在这个例子中，我们只监听了 message 事件，用于接收客户端发送的消息。
现在，我们需要实现一个简单的消息广播逻辑。当收到客户端发送的消息时，我们将该消息发送给所有连接到服务器的客户端：
---------------------- -
---------- ----
-- ------------ -------- -- -
------------------------ ----- --------- -- -
------------------------------------------------ -- -
-- ------------------ --- ------------ -
--------------------
-
--
--
--这里使用了 fastify.websocketServer 来获取当前所有连接的客户端列表，然后遍历这个列表，并把消息发送给所有有效的客户端。
现在，我们已经完成了服务器端的代码，开始构建客户端。
编写客户端代码
我们将使用原生的 WebSocket API 来实现客户端。在 index.html 文件中，我们可以使用以下代码来创建 WebSocket 连接：
----- ------ - --- --------------------------------------- ------------------------------- ------- -- - ---------------------- ----------- -- ---------------------------------- ------- -- - -------------------- ----------- ----------- -- -- ---------
这里使用了 WebSocket 构造函数来创建一个 WebSocket 连接。连接的地址是 ws://localhost:3000/socket，也就是服务器端的 /socket 路由。一旦连接成功，就可以开始接收和发送消息了。
我们可以使用以下代码来发送消息：
------------------- --------
这里直接调用 send 方法，发送一个字符串消息。客户端发送的消息会被广播到所有连接的客户端。
测试应用
现在，我们已经完成了服务器和客户端的代码。接下来，使用以下命令启动服务器：
---- ------
然后在浏览器中打开 index.html 文件，即可见到控制台输出 WebSocket connected，表示客户端已经成功连接到服务器。
尝试发送一些消息，可以在控制台中看到 Message received 输出对应的消息内容。同时，所有连接到服务器的客户端都会收到这个消息。
总结
在本文中，我们使用 Fastify 和 WebSocket 实现了一个简单的实时通讯应用，实现了客户端和服务器之间的长连接并实时交换消息。借助 Fastify 强大的插件体系和 WebSocket 的优秀性能，我们建立了一个快速稳定的实时通讯应用。
对于前端开发者来说，掌握 WebSocket 技术是非常重要的。它可以让我们更加高效地实现实时通讯和在线协作等应用场景，同时还能为用户带来更好的体验。我们希望本文能够帮助到大家学习和使用 WebSocket 技术，掌握实时通讯的核心原理和实践经验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/654085df7d4982a6eba0766d