Your messages have timestamps that are not very human-friendly. (Seriously, who tells time by the number of milliseconds since January 1, 1970?) To provide nicer timestamps (such as “10 minutes ago”), you will add a module called moment. Install it using npm and save it as a development dependency:

npm install --save-dev moment

Each of your messages stores its timestamp as a data attribute. Write an init method for ChatList that calls the built-in function setInterval, which takes two arguments: a function to run and how often that function should be run. Your function will update each message with a human-readable timestamp.

To set the timestamp string, use jQuery in dom.js to find all elements with a data-time attribute whose value is the numerical timestamp. Create a new Date object using that numerical timestamp and pass the object to moment. Then call the fromNow method to produce the final timestamp string and set that string as the element’s HTML text.

...
  drawMessage({user: u, timestamp: t, message: m}) {
    ...
  }

  init() {
    this.timer = setInterval(() => {
      $('[data-time]').each((idx, element) => {
        let $element = $(element);
        let timestamp = new Date().setTime($element.attr('data-time'));
        let ago = moment(timestamp).fromNow();
        $element.html(ago);
      });
    }, 1000);
  }
}

You are running this function every 1,000 milliseconds. To make sure a human-readable timestamp appears immediately, update drawMessage. Use moment to create a formatted timestamp string when the message is first drawn to the chat list.

...
  drawMessage({user: u, timestamp: t, message: m}) {
    ...
    $message.append($('<span>', {
      'class': 'timestamp',
      'data-time': t,
      text: (new Date(t)).getTime()
      text: moment(t).fromNow()
    }));
    ...

Finally, update app.js, adding a call to this.chatList.init inside the socket.registerOpenHandler callback:

...
class ChatApp {
  constructor () {
    this.chatForm = new ChatForm(FORM_SELECTOR, INPUT_SELECTOR);
    this.chatList = new ChatList(LIST_SELECTOR, username);

    socket.init('ws://localhost:3001');
    socket.registerOpenHandler(() => {
      this.chatForm.init((text) => {
        let message = new ChatMessage({message: text});
        socket.sendMessage(message.serialize());
      });
      this.chatList.init();
    });
    ...

Save and let your npm scripts compile your changes. Refresh the browser and start chatting. You should see your new timestamps appear with your message text. After a couple of minutes, you will notice that the message timestamps update (Figure 18.8).

Figure 18.8  Not-so-secret identities

You have come to the end of the road with Chattrbox. Though it only spanned a few chapters, it had quite a few moving parts. You learned how to write two kinds of servers in Node.js: a basic web server and a WebSocket server. You built the client application using ES6, utilizing Babel and Browserify to compile your code to ES5 so that Chattrbox can be used in older browsers, and you automated your workflow with npm scripts.

Chattrbox is the culmination of the techniques you have learned so far. The next application, Tracker, will introduce you to Ember.js, a framework for building large applications. It will build on your hard-won knowledge of modularity, asynchronous programming, and workflow tools.