Multiple namespace handling in angular using socket.io

Question

I have two clients, where I have defined static namespace "/CGI_ONE" but when I connect "/CGI_TWO" it disconnect the previous socket.io how do I manage both in node js and angular client.

Server Side

const express = require('express');
const cors = require('cors');
let appExpress = express();
appExpress.use(cors());
appExpress.use(express.json());
appExpress.use(express.urlencoded({ extended: true }));
let PORT_SOCKET = 4001;
appExpress.get('/', (req, res) => {
  res.json({ message: 'Welcome to application.' });
});
appExpress.set('port', PORT_SOCKET);
let socketServer = require('http').Server(appExpress);
let io = require('socket.io')(socketServer, {
  cors: {
    origin: '*',
    // methods: ["GET", "POST"],
    allowedHeaders: [
      'Access-Control-Allow-Origin',
      'Access-Control-Allow-Credentials',
    ],
    // Credential: true
  },
});
socketServer.listen(PORT_SOCKET, IPADDRESS, function () {
  console.log(`listening on *:  ${PORT_SOCKET} ---++---++--- ${IPADDRESS}`);
});
const simulator1_Namespace = io.of('/CGI_ONE');
const simulator2_Namespace = io.of('/CGI_TWO');
simulator1_Namespace.on('connection', function (socket: any) {
  console.log('simulator1_Namespace sockets->>>>');
  sockets2.on('SOURCE', function (SOURCE) {
    
  })
});
simulator2_Namespace.on('connection', function (socket: any) {
  console.log('simulator2_Namespace sockets->>>>');
socket.on('SOURCE', function (SOURCE) {
    
  })
});

Client Side

 class NsSocketsService {
  socketCGI_ONE: Socket;
  socketCGI_TWO: Socket;
  constructor() {

    this.socketCGI_ONE = io("http://192.168.5.116:4001/CGI_ONE");
    this.socketCGI_TWO = io("http://192.168.5.116:4001/CGI_TWO");


    this.socketCGI_ONE.on('connect', () => {
      this.socketCGI_ONE.emit('SOURCE', 'SESSION');
    });


    this.socketCGI_TWO.on('connect', () => {
      this.socketCGI_TWO.emit('SOURCE', 'SESSION');
    });

  }


}

In the above client-side code, socketCGI_TWO is overlapping on socketCGI_ONE. It means the first socketCGI_ONE is connected after socketCGI_TWO gets connected socketCGI_ONE will disconnect. I want both namespace connections to work simultaneously.

Answer 1

It seems like the issue might be related to the way the socket.io namespaces are defined on the server side and how the clients are connecting to these namespaces. Here's a modified version of your server and client code to ensure that both namespaces work simultaneously:

Server Side:

const express = require('express');
const cors = require('cors');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);

const PORT_SOCKET = 4001;
const IPADDRESS = '192.168.5.116';

app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.get('/', (req, res) => {
  res.json({ message: 'Welcome to the application.' });
});

server.listen(PORT_SOCKET, IPADDRESS, function () {
  console.log(`listening on *:  ${PORT_SOCKET} ---++---++--- ${IPADDRESS}`);
});

const io = socketIo(server, {
  cors: {
    origin: '*',
    allowedHeaders: ['Access-Control-Allow-Origin', 'Access-Control-Allow-Credentials'],
  },
});

const simulator1_Namespace = io.of('/CGI_ONE');
const simulator2_Namespace = io.of('/CGI_TWO');

simulator1_Namespace.on('connection', function (socket) {
  console.log('simulator1_Namespace socket connected');
  
  socket.on('SOURCE', function (SOURCE) {
    console.log('simulator1_Namespace SOURCE:', SOURCE);
  });
});

simulator2_Namespace.on('connection', function (socket) {
  console.log('simulator2_Namespace socket connected');

  socket.on('SOURCE', function (SOURCE) {
    console.log('simulator2_Namespace SOURCE:', SOURCE);
  });
});

Client Side:

import { io, Socket } from 'socket.io-client';

class NsSocketsService {
  socketCGI_ONE: Socket;
  socketCGI_TWO: Socket;

  constructor() {
    this.socketCGI_ONE = io("http://192.168.5.116:4001/CGI_ONE");
    this.socketCGI_TWO = io("http://192.168.5.116:4001/CGI_TWO");

    this.socketCGI_ONE.on('connect', () => {
      console.log('socketCGI_ONE connected');
      this.socketCGI_ONE.emit('SOURCE', 'SESSION');
    });

    this.socketCGI_TWO.on('connect', () => {
      console.log('socketCGI_TWO connected');
      this.socketCGI_TWO.emit('SOURCE', 'SESSION');
    });
  }
}

const nsSocketsService = new NsSocketsService();

Make sure to use http.createServer to create the server and pass it to socketIo to avoid any conflicts. Additionally, ensure that the client-side connections are established after the server is fully initialized.

By making these adjustments, both namespaces should work simultaneously without one disconnecting the other.