Adding text-based chat

Now we will use what we have learned in this chapter to add data channel support to our communication application. Since the data channel can be used for any arbitrary data, we are going to add text-based chat as another feature of our application. The users will have a text box to enter a message into and a display of all the messages in the current call. When we are finished, it will end up looking something similar to this:

To get started, we will change the call page of our application. We will add three new elements—an input text field, a button, and a div. The input area and button will allow the user to enter text while div will hold all the messages between each user.

<div id="call-page" class="page">
      <video id="yours" autoplay></video>
      <video id="theirs" autoplay></video>
      <input type="text" id="their-username" />
      <button id="call">Call</button>
      <button id="hang-up">Hang Up&lt...