引言
现代应用程序越来越需要实时将数据从服务器推送到客户端。传统的轮询技术已经无法满足这种需求，因为它浪费了大量的带宽和服务器资源。 WebSocket技术已经被广泛使用，以实现实时数据推送，因为它提供了双向通信的能力。
Fastify是一款快速、低开销、支持异步的Node.js Web框架。它提供了一种简单易用的方式来使用WebSocket技术，并利用内置的WebSocket插件帮助我们实现实时数据推送。 在本文中，我们将探讨如何在 Fastify 框架中使用 WebSocket 进行实时推送。
快速入门
在本教程中，我们将使用Fastify框架和ws NPM包。 ws是一个WebSocket实现，它在Node.js中提供了一种简单易用的接口。
安装 Fastify 和 ws
我们使用npm安装fastify和ws
--- ------- ------- --
可以使用以下命令确保所有必需的模块都已安装。
--- -- ------- --
创建 Fastify 服务器
获取下面的代码，然后将代码复制并粘贴到文件中，例如 fastify-ws.js。
----- ------- - --------------------
----------------------------------------------
---------------- -------- ----- ------ -
---------------------------- -- ----- --- ---- ----
--
-------------------- -------- ----- -------- -
-- ----- -
----------------
---------------
-
------------------- --------- -- ------------
--创建 WebSocket 路由
接下来，我们将创建一个WebSocket路由，以便我们可以建立与服务器的WebSocket连接，并接受和发送消息。
------------------------- - ---------- ---- -- ------ ---- -- -
--------------- --------- -- -
--------------- ---- ------------
--
--------------------- --------------
--我们使用Fastify的websocket钩子来创建WebSocket路由。conn对象代表与客户端之间的WebSocket连接。使用conn.on监听数据事件，并在接收到数据时发送一条新消息。我们使用conn.write发送消息到客户端，这里先发送默认的一条连接成功的消息。
创建 Client-side WebSocket 连接
在客户端，我们将使用JavaScript创建WebSocket连接并将监听器绑定到消息事件，以便我们可以接收来自服务器的消息。
--------- -----
----- ----------
------
----- ----------------
-------------- --------- ---------------
-------
------
----------- --------- ------------
------
--------- ------------------------------------
------- ------------- -------------------------------------
--------
---- ------------------------------
-------
--------
----- ------ - --- ------------------------------------------
---------------- - ----- -- -
----- -------- - ---------------------------------------------
----- --- - ---------- - ------
------------------ -- ---
--
-------- ------------- -
----- ----- - ------------------------------------------
------------------------
----------- - --
-
---------
-------
-------在文档加载时，我们创建一个WebSocket连接并注册一个onmessage事件处理程序。当我们接收到来自服务器的消息时，事件处理程序添加消息到DOM内部。我们还定义一个sendMessage函数，以便客户端可以向服务器发送消息。当按下“Send”按钮时，sendMessage函数从输入字段获取数据，并使用WebSocket发送它。
运行 Fastify 服务器
运行以下命令来启动服务器。
---- -------------
然后，通过在浏览器中访问http://localhost:3000/来访问客户端应用程序。在打开网页控制台Network标签下，可以看到 WebSocket 连接实时推送数据的信息。
深入学习
到目前为止，我们已经介绍了如何在 Fastify 框架中使用 WebSocket 进行实时推送。现在，我们将进一步探索如何使用WebSocket实现更高级的功能。
在Fastify中广播消息
在前面的快速入门示例中，我们已经实现了一个简单的WebSocket例子，它允许客户端向服务器发送消息并接收服务器发送的消息。现在，我们将演示如何在服务器上广播消息。
----- ----------- - --
------------------------- - ---------- ---- -- ------ ---- -- -
----------------------
--------------- --------- -- -
----------------------- -- -
-- ------------- --- -- -
------------------- ------------
-
--
--
--在broadcast路由中，我们跟踪当前连接到服务器的所有WebSocket连接。当有新连接加入时，我们将它添加到connections数组中。我们还在每个连接的data事件中使用c/write向所有连接广播消息。
断开 WebSocket 连接
在 WebSocket 中，关闭连接是很重要的一部分，以释放应用程序可能持有的任何资源并将其他连接通知到连接已关闭。在Fastify的情况下，这意味着从连接数组中删除连接。
----- ----------- - --
----------------------------- - ---------- ---- -- ------ ---- -- -
----------------------
--------------- --------- -- -
--------------- ---- ------------
--
---------------- -- -- -
----- --- - -------------------------
----------------------- --
------------------- --------------
--
--------------------- --------------
--我们向connections数组添加新连接。然后，我们监听close事件，并在关闭连接时删除连接。
总结
在本文中，我们探讨了如何在 Fastify 框架中使用 WebSocket 进行实时推送。我们通过创建服务器、websocket路由，客户端WebSocket连接来实现基本的WebSocket应用，然后学习了如何广播消息以及如何关闭WebSocket连接。
WebSocket是一个功能丰富的协议，它非常适合实时通信。在Fastify框架下使用WebSocket相对来说比较简单，它提供了插件帮助我们快速构建WebSocket服务。我们鼓励读者探索WebSocket的更多高级用途，以便获得更深入的了解。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/646a35bc968c7c53b09eaadb