JavaScript

Crear la interfaz de usuario

Cree la interfaz de usuario para su chat web.

El siguiente HTML define un <section> que utilizará para visualizar:

El nombre del usuario conectado actualmente
El estado actual del usuario, es decir, si está escribiendo un mensaje.
Los mensajes enviados y recibidos hasta ahora
Un área de texto para que el usuario escriba un nuevo mensaje

La página web carga tres scripts una vez que el cuerpo de la página se ha renderizado:

En nexmoClient.js del archivo nexmo-client Módulo de nodos
En chat.js que contendrá el código de su aplicación. Cree este archivo vacío en el directorio raíz del proyecto

Cree un archivo llamado index.html en el directorio de su proyecto con el siguiente contenido:

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      font: 13px Helvetica, Arial;
    }

    #login,
    #messages {
      width: 80%;
    }

    form input[type=text] {
      font-size: 20px;
      height: 35px;
      padding: 0px;
    }

    button {
      height: 35px;
      background-color: blue;
      color: white;
      width: 75px;
      position: relative;
      font-size: 15px;
    }

    textarea {
      width: 85%;
      font-size: 20px;
    }

    #messageFeed {
      font-size: 18px;
      padding-bottom: 20px;
      line-height: 22pt;
      height: 300px;
      overflow-y: auto;
    }

    #status {
      height: 35px;
      font-size: 12px;
      color: blue;
    }

    #send {
      width: 85%;
    }

    #messages {
      display: none;
    }
  </style>
</head>

<body>

  <form id="login">
    <h1>Login</h1>
    <input type="text" id="username" name="username" value="" class="textbox">
    <button type="submit">Login</button>
  </form>

  <section id="messages">
    <h1 id="sessionName"></h1>

    <div id="loadSection">
      <button id="loadMessages">
        Load Previous Messages
      </button>
      &nbsp; &nbsp;<h3>Showing <span id="messagesCount"></span> starting at <span id="messageDate"></span></h3>
    </div>

    <div id="messageFeed"></div>

    <div>
      <textarea id="messageTextarea"></textarea>
      <button id="send">Send</button>
      <div id="status"></div>
    </div>
  </section>

  <script src="./node_modules/nexmo-client/dist/nexmoClient.js"></script>
  <script src="./chat.js"></script>

</body>

</html>