That takes care of sending outgoing chat messages. Your next job is to display new messages from the server as they come in. To do that, you will create a second class in dom.js representing the list of chat messages the user sees.

ChatList will create DOM elements for each message, which will display the name of the user who sent the message and the message text. In dom.js, create and export a class definition for a new class called ChatList to fulfill this role:

import $ from 'jquery';

export class ChatForm {
  ...
}

export class ChatList {
  constructor(listSel, username) {
    this.$list = $(listSel);
    this.username = username;
  }
}

ChatList accepts the attribute selector and the username. It needs the attribute selector so that it knows where to attach the message list elements it creates. And it needs the username so it can see which messages were sent by your user and which were sent by everyone else. (Your messages will be displayed differently from those sent by other users.)

Now that ChatList has a constructor, it also needs to be able to create DOM elements for messages.

Add a drawMessage method to ChatList. It will expect to receive an object argument, which it will destructure into local variables for the username, timestamp, and text associated with the message. (To make it clearer what the destructuring assignment is doing, single character local variables are used.)

...
export class ChatList {
  constructor(listSel, username) {
    this.$list = $(listSel);
    this.username = username;
  }

  drawMessage({user: u, timestamp: t, message: m}) {
    let $messageRow = $('<li>', {
      'class': 'message-row'
    });

    if (this.username === u) {
      $messageRow.addClass('me');
    }

    let $message = $('<p>');

    $message.append($('<span>', {
      'class': 'message-username',
      text: u
    }));

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

    $message.append($('<span>', {
      'class': 'message-message',
      text: m
    }));

    $messageRow.append($message);
    $(this.listId).append($messageRow);
    $messageRow.get(0).scrollIntoView();
  }
}

Your drawMessage method creates a row for the message with the username, timestamp, and the message itself displayed. If you are the sender of the message, it adds an extra CSS class for styling. It then appends your message’s row to ChatList’s list element and scrolls the new message row into view.

With that, ChatList is ready to rock. Time to integrate it into ChatApp.

In app.js, update the dom import statement so that it also imports ChatList. Add a const for the list selector, then instantiate a new ChatList in the constructor.

import socket from './ws-client';
import {ChatForm, ChatList} from './dom';

const FORM_SELECTOR = '[data-chat="chat-form"]';
const INPUT_SELECTOR = '[data-chat="message-input"]';
const LIST_SELECTOR = '[data-chat="message-list"]';

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

    socket.init('ws://localhost:3001');
    ...

You are almost up and running. The final step to getting basic chat functionality is to draw new messages as they come in by calling chatList.drawMessage. Do this in registerMessageHandler in app.js:

...
class ChatApp {
  ...
    socket.registerMessageHandler((data) => {
      console.log(data);
      let message = new ChatMessage(data);
      this.chatList.drawMessage(message.serialize());
    });
  }
}
...

You create a new ChatMessage using the incoming data, then you serialize the message. This is a precautionary step to strip away extra metadata that might have been added to the data. Creating a new ChatMessage from the socket data gives you your message, and this.chatList.drawMessage draws that serialize message into your browser.

Time to give it a whirl. If you have not already, start Watchify (with npm run watch) and nodemon (with npm run dev). Open or refresh your browser and type in a message (Figure 18.2).

Figure 18.2  Seeing your own chat message

Hooray! You now have a working chat application. It just needs a few design touches for some polish.