Can't receive (client-side) the socket.emit from server-side

[Polozone]

Hello everyone,

I'm new to web development and I discover a bunch of new tools that are fun to use, but I'm struggling since two days trying to do an easy stuff with socket.io.

Quick explanations :
I have some User connected to the client-side of my app, and I want to list them by their ID on the server-side.
So I want to make two functions on server-side that can handle connection and disconnection of my users, and pass userID to these functions.
My code client-side :

const socket = io("http://localhost:4000");    

socket.on('connect', () => {
        console.log("before emitting :");
        console.log(simulatedUserId);
        socket.emit('connection', simulatedUserId);
    });

    socket.on('simulatedUserId', (simulatedUserId: number) => {
        console.log('Received simulatedUserId:', simulatedUserId);
      });

and my code server-side :

import { WebSocketGateway, WebSocketServer, SubscribeMessage, ConnectedSocket, MessageBody } from '@nestjs/websockets';
import { Server, Socket } from 'socket.io';
import { Message } from '@prisma/client';

@WebSocketGateway({
    cors: {
        origin: '*',
    },
})
export class SocketEvents {
    
    @WebSocketServer()
    server!: Server;
    
    @SubscribeMessage('connection')
    handleConnection(@MessageBody() simulatedUserId: number, @ConnectedSocket() client: Socket) {
        console.log('Client connected: ');
        console.log(simulatedUserId);
        // this.server.emit('simulatedUserId', simulatedUserId);
    }

    @SubscribeMessage('message')
    handleMessage(@MessageBody() data: Message, @ConnectedSocket() client: Socket) {
        this.server.emit('message', client.id, data);
    }
}

For a reasons that I ignore, when I remove the commentary of this line (server-side) :
// this.server.emit('simulatedUserId', simulatedUserId);
The server crash, and the error output is this one (I use this emit to send client-side all the userID of client who connect/deconnect to my server) :

/home/user/Documents/project_name/srcs/backend/node_modules/socket.io-parser/build/cjs/is-binary.js:28
function hasBinary(obj, toJSON) {
^
RangeError: Maximum call stack size exceeded
at hasBinary (/home/polo/Documents/transcendance/srcs/backend/node_modules/socket.io-parser/build/cjs/is-binary.js:28:19)
at hasBinary (/home/polo/Documents/transcendance/srcs/backend/node_modules/socket.io-parser/build/cjs/is-binary.js:49:63)
at hasBinary (/home/polo/Documents/transcendance/srcs/backend/node_modules/socket.io-parser/build/cjs/is-binary.js:49:63)
at hasBinary (/home/polo/Documents/transcendance/srcs/backend/node_modules/socket.io-parser/build/cjs/is-binary.js:49:63)
at hasBinary (/home/polo/Documents/transcendance/srcs/backend/node_modules/socket.io-parser/build/cjs/is-binary.js:49:63)
at hasBinary (/home/polo/Documents/transcendance/srcs/backend/node_modules/socket.io-parser/build/cjs/is-binary.js:49:63)
at hasBinary (/home/polo/Documents/transcendance/srcs/backend/node_modules/socket.io-parser/build/cjs/is-binary.js:49:63)
at hasBinary (/home/polo/Documents/transcendance/srcs/backend/node_modules/socket.io-parser/build/cjs/is-binary.js:49:63)
at hasBinary (/home/polo/Documents/transcendance/srcs/backend/node_modules/socket.io-parser/build/cjs/is-binary.js:49:63)
at hasBinary (/home/polo/Documents/transcendance/srcs/backend/node_modules/socket.io-parser/build/cjs/is-binary.js:49:63)

I can also see some errors in the console of the browser :

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:4000/socket.io/?EIO=4&transport=polling&t=OZfBn95. (Reason: CORS request did not succeed). Status code: (null).

I tried :

• Deleting nodes_modules of frontend and backend folder, reinstall with npm install, nothing changed.
• Make sure that my backend is listening on localhost:4000. Its all good.
• I realize that there weren't "socket.io-parser" on my project and installed it, nothing changed.
• removing my adblock, nothing changed
• run the same code on thers browser, nothing changed.
• Changed some cors configurations in my projects, nothing changed.

For informations, here is my main.ts :

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { CorsOptions } from '@nestjs/common/interfaces/external/cors-options.interface';

async function bootstrap() {
  // Create a new NestJS application instance
  const app = await NestFactory.create(AppModule);

  const corsOptions: CorsOptions = {
    origin: true, // Allow requests from any origin
    // origin: 'http://localhost:3000',
    optionsSuccessStatus: 200, // Ajoutez ce code d'état pour les réponses pré-vol (preflight)
    credentials: true, // Allow sending cookies from the frontend
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
  };

  // Activez CORS pour toutes les routes de l'application
  app.enableCors(corsOptions);


  app.setGlobalPrefix('api'); // set global route prefix
  // Start the application and listen on port 4000
  await app.listen(4000);
}
bootstrap();

PS : If you need more info, feel free to ask, I'll answer !
PS2 : sorry for potentials errors in english, i'm not yet fluent. This is my first github post, so if there is anything that I didnt respected, i can modify that.

Thanks for your help !

EDIT by @darrachequesne: format code blocks

[darrachequesne]

Hi! Maximum call stack size exceeded means the data that you have emitted contains a circular reference.

Are you sure simulatedUserId is actually a number, and not a Socket?