Nest.js 中特定路由上的 WebSockets

Question

我想创建特定的 API 路由，该路由将仅用于 WebSocket ( /api/events) 但在 Nest.js 上实现 WebSockets 的所有示例中，我偶然发现模块被导入AppModule并且客户端正在向根 URL 发出事件，我不能这样做是因为我有这个中间件；

前端.middleware.ts

import { Request, Response } from 'express';
import { AppModule } from '../../app.module';

export function FrontendMiddleware(
  req: Request,
  res: Response,
  next: Function,
) {
  const { baseUrl } = req;
  if (baseUrl.indexOf('/api') === 0) {
    next();
  } else {
    res.sendFile('index.html', { root: AppModule.getStaticAssetsRootPath() });
  }
}

这是EventGateway和EventModule：

event.gateway.ts

import {
  SubscribeMessage,
  WebSocketGateway,
  WebSocketServer,
  WsResponse,
} from '@nestjs/websockets';
import { from, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Client, Server } from 'socket.io';

@WebSocketGateway({ namespace: 'events' })
export class EventGateway {
  @WebSocketServer()
  server: Server;

  @SubscribeMessage('events')
  findAll(client: Client, data: any): Observable<WsResponse<number>> {
    return from([1, 2, 3]).pipe(map(item => ({ event: 'events', data: item })));
  }

  @SubscribeMessage('identity')
  async identity(client: Client, data: number): Promise<number> {
    return data;
  }
}

event.module.ts

import { Module } from '@nestjs/common';
import { EventGateway } from './event.gateway';

@Module({
  components: [EventGateway],
})
export class EventModule {}

有没有办法创建允许服务器-客户端通信的控制器/api/events？

Answer 1

是的，可以在另一条路径上创建 WebsocketGateway。您可以只使用 WebsocketGateway 的选项来配置底层 IO-Connection：

例如：

import {
  SubscribeMessage,
  WebSocketGateway,
  WebSocketServer,
  WsResponse,
} from '@nestjs/websockets';
import { from, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Client, Server } from 'socket.io';

@WebSocketGateway({ path: '/api/events', namespace: 'events' })
export class EventGateway {
  @WebSocketServer()
  server: Server;

  @SubscribeMessage('events')
  findAll(client: Client, data: any): Observable<WsResponse<number>> {
    return from([1, 2, 3]).pipe(map(item => ({ event: 'events', data: item })));
  }

  @SubscribeMessage('identity')
  async identity(client: Client, data: number): Promise<number> {
    return data;
  }
}

这将在http://localhost/api/events上启动 IO-Connection

请记住也在您的客户端中更改连接路径。它不再是默认的 /socket.io 路径，它将是您示例中的 /api/events 。

Answer 2

Websocket 运行在服务器上，而不是端点上。因此，您不能让它侦听特定路由下的请求，而只能侦听端口，而 Nest 的默认配置恰好与 HTTP 相同。

您可以使用像 Nginx 这样的反向代理将请求重定向到/api/eventsWebsocket 服务器，并且还可以处理重定向，index.html甚至无需更改 Websocket 服务器的端口。FrontendMiddleware那么你就根本不需要这门课了。它也更好，因为应用程序不承担管理请求重定向的负担。