JavaScript

Erstellen Sie die UI

Erstellen Sie die Benutzeroberfläche für Ihren Webchat.

Das folgende HTML definiert eine <section> die Sie zur Anzeige verwenden werden:

Der Name des aktuell angemeldeten Benutzers
den aktuellen Status des Benutzers, d. h. ob er gerade eine Nachricht schreibt
Die bisher gesendeten und empfangenen Nachrichten
Ein Textfeld, in das Ihr Benutzer eine neue Nachricht eingeben kann

Die Webseite lädt drei Skripte, sobald der Seitenkörper gerendert ist:

Die nexmoClient.js Datei aus der nexmo-client Modul Knotenpunkt
Die chat.js Datei, die den Code Ihrer Anwendung enthalten wird. Erstellen Sie diese leere Datei im Stammverzeichnis des Projekts

Erstellen Sie eine Datei mit dem Namen index.html in Ihrem Projektverzeichnis mit folgendem Inhalt:

<!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>