We are ready to write some working Socket.IO code. So far, we placed code snippets that only proved that the socket connection works. For example, the code that was added to frontend/js/app.js should be moved to frontend/js/controllers/Chat.js, which is the controller responsible for the chat page. Because it acts as a base for this real-time feature, we will start from there. Let's add a couple of local variables to the component, as follows:

data: {
  messages: ['Loading. Please wait.'],
  output: '',
  socketConnected: false
}

These variables have default values, and they are available in the component's template. The first one, messages, will keep all the messages that come from the users in the chat, including the current user. The output variable is used to populate the message container on the screen. The last one, socketConnected, controls the visibility of the text field and the button. If it is set to false, the controls will...