CODEWITHSUNDEEP
typescriptsocketswebsocketsocket.ionestjs
Tom
Tom

Reputation: 47

Socket.IO NestJS can't connect : keeps disconnecting / reconneting

i'm trying to use Socket.IO with NestJS. When i load the front, i get a lot of connections and disconnections to the nestjs gateway.

See this :

[Nest] 12232   - 01/06/2021, 11:28:24 AM   [NotificationGateway] Client connected: a2f47PSPB9oUn74AACr
[Nest] 12232   - 01/06/2021, 11:28:30 AM   [NotificationGateway] Client connected: NPBzcFBJLHAkQmcAACs
[Nest] 12232   - 01/06/2021, 11:28:30 AM   [NotificationGateway] Client disconnected: hM8j9f9Fd6zT2HJiAACn
[Nest] 12232   - 01/06/2021, 11:28:36 AM   [NotificationGateway] Client disconnected: kx6x1FMIPqfPNZa9AACo
[Nest] 12232   - 01/06/2021, 11:28:36 AM   [NotificationGateway] Client connected: hHWW5iusE86GaszSAACt
[Nest] 12232   - 01/06/2021, 11:28:42 AM   [NotificationGateway] Client connected: V3ah407F2uCge4GxAACu
[Nest] 12232   - 01/06/2021, 11:28:42 AM   [NotificationGateway] Client disconnected: c-VEB3fnPCWGt8hlAACp
[Nest] 12232   - 01/06/2021, 11:28:48 AM   [NotificationGateway] Client connected: NGuWrdwUQiKigGspAACv

The "Connected" console.log never happens.

Here my client simple code :

<!doctype html>
<html>
    <head>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.5/socket.io.js'></script>
        <script>
            const socket = io.connect('http://127.0.0.1:3000/');
            socket.on('connected', function() {
                console.log("connected !");
            });
            socket.connect();
        </script>
    </head>
    <body>
    </body>
</html>

And here my nestJS gateway :

interface SockClient {
  uid: string;
  sock: Socket;
}

// @Injectable()
@WebSocketGateway()
export class NotificationGateway
  implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect {
  constructor(
    @Inject(forwardRef(() => NotificationService))
    private readonly notificationService: NotificationService,
    @Inject(forwardRef(() => HttpService))
    private readonly httpService: HttpService,
  ) {}

  @WebSocketServer() server: Server;
  private logger: Logger = new Logger('NotificationGateway');

  private clients: SockClient[] = [];

  @SubscribeMessage('authenticate')
  async handleAuth(client: Socket, payload: string): Promise<void> {
    const { uuid, role } = await sendAuthAPICall(this.httpService, payload);
    if (role !== 'pro') {
      this.logger.warn(`Client authentication error ${payload}`);
      client.emit('error', 'authentication error');
      return;
    }
    this.clients.push({ sock: client, uid: uuid });
    this.logger.log(`Client authenticated : ${uuid}`);
  }

  afterInit(server: Server) {
    this.logger.log('Init');
  }

  handleDisconnect(client: Socket) {
    this.logger.log(`Client disconnected: ${client.id}`);
    this.clients = this.clients.filter((c) => c.sock.id !== client.id);
  }

  handleConnection(client: Socket, ...args: any[]) {
    this.logger.log(`Client connected: ${client.id}`);
  }

  public sendNotification(notif: CreateDto, userId: string) {
    const client = this.clients.find((c) => (c.uid = notif.proId));
    if (!client) return;
    client.sock.emit('notification', notif.title, notif.description, userId);
  }
}

Here a screenshot of my chrome requests tab :

enter image description here

The WebSocket tab on chrome is empty.

I followed several tutorials steps by steps, and i cant find the issue.

Thank oyu very much for your help.

Upvotes: 0

Views: 3083

Answers (1)

Jay McDoniel
Jay McDoniel

Reputation: 70131

Looks like you're using Socket.IO version 3, which is not yet supported by Nest. Downgrade to version 2.

Upvotes: 1

Related Questions