Socket.io question - how does the client and server communicate

Question

I just started on socket.io. I am going through the example mentioned in the web page. Specifically the server code below

io.on('connection', function(socket){
    socket.on('nitrous', function(msg){
      io.emit('nitrous', msg);
      console.log( "Server is emiting the event");
    });
  });

in conjunction with the client code below

<script src="/socket.io/socket.io.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
  $(function () {
    var socket = io();
    $('form').submit(function(e){
      e.preventDefault(); // prevents page reloading
      socket.emit('nitrous', $('#m').val());
      $('#m').val('');
      return false;
    });
    socket.on('nitrous', function(msg){
      $('#messages').append($('<li>').text(msg));
        console.log( "Client is emiting the event");
    });
  });
</script>

I understand that we the form is submitted, it would emit an event called 'nitrous' and then the handler registered on the socket would be invoked. But I also noticed that the handler on the socket object at the server too is getting invoked. My first question is how is this happening for all the users who are connected to the application. Secondly, in the server, there is the io.emit() with the same event name which is being passed - how and where is this handled ?. I did not include any io.on() but it still works.

I am referring to this example: https://socket.io/get-started/chat/#Integrating-Socket-IO

Please share your thoughts on the same.

Thanks, Pavan.

Answer 1

let me rewrite your code to explain what is going on:

// Server

// when server gets new client connected do this:
serverSocket.on('connection', function (client) {

  // when server receives event from client that called "nitrous" do this:
  client.on('nitrous', function (msg) {

    // emit event with name "nitrous" to every client - including sender
    serverSocket.emit('nitrous', msg)

    // or could just emit event to everyone but sender
    // client.broadcast.emit('nitrous') // uncomment this line

    console.log('Server receives the event from client')
  })

})

Now client side (only javascript):

// Client

$(function () {
  const clientSocket = io()

  $('form').submit(function (e) {
    e.preventDefault() // prevents page reloading

    // message that client wants to send
    const msg = $('#m').val()

    // emit event called "nitrous" to server
    clientSocket.emit('nitrous', msg)

    // clear input field
    $('#m').val('')

    return false
  });

  // when client receives event from server called 'nitrous' do this:
  clientSocket.on('nitrous', function (msg) {
    // append LI element to list of messages
    $('#messages').append($('<li>').text(msg))

    console.log('Client receives the event')
  })
})

Hope that makes more sense.