Broadcasting messages with socket.io

Continuing where we left off. We now attempt to send broadcasts to all connected clients.

Lets modify an event to enable broadcasting.

  socket.on('message-from-client', function(msg) {
    console.log(msg);
    socket.broadcast.emit('broadcast-to-client',{ message: msg.message });
  });

We add broadcasting in the message-from-client event. When we receive a message from a client we want to send it to other clients. So we execute the broadcast emit function and create a event broadcast-to-client.

socket.broadcast.emit('broadcast-to-client',{ message: msg.message });

You can use the above code where you need to broadcast your message.

In the client we just need to catch this event named broadcast-to-client.

   socket.on('broadcast-to-client', function(data){
        response.innerHTML = data.message;
    });

When we receive a broadcast we update the response jumbotron to view the message we received. We update the current clients’ jumbotron manually. You can see this in the submit button event handler.

    submitBtn.addEventListener("click",function(event){
      var clientMessage = message.value;
      response.innerHTML = clientMessage; 
      socket.emit('message-from-client', {
          message: clientMessage
        });
      event.preventDefault();
    });

We update the current response jumbotron before we emit the message-from-client event and pass the data to the server.

App.js File