Transport error with socket io

Question

I am trying to send a username to the backend upon disconnecting with socket io, when I pass the username as a parameter when unsubscribing from the socket connection it given me the issue transport error.

Here is my code

Client side 'connection' is just a variable :

      messages = [];
      connectedUsers = [];
      connection;
      message;
      Username = JSON.parse(localStorage.getItem('user')).username;
      users = [];

ngOnDestroy() {
    this.connection.unsubscribe({username: 'emons'});
}

server side this is where I handle the emit's the console logs are functional but the 'console.log(usersConnected[i] +' was spliced')' doesn't work because the condition is never met:

const app = express();

const port = 3000;
const server = http.Server(app);
const io = socketIo(server);

var usersConnected = [];

    io.on('connection', function(socket){
        console.log('a user connected');
        /*socket.on('new-connection', function(user) {
            io.sockets.emit('newUser', {type: 'new-connection', username: user});
        }); */


        socket.on('disconnect', function(user){
            console.log(user + '   jsjasdjbskjcbawsjbsajdbasjabdsj')
            for (var i = 0; i < usersConnected.length; i++) {
                if (user.username == usersConnected[i]) {
                    usersConnected.splice(i, 1);
                    console.log(usersConnected[i] +' was spliced')
                };
            } 
            console.log(usersConnected);
            console.log('user disconnected');
        });


        socket.on('add-message', function(msg){
            console.log('added message');
            io.sockets.emit('message', {type: 'new-message', username: msg.user, text: msg.message});
        });
        //trying to get all the users.
        socket.on('chat-connection', (data) => {
            socket.join(data.username);
            console.log(data.username);
            usersConnected.push(data.username);
            io.emit('new-user', usersConnected);
        })


    });

chat.service.ts:

   sendMessage(message) {
      this.socket.emit('add-message', message);
    }

    sendUser(user) {
      console.log(user);//print correctly
      this.socket.emit('chat-connection', user);
    }

    removeUser(user) {
      this.socket.emit('remove-user', user);
    }

    getMessages() {
      let observable = new Observable(observer => {
        this.socket = socketIo(this.url);
        this.socket.on('message', (data) => {
          observer.next(data);
        });

        return () => {
          this.socket.disconnect();
        }
      });
      return observable;
    }

  getUsers() {
    let userObservable = new Observable(observer => {
      this.socket = socketIo(this.url);
      this.socket.on('new-user', (data) => {
        observer.next(data);
      });
    });
    return userObservable;
  }

Answer 1

I think your Server side can be:

let allClients = [];

socket.on('connection', function(client) {
    allClients.push(client);

    client.once('disconnect', function() {
        console.log('Got disconnect!');

        client.disconnect();
        var i = allClients.indexOf(client);
        allClients.splice(i, 1);
    });

    client.on('LEAVE_ROOM', function (data) {
        console.log('Got disconnect!', data);

        client.disconnect();
        var i = allClients.indexOf(client);
        allClients.splice(i, 1);
    });
});

disconnect event for network disconnect. You can setting timeout when initialize SocketIO Server:

pingTimeout (Number): how many ms without a pong packet to consider the connection closed (60000)

And Client side can be:

$(window).on('beforeunload', function(){
    socket.emit('LEAVE_ROOM', reason);
});

Answer 2

Although unrelated to the original question, the transport error also could happen if you're trying to send a bigger message than the socket server allows.

You might want to increase maxHttpBufferSize in the socket server based on the messages it receives from its clients.

https://socket.io/docs/v4/server-options/#maxhttpbuffersize