title: Socket connection from NextJS to a node backend
body: <p>I am trying to implement a basic socket connection from my NextJS client side (running on localhost:3000) to my NestJs server (running on localhost:3003).</p>
  <p>The server code looks like this</p>
  <p>ChatGateway.ts</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {
    SubscribeMessage,
    WebSocketGateway,
    OnGatewayInit,
    WebSocketServer,
    OnGatewayConnection,
    OnGatewayDisconnect,
  } from '@nestjs/websockets';
  import {
    Logger
  } from '@nestjs/common';
  import {
    Socket,
    Server
  } from 'socket.io';
  
  @WebSocketGateway()
  export class ChatGateway implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect {
  
    @WebSocketServer() server: Server;
    private logger: Logger = new Logger('ChatGateway');
  
    @SubscribeMessage('msgToServer')
    handleMessage(client: Socket, payload: string): void {
      console.log(payload);
      this.server.emit('msgToClient', payload);
    }
  
  
    afterInit(server: Server) {
      this.logger.log('Init');
    }
  
    handleDisconnect(client: Socket) {
      this.logger.log(`Client disconnected: ${client.id}`);
    }
  
    handleConnection(client: Socket, ...args: any[]) {
      this.logger.log(`Client connected: ${client.id}`);
      this.server.emit('msgToClient', "payload");
    }
  }</code></pre>
  </div>
  </div>
  </p>
  <p>ChatModule.ts</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Module } from '@nestjs/common';
  import { TypeOrmModule } from '@nestjs/typeorm';
  import { ChatGateway } from "./chat.gateway";
  
  
  @Module({
    imports: [],
    controllers: [],
    providers: [ChatGateway],
  })
  export class ChatModule {}</code></pre>
  </div>
  </div>
  </p>
  <p>AppModule.ts</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>@Module({
    imports: [TypeOrmModule.forRoot(), NewsletterModule, AuthModule, UsersModule, ListingsModule, ChatModule]
  })
  export class AppModule {
    constructor(private connection: Connection) {}</code></pre>
  </div>
  </div>
  </p>
  <p>But when I try to connect to the socket from my client side</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {
    io
  } from "socket.io-client";
  
  
  
  function Chat() {
    const socket = io("http://127.0.0.1:3003");
  
    useEffect(() =&gt; {
      console.log("chat useEffect")
      socket.emit('msgToServer', "message")
    }, [])
    socket.on('msgToClient', (message) =&gt; {
      console.log(message)
    })</code></pre>
  </div>
  </div>
  </p>
  <p>I am not getting any errors, but also there is nothing happening when I emit or try to receive events from the server.</p>
  <p>Even the server console doesnt log the emit events. The only thing that happens on the server is that the client gets connected and disconnected all the time without even me doing anything</p>
  <p><a href="https://i.stack.imgur.com/5Hrfs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5Hrfs.png" alt="enter image description here" /></a></p>
  <p>Any idea why cant I connect to the sockets and why is the server constantly connecting and disconnecting even if I disable the socket connection form the client side.</p>
  <p>Thanks!</p>