How to pass a dynamic port to the Websockets-gateway in NestJS?

Question

I wanted to dynamically set the Websockets-gateway port from config in NestJS. Below is my websockets-gateway code.

import { WebSocketGateway } from '@nestjs/websockets';

const WS_PORT = parseInt(process.env.WS_PORT);

@WebSocketGateway(WS_PORT)
export class WsGateway {
  constructor() {
    console.log(WS_PORT);
  }
}

But the WS_PORT is always NaN.

This is my bootstrap function insdie main.ts :

async function bootstrap() {
  const app = await NestFactory.create(AppModule, { cors: false });
  const configService = app.get(ConfigService);
  initAdapters(app);
  await app.listen(configService.get(HTTP_PORT), () => {
    console.log('Listening on port ' + configService.get(HTTP_PORT));
  });
}

Below is my app.module.ts :

@Module({
  imports: [
    ConfigModule.forRoot({
      envFilePath: './src/config/dev.env',
      isGlobal: true,
    }),
    RedisModule,
    SocketStateModule,
    RedisPropagatorModule,
    JwtModule.registerAsync({
      imports: [ConfigModule],
      useFactory: async (configService: ConfigService) => ({
        secret: configService.get<string>(JWT_SECRET_KEY),
      }),
      inject: [ConfigService],
    }),
  ],
  controllers: [AppController],
  providers: [WsGateway, AppService],
})
export class AppModule {}

I put a console log in the Gateway constructor to print the value of 'WS_PORT' but it's always NaN.

[Nest] 13252  - 10/04/2021, 5:05:34 PM     LOG [NestFactory] Starting Nest application...
NaN

Thanks in advance.

Jorge Andres Moreno JAimes · Accepted Answer · 2022-01-25 02:50:25Z

I could not find a way to add dynamic data to the decorator. So to be able to dynamically choose the port and other configurations I had to:

Create an adapter for socket-io:
Tell NestJs to use the new adapter

SocketIoAdapter.ts

import { INestApplicationContext } from '@nestjs/common';
import { IoAdapter } from '@nestjs/platform-socket.io';
import { ServerOptions } from 'socket.io';
import { ConfigService } from '@nestjs/config';

export class SocketIoAdapter extends IoAdapter {
constructor(
  private app: INestApplicationContext,
  private configService: ConfigService,
) {
  super(app);
}

createIOServer(port: number, options?: ServerOptions) {
  port = this.configService.get<number>('SOCKETIO.SERVER.PORT');
  const path = this.configService.get<string>('SOCKETIO.SERVER.PATH');
  const origins = this.configService.get<string>(
    'SOCKETIO.SERVER.CORS.ORIGIN',
  );
  const origin = origins.split(',');
  options.path = path;
  options.cors = { origin };
  const server = super.createIOServer(port, options);
  return server;
}
}

Now, you need to edit the main.ts to use the adapter

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { ConfigService } from '@nestjs/config';
import { SocketIoAdapter } from './socket-io/socket-io.adapter';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  const configService = app.get(ConfigService);
  const hosts = configService.get<string>('CORS.HOST');
  const hostsArray = hosts.split(',');
  app.enableCors({
    origin: hostsArray,
    credentials: true,
  });
//Here you use the adapter and sent the config service
  app.useWebSocketAdapter(new SocketIoAdapter(app, configService));
  await app.listen(4300);
}
bootstrap();

In this case I set the port and the cors origin, here an example of the conf file (using .env) env.local

SOCKETIO.SERVER.PORT=4101
SOCKETIO.SERVER.PATH=
SOCKETIO.SERVER.CORS.ORIGIN=http://localhost:4200,http://localhost.com:8080

Here a link to config service Config Service NestJs

Robin De Schepper · Accepted Answer · 2022-09-05 12:47:20Z

You can do it relatively straightforward if you decorate the Gateway before app.init is called:

Import the class in main.ts
Get an instance of your ConfigurationService
Manually call the decorator on the class with the config data

function decorateGateway(class_, config) {
  // Just calling the decorator as a function with the class
  // as argument does the same as `@WebSocketGateway`
  WebSocketGateway({
    cors: {
      origin: config.get("websocket.cors.origin"),
    }
  })(class_)
}

async function bootstrap() {
  const app = await NestFactory.create(AppModule, {});
  const config = app.get(ConfigService);
  decorateGateway(ChatGateway, config);
  ...
  app.init();
}

The tricky part with a Gateway is that it starts up together with the server, and the decorator metadata needs to be applied to the class earlier than for other components. You can do this in main.ts before app.init.

Aleksey Kolyasa · Accepted Answer · 2022-05-02 17:30:55Z

0

port = this.configService.get<number>('SOCKETIO.SERVER.PORT');

In my case I found its return string(from .env), port gets 'string' but not 'number',

but if put parseInt(this.configService.get<number>('SOCKETIO.SERVER.PORT'), 10); then it is ok

Mind that socket-io ports must be the same on server & client side

answered May 2, 2022 at 17:30

Aleksey Kolyasa

811 silver badge1 bronze badge

Comments

DLara · Accepted Answer · 2023-07-25 19:20:54Z

0

You can use the dotenv package(used by @nestjs/config module) and then import your config file in the websocket module

config/env.ts:

import * as dotenv from 'dotenv';
dotenv.config();

export default () => {
  return {
    wsPort: parseInt(process.env.WS_PORT),
  }
}

events.gateway.ts:

import envSetup from '../config/env';
@WebSocketGateway(envSetup.wsPort)

answered Jul 25, 2023 at 19:20

DLara

3393 silver badges9 bronze badges

Comments

Marcin Wanago · Accepted Answer · 2024-01-21 10:52:21Z

You can extend the existing IoAdapter.

import { IoAdapter } from '@nestjs/platform-socket.io';
import { INestApplicationContext } from '@nestjs/common';
import { Server, ServerOptions } from 'socket.io';
import { CorsOptions } from 'cors';

export class Adapter extends IoAdapter {
  constructor(
    appOrHttpServer: INestApplicationContext,
    private readonly corsOptions: CorsOptions,
  ) {
    super(appOrHttpServer);
  }

  create(port: number, options?: ServerOptions): Server {
    return super.create(port, {
      ...options,
      cors: this.corsOptions,
    });
  }
}

Then, you need to use it in the bootstrap function.

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { ConfigService } from '@nestjs/config';
import { Adapter } from './chat/adapter';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  const configService = app.get(ConfigService);

  app.enableCors({
    origin: configService.get('FRONTEND_URL'),
  });

  app.useWebSocketAdapter(
    new Adapter(app, {
      origin: configService.get('FRONTEND_URL'),
    }),
  );

  await app.listen(3000);
}
bootstrap();

In my case, the FRONTEND_URL variable is the URL of my frontend application.

FRONTEND_URL=http://localhost:5173

Collectives™ on Stack Overflow

How to pass a dynamic port to the Websockets-gateway in NestJS?

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related