Socket.on is not firing

Question

I am building a message board as a learning exercise and have working notifications and a chat app working with socket.io.

I am trying to integrate a basic video call functionality, but I am stumped on some basic preparations for that feature. My socket.on code isn't firing when the server emits the relevant function and I have no clue why. The console logs around the emits are all executing, so I know the code is being reached.

On the client my socket.on code is in the same component as my notifications and they are working and it is definitely mounted.

It's the userOff and receiveCall functions that aren't being executed (for whatever reason)...

Any help will be appreciated.

Server:

io.on('connection', (socket) => {
  socket.emit('messageFromServer');
  socket.on('messageToServer', (dataFromClient) => {
    connectedUsers[dataFromClient.username] = socket;
  });
  socket.on('join', ({ username, room }) => {
    socket.join(room);
    socket.emit('message', 'Welcome!');
    socket.broadcast
      .to(room)
      .emit('message', `${username} has joined the room!`);
  });
  socket.on('messageRoom', ({ username, room, message }) => {
    socket.broadcast.to(room).emit('message', `${username}: ${message}`);
  });
  socket.on('call', ({ username, id }) => {
    if (connectedUsers[username]) {
      connectedUsers[username].emit('recieveCall', id);
      console.log('online emitted');
    } else {
      socket.emit('userOff');
      console.log('offline emitted');
    }
  });
  socket.on('disconnect', () => {
    socket.disconnect(true);
  });
});

client:

import React, { useContext, useEffect } from 'react';
import socketIOClient from 'socket.io-client';
import StateContext from '../StateContext';
import DispatchContext from '../DispatchContext';
const endpoint = 'http://localhost:5000';

const Socket = () => {
  const appState = useContext(StateContext);
  const appDispatch = useContext(DispatchContext);
  const socket = socketIOClient(endpoint);

  useEffect(() => {
    socket.on('messageFromServer', () => {
      socket.emit('messageToServer', { username: appState.username });
    });
    socket.on('userOff', () => {
      console.log('user offline');
    });
    socket.on('recieveCall', (id) => {
      console.log('recieve call');
    });
    socket.on('mailNotification', () => {
      document.getElementById('notifyMail').classList.add('notify');
    });
    socket.on('boardsNotification', () => {
      document.getElementById('notifyBoards').classList.add('notify');
    });
  }, []);

  return null;
};

export default Socket;

Answer 1

did you try call socket.open first

https://socket.io/docs/client-api/#socketopen

and listen the connect event

https://socket.io/docs/client-api/#Event-%E2%80%98connect%E2%80%99