在现代 web 应用程序中，实时数据的传输变得越来越重要。WebSocket 技术提供了一种实时双向通讯的方式，能够大大改善传输速度，节省资源。但是，使用原生 WebSocket API 进行开发需要花费大量时间和精力，后续的维护也较为困难。
在这种情况下，使用 Socket.io 库可以轻松地实现实时数据传输，同时提供更强大和灵活的功能。而使用 NestJS 框架可以让实现 WebSocket 服务变得更简单。在本文中，我们将探讨如何使用 Socket.io 和 NestJS 结合实现强大的 WebSocket 服务。
安装和配置 Socket.io
在使用 Socket.io 之前，需要先安装它。使用 npm 命令可以很容易地安装 Socket.io：
--- ------- ---------
在这之后，需要创建一个 Socket.io 的实例，用于管理 WebSocket 服务。在 NestJS 中，可以将其放在 app.module.ts 文件的 Providers 数组中：
------ - ------ - ---- ----------------- ------ - ------------- - ---- ------------------- ------ - ---------- - ---- ---------------- ------ - ------------ - ---- ------------------------- ------ - ------------- - ---- -------------------------- --------- -------- --------------- ------------ ---------------- ---------- ------------ --------------- -- ------ ----- --------- --
在 SocketModule 模块中，我们将 SocketGateway 所需的一些插件和配置导入并设置为提供者。
------ - ------ - ---- ----------------- ------ - ------------- - ---- ------------------- ------ - -------------- - ---- --------------------- --------- -------- ----------------- ---------- ---------------- -- ------ ----- ------------ --
接下来，需要将 Socket.io 实例与 NestJS 的 Http 服务器连接起来。为了实现这一点，我们需要在 NestJS 应用程序的上下文中获取 Http 服务器实例，然后再将其传递给 Socket.io 实例。
我们可以通过 NestJS 的 SocketIoModule 模块来获取 Http 服务器实例的引用。这个模块是建立在 @nestjs/websockets 库之上的，用于向 NestJS 应用程序提供 WebSocket 功能。在 app.module.ts 中，我们可以这样做：
------ - ------ - ---- ----------------- ------ - ------------- - ---- ------------------- ------ - ---------- - ---- ---------------- ------ - ------------ - ---- ------------------------- ------ - ------------- - ---- -------------------------- ------ - -------------- - ---- --------------------- --------- -------- -------------- ---------------- ------------ ---------------- ---------- ------------ --------------- -- ------ ----- --------- --
在这段代码中，我们在应用程序中导入 NestJS 的 SocketIoModule 和 SocketModule，来获取 Http 服务器的引用。接下来，我们可以在 SocketGateway 类中创建 Socket.io 服务器的实例并将它与 Http 服务器连接起来。
------ - ----------------- ----------------- ---------------- - ---- --------------------- ------ - ------ - ---- ------------ ------------------- ------ ----- ------------- - ------------------ ------- ------- -
在 SocketGateway 类中，我们使用 @WebSocketServer() 装饰器来创建一个 Socket.io 服务器的实例，并将其存储到 server 变量中。由于服务器的配置过程是隐式的，因此我们不需要提供额外的代码来配置服务器。
最终，我们的代码看起来像这样：
------ -
-----------------
-----------------
----------------
- ---- ---------------------
------ - ------ - ---- ------------
-------------------
------ ----- ------------- -
------------------ ------- -------
----------------------------
----------------- ---- -------- ----- ---- -
--------------------- --------- ---------
-
-在 SocketGateway 类中，我们编写了一个名为 onMessage 的方法，并在方法上添加了 @SubscribeMessage('message') 装饰器。这告诉 NestJS 框架，当 WebSocket 客户端发送一个名为 'message' 的事件时，应该调用此方法。
在 onMessage 方法中，我们通过 this.server.emit('new message', payload) 发送一个名为 'new message' 的事件。此事件将用于向所有连接到 WebSocket 服务器的客户端发送消息。
创建 WebSocket 客户端
创建 Socket.io 服务器的下一步是创建 WebSocket 客户端。在客户端方面，我们可以使用浏览器中的 JavaScript 和一些简单的 HTML。
------- ---------------------------------------
--------
----- ------ - ----------------------------
-------------------- -- -- --------------------------
-------------- --------- ----- -- ------------------
-------- ------------- -
----- ----- - -----------------------------------
---------------------- -------------
----------- - ---
-
---------
------ ----------- ------------ ---------------
------- -------------------------------------在这段 JavaScript 代码中，我们使用 Socket.io 库的 io() 函数来创建一个 WebSocket 客户端，并指定连接到 WebSocket 服务器的 URL。接下来，我们使用 on('connect', callback) 方法监听 WebSocket 客户端连接到服务器的事件。当客户端与服务器建立连接后，我们将在控制台中打印一个消息。
使用 on('new message', callback) 方法来监听从服务器传递过来的消息。当消息到达客户端时，我们将打印消息的内容。
最后，我们在 sendMessage() 函数中使用 emit('message', payload) 方法向服务器发送消息。此消息将使用在 SocketGateway 类中声明的 'message' 事件进行处理。
总结
本文展示了如何使用 Socket.io 和 NestJS 一起创建 WebSocket 服务。我们主要关注了 SocketGateway 类和如何将 Socket.io 服务器连接到 NestJS 应用程序的实例上。我们还展示了如何使用 JavaScript 来创建一个简单的 WebSocket 客户端，并使用 Socket.io 库来向服务器发送和接收消息。
Socket.io 提供了许多强大和灵活的功能，如强制机制、分组和消息确认等，这些功能使得使用 Socket.io 创建 WebSocket 服务变得更加容易和有效。同时，NestJS 框架为 WebSocket 服务的创建提供了良好的基础设施，使得使用它来处理 WebSocket 客户端变得更为简单。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/647a00ba968c7c53b05e316c