Customizing the output of the chat

It is nice that we can send messages to the right people, but the chat is still a bit confusing because every text message that appears on the screen is in the same color and we don't know which of our friends sent it. In this section, we are going to make two improvements—we will append the user's name to the front of the message and colorize the text.

Let's start with the colors and add a new helper method to the backend/api/helpers.js file:

var getRandomColor = function() {
  var letters = '0123456789ABCDEF'.split('');
  var color = '#';
  for(var i = 0; i < 6; i++ ) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

The following function generates a valid RGB color that is ready for use in CSS. The right moment for you to pick a color for the user is when you cache the socket object, as follows:

...
var getRandomColor = helpers.getRandomColor;

module.exports = function(app) {
  var io = require('socket.io')(app);
  io.on...