Creating the chat view

The chat view will be constructed from a simple form and a list of chat messages. To implement your chat view, you’ll first need to create a public/chat/views folder. In this folder, create a new file named chat.client.view.html that contains the following code snippet:

<section data-ng-controller="ChatController">
  <div data-ng-repeat="message in messages" data-ng-switch="message.type">
    <strong data-ng-switch-when='status'>
      <span data-ng-bind="message.created | date:'mediumTime'"></span>
      <span data-ng-bind="message.username"></span>
      <span>is</span>
      <span data-ng-bind="message.text"></span>
    </strong>
    <span data-ng-switch-default>
      <span data-ng-bind="message.created | date:'mediumTime'"></span>
      <span data-ng-bind="message.username"></span>
      <span>:</span>
      <span data-ng-bind="message.text"></span>
    </span>
  </div>
  <form ng-submit="sendMessage();">
    <input type="text" data-ng-model="messageText">
    <input type="submit">
  </form>
</section>

In this view, you used the ng-repeat directive to render the messages list and the ng-switch directive to distinguish between status messages and regular messages. You also used the AngularJS date filter to properly present the message time. Finally, you finished the view with a simple form that uses the ng-submit directive to invoke the sendMessage() method. Next, you will need to add a chat route to present this view.

Adding chat routes

To present the view, you will need to add a new route for it. To do so, first create the public/chat/config folder. In this folder, create a new file named chat.client.routes.js that contains the following code snippet:

angular.module('chat').config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
    when('/chat', {
      templateUrl: 'chat/views/chat.client.view.html'
    });
  }
]);

This should already be a familiar pattern, so let’s proceed to finalize the chat implementation.

Finalizing the chat implementation

To finalize your chat implementation, you will need to make a few changes in your main application page and include the Socket.io client file and your new chat files. Go to the app/views/index.ejs file and make the following changes:

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org">
  <head>
    <title><%= title %></title>
  </head>
  <body>
    <section ng-view></section>
    
    <script type="text/javascript">
      window.user = <%- user || 'null' %>;
    </script>

    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
    <script type="text/javascript" src="/lib/angular/angular.js"></script>
    <script type="text/javascript" src="/lib/angular-route/angular-route.js"></script>
    <script type="text/javascript" src="/lib/angular-resource/angular-resource.js"></script>

    <script type="text/javascript" src="/articles/articles.client.module.js"></script>
    <script type="text/javascript" src="/articles/controllers/articles.client.controller.js"></script>
    <script type="text/javascript" src="/articles/services/articles.client.service.js"></script>
    <script type="text/javascript" src="/articles/config/articles.client.routes.js"></script>

    <script type="text/javascript" src="/example/example.client.module.js"></script>
    <script type="text/javascript" src="/example/controllers/example.client.controller.js"></script>
    <script type="text/javascript" src="/example/config/example.client.routes.js"></script>

    <script type="text/javascript" src="/users/users.client.module.js"></script>
    <script type="text/javascript" src="/users/services/authentication.client.service.js"></script>

    <script type="text/javascript" src="/chat/chat.client.module.js"></script>
    <script type="text/javascript" src="/chat/services/socket.client.service.js"></script>
    <script type="text/javascript" src="/chat/controllers/chat.client.controller.js"></script>
    <script type="text/javascript" src="/chat/config/chat.client.routes.js"></script>
    
    <script type="text/javascript" src="/application.js"></script>
  </body>
</html>

Notice how we first added the Socket.io file. It’s always a good practice to include third-party libraries before your application files. Now, you’ll need to change the public/application.js file to include your new chat module:

var mainApplicationModuleName = 'mean';

var mainApplicationModule = angular.module(mainApplicationModuleName, ['ngResource', 'ngRoute', 'users', 'example', 'articles', 'chat']);

mainApplicationModule.config(['$locationProvider',
  function($locationProvider) {
    $locationProvider.hashPrefix('!');
  }
]);

if (window.location.hash === '#_=_') window.location.hash = '#!';

angular.element(document).ready(function() {
  angular.bootstrap(document, [mainApplicationModuleName]);
});

To finish up your chat implementation, change your public/example/views/example.client.view.html file and add a new chat link:

<section ng-controller="ExampleController">
  <div data-ng-show="!authentication.user">
    <a href="/signup">Signup</a>
    <a href="/signin">Signin</a>
  </div>
  <div data-ng-show="authentication.user">
    <h1>Hello <span data-ng-bind="authentication.user.fullName"></span></h1>
    <a href="/signout">Signout</a>
    <ul>
      <li><a href="/#!/chat">Chat</a></li>
      <li><a href="/#!/articles">List Articles</a></li>
      <li><a href="/#!/articles/create">Create Article</a></li>
    </ul>
  </div>
</section>

Once you are finished with these changes, your new chat example should be ready to use. Use your command-line tool and navigate to the MEAN application’s root folder. Then, run your application by typing the following command:

$ node server

Once your application is running, open two different browsers and sign up with two different users. Then, navigate to http://localhost:3000/#!/chat and try sending chat messages between your two clients. You’ll be able to see how chat messages are being updated in real time. Your MEAN application now supports real-time communication.