Erstellen einer einfachen Messaging-UI mit Bootstrap

Bootstrap, ursprünglich Twitter Blueprint genannt, wurde entwickelt von @mdo (Mark Otto) und @fat (Jacob Thornton) entwickelt, während sie bei Twitter arbeiteten, um die Konsistenz von Tools zu fördern. Heute ist es eines der beliebtesten Frontend-Frameworks und Open-Source-Projekte der Welt. Obwohl es von vielen Frontend-Entwicklern immer noch als Abkürzung betrachtet wird, hat es eine wichtige Rolle dabei gespielt, allen Entwicklern weltweit eine konsistente und freundliche Benutzererfahrung zu ermöglichen.

Das Design-Web ist überschwemmt mit allen möglichen Beispielen für Messaging-UIs, aber den Entwicklern fehlt die Auswahl an Frameworks, die ihnen Messaging-UIs bieten, die schnell und einfach zu implementieren sind, die sich auf so etwas Einfaches wie Bootstrapbasieren und die ohne viel benutzerdefiniertes CSS oder JavaScript auskommen. Sie können finden Sie Messaging UIs für Bootstrap in freier Wildbahn, aber keine von ihnen scheint Ihnen den Einstieg zu erleichtern, indem sie einfache Standardkomponenten aus der Bootstrap Bibliothek.

In dieser Anleitung werden Sie eine bestehende Chat-Anwendung mit Bootstrap 4mit Standardkomponenten und minimaler CSS-Bearbeitung.

Die Demo-Anwendung und ein fertiges Beispiel können jetzt auf GitHub gefunden werden.

Voraussetzungen

Knotenpunkt & NPM

Um loszulegen, müssen Sie Node und NPM installiert haben. Diese Anleitung verwendet Node 8 und NPM 6. Stellen Sie sicher, dass sie installiert und aktuell sind.

Sowohl Node als auch NPM müssen installiert sein und die richtige Version haben. Gehen Sie zu nodejs.org und installieren Sie die richtige Version, falls Sie sie noch nicht haben.

Vonage CLI

Um Ihre Anwendung einzurichten, müssen Sie die Vonage CLI installieren. Installieren Sie es mit NPM im Terminal.

Vonage API-Konto

Um dieses Tutorial durchzuführen, benötigen Sie ein Vonage API-Konto. Wenn Sie noch keines haben, können Sie sich noch heute anmelden und mit einem kostenlosen Guthaben beginnen. Sobald Sie ein Konto haben, finden Sie Ihren API-Schlüssel und Ihr API-Geheimnis oben auf dem Vonage-API-Dashboard.

In diesem Lernprogramm wird auch eine virtuelle Telefonnummer verwendet. Um eine zu erwerben, gehen Sie zu Rufnummern > Rufnummern kaufen und suchen Sie nach einer Nummer, die Ihren Anforderungen entspricht.

Sind Sie bereit, mit dem Bau zu beginnen?

Erleben Sie nahtlose Konnektivität, Echtzeit-Messaging und kristallklare Sprach- und Videoanrufe - alles auf Knopfdruck.

Melden Sie sich für einen kostenlosen Vonage Account an und richten Sie die Vonage-CLI mit dem API-Schlüssel und dem Geheimnis ein, die Sie auf dem Dashboard finden.

Die Vonage CLI verfügt über Plugins, die, wenn sie installiert werden, zusätzliche Funktionen bieten. In diesem Tutorial werden Sie mit Conversations arbeiten, daher hier der Befehl zur Installation des Plugins:

Git (optional)

Sie können git verwenden, um die Demo-Anwendung von GitHub klonen.

Für diejenigen, die sich mit Git-Befehlen nicht auskennen, habe ich eine Anleitung erstellt. Diese Anleitung enthält Anweisungen zum Herunterladen des Projekts als ZIP-Datei.

Folgen Sie dieser Anleitung zur Installation von Git.

Die Demo-Anwendung

Die Demo-Anwendung ist eine einfache Implementierung von Vonage's Conversation Client SDK Chat, einer JavaScript-Bibliothek zur schnellen und einfachen Implementierung von WebRTC.

Grundlegende Installation

Damit diese Anleitung einfach zu befolgen ist, klonen Sie die Demo-Anwendung direkt von GitHub.

Für diejenigen, die mit Git-Befehlen nicht vertraut sind, können Sie die Demo-Anwendung als Zip-Datei herunterladen herunterladen und lokal entpacken.

Wechseln Sie nach dem Klonen oder Entpacken in das neue Verzeichnis der Demoanwendung.

Installieren Sie die npm-Abhängigkeiten.

Konfigurieren Sie den Anwendungsport mithilfe einer Umgebungsdatei. Kopieren Sie die Beispieldatei:

Bearbeiten Sie nun die Umgebungsdatei .env und setzen Sie den Port auf 3000 (oder einen anderen Port, den Sie benötigen).

Neben anderen Paketen, die durch den letzten Befehl installiert wurden, gibt es ein Paket namens nodemondas es Ihnen ermöglicht, Ihre Anwendung neu zu laden, wenn Sie eine Datei automatisch bearbeiten.

Um die Anwendung auf die übliche Weise zu starten, führen Sie aus:

Um die Anwendung zu starten, aber stattdessen mit nodemon, führen Sie aus:

Tipp: Wenn Sie die Anwendung mit nodemon ausführen, müssen Sie die Anwendung nicht neu starten, wenn ich dies vorschlage, denn nodemon es für Sie tut. Wenn Sie sich jedoch erneut bei der Anwendung authentifizieren müssen, müssen Sie das trotzdem tun, da die Sitzungsinformationen im Speicher gespeichert werden und nicht für die Verwendung eines anderen Speichers konfiguriert sind.

Unabhängig davon, wie Sie die Anwendung starten, können Sie sie in Ihrem Lieblingsbrowser ausprobieren, der sie lokal finden sollte: http://localhost:3000.

A blank, broken Chat application

Sie ist größtenteils leer, Sie können niemandem eine Nachricht senden, und wenn Sie in Ihrer Browserkonsole nachsehen, finden Sie Vonage-API-Fehler, denn es ist Zeit, die Anwendung zu konfigurieren.

Konfigurieren Sie die Demo-Anwendung

Um eine Verbindung zu Vonage herzustellen und Nachrichten über den Dienst zu senden oder zu empfangen, müssen Sie die Demoanwendung konfigurieren.

Erstellen einer Vonage-Anwendung

Erstellen Sie zunächst eine Vonage-Anwendung mit RTC-Funktionen (Echtzeitkommunikation). Die Ereignis-URL wird ein Live-Protokoll von Ereignissen sein, die im Vonage-Dienst passieren, wie z. B. Benutzer, die ein- oder austreten, Nachrichten senden, Audio aktivieren (wenn Sie das möchten).

Vonage-Konversation erstellen

Zweitens: Erstellen Sie eine Vonage-Konversation, die wie ein Chatroom funktioniert. Oder ein Container für Nachrichten und Ereignisse.

Erstellen Sie Ihren Benutzer

Legen Sie nun einen Benutzer für sich selbst an.

Anmerkung: In dieser Demo werden Sie nicht zwischen zwei Benutzern chatten. Andere Anleitungen zeigen Ihnen, wie Sie Unterhaltungen zwischen mehreren Benutzern erstellen können. Dieser Leitfaden konzentriert sich auf die einfache, aber ansprechende Gestaltung Ihrer Nachrichten-UI.

Hinzufügen des Benutzers zu einer Konversation

Als Nächstes fügen Sie den neuen Benutzer zur Konversation hinzu. Ein Benutzer kann Mitglied einer Anwendung sein, muss aber dennoch der Unterhaltung beitreten.

Ein Benutzer-Token generieren

Zum Schluss erzeugen Sie für Ihren neuen Benutzer ein Token. Dieses Token repräsentiert den Benutzer beim Zugriff auf die Anwendung. Dieses Zugriffstoken identifiziert den Benutzer, so dass jeder, der es benutzt, als der richtige Benutzer angesehen wird.

In der Praxis werden Sie die Anwendung mit diesem Token konfigurieren. In der Produktion sollten diese geschützt und geheim gehalten werden und der Client-Anwendung, wenn überhaupt, nur sehr vorsichtig zugänglich gemacht werden.

Konfigurieren Sie die Anwendung

Nachdem Sie alle benötigten Teile generiert haben, bearbeiten Sie die views/layout.hbs Datei und finden Sie das hier gezeigte JavaScript:

<script>
      var userName = '';
      var displayName = '';
      var conversationId = '';
      var clientToken = '';
    </script>

Bearbeiten Sie die Konfiguration mit den Werten, die Sie mit den obigen Befehlen erzeugt haben.

<script>
      var userName = 'luke'; // <USER_NAME>
      var displayName = 'Luke Oliff'; // <DISPLAY_NAME>
      var conversationId = 'CON-123...y6346'; // <CONVERSATION_ID>
      var clientToken = 'eyJhbG9.eyJzdWIiO.Sfl5c'; // this will be much much longer
    </script>

Starten Sie die nun konfigurierte Anwendung neu. Greifen Sie auf die Anwendung über die derselben Anwendungs-URL.

Das erste, was Sie sehen werden, ist eine Zeile, die besagt, dass Sie der Unterhaltung mit Ihrem Benutzer beigetreten sind.

An almost blank, working Chat application

Dann können Sie über das Formular einige Nachrichten versenden, in denen Sie sich nach Herzenslust mitteilen können.

Sending some messages to our working Chat application

Einfache Messaging UI mit Bootstrap

Nachdem Sie Ihre Basisanwendung fertiggestellt haben, können Sie sie jetzt mit Bootstrap gestalten.

Jeder Schritt dieser Anleitung wird einzeln in den fertigen Beispielzweig dieses Projekts übertragen. Wenn Sie also zu irgendeinem Zeitpunkt auf einen Fehler im Prozess stoßen, können Sie auf die Commits selbst verweisen. Dort finden Sie auch Links zu den jeweiligen Commits der einzelnen Phasen.

Das HTML

Hinzufügen von Bootstrap zu der Anwendung

Sie beginnen mit der Bearbeitung der views/layout.hbs Datei noch bearbeiten und das Hauptdesign der Anwendung ändern, um die Bootstrap-CSS- und JavaScript-Ressourcen einzubeziehen.

Nachfolgend die Bootstrap Erste Schritte Anleitung, fügen Sie dieses <link> Tag innerhalb Ihres <head> vor allen anderen Stylesheets ein, um die CSS-Ressourcen zu laden. Der <link> Tag unten ist ein Beispiel, Sie können sich entweder auf die Übergabe in der Demo-Anwendung beziehen, oder Sie verwenden das <link> Tag in der Anleitung Bootstrap Getting Started.

<!-- views/layout.hbs -->
<!DOCTYPE html>
<html>
  <head>
    <!-- //... -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/..." integrity="..." crossorigin="anonymous">
    <!-- //... -->
  </head>

  <!-- //... -->

Außerdem benötigen Sie die empfohlenen Bootstrap- und JavaScript-Bibliotheken. Diese sind hier wohl nicht erforderlich. Aber viele der Bootstrap-Komponenten erfordern die Verwendung von JavaScript, um richtig zu funktionieren, und stützen sich auf Popper.js und jQuery. Auch hier können Sie sich entweder auf die Übergabe in der Demo-Anwendung oder die <script> Tags in der Anleitung Bootstrap Getting Started.

<!-- views/layout.hbs -->

<!-- //... -->

  <!-- //... -->
  
    <!-- //... -->
    <script src="https://code.jquery.com/..." integrity="..." crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js..." integrity="..." crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/..." integrity="..." crossorigin="anonymous"></script>
  </body>
</html>

Starten Sie die Anwendung neu und sehen Sie es sich noch einmal an. Sie können sehen, dass diese Änderungen nur minimale Auswirkungen hatten.

Styled the working Chat application with Bootstrap

Hinzufügen von Navigations- und Containerkomponenten

Da Bootstrap jetzt in Ihrer Anwendung enthalten ist, können Sie Ihre <nav> und Container zum Hauptlayout hinzufügen.

Weiter bearbeiten views/layout.hbsfügen Sie den folgenden Code hinzu, um den bestehenden {{{body}}} Ausdruck.

<!-- views/layout.hbs -->

<!-- //... -->

  <!-- //... -->
    <nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
      <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">{{title}}</a>
    </nav>

    <div class="container-fluid">
      <div class="row">

        <main role="main" class="col-md-12">
          <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
            <h1 class="h2">Bootstrap Chat</h1>
          </div>

          {{{body}}}

        </main>
      </div>
    </div>
  <!-- //... -->

<!-- //... -->

Wenn Sie die genauen Änderungen an der Datei sehen möchten, können Sie einen Blick auf die Übergabe.

Sie sehen nun, dass Sie eine Navigationsleiste hinzugefügt haben, aber der Chat bleibt ungestylt, was zu einigen Anzeigeproblemen führt. Starten Sie die Anwendung neu, um zu sehen, wie es jetzt aussieht.

Added navbar and container to Chat application

Listen und Eingaben

Da Messaging-UIs eine Liste von Nachrichten sind, werden Sie ein Listenelement <ul> semantisch.

Bearbeiten Sie views/index.hbs und ändern Sie das <div id="messageFeed"> in ein ungeordnetes Listenelement (Aufzählungszeichen) <ul> wie gezeigt. Die list-unstyled ist eine Bootstrap-Klasse, die Aufzählungszeichen und Einrückungen aus dem nativen Listenstyling entfernt.

<ul class="list-unstyled" id="messageFeed">
        </ul>

Die Verwendung der entsprechenden semantischen Markierung für Listen hat den Vorteil, dass die Informationen in Textbrowsern und Screenreadern korrekt angezeigt werden. Ihre Nachrichten werden schließlich auch Listenelemente <li> Elemente sein.

Bei der Bearbeitung von views/index.hbskönnen Sie auch die folgenden Ersetzungen vornehmen. Finden Sie diese beiden <input> Elemente.

          <input type="text" id="messageTextarea">
          <input type="button" id="send" value="Send" />

Ersetzen Sie sie durch dieses Markup, das eine Bootstrap-Schaltflächengruppe, einen gestalteten Textbereich und eine Schaltfläche "Senden" enthält.

<div class="input-group mb-3">
            <input type="text" class="form-control" id="messageTextarea">
            <div class="input-group-append">
              <button class="btn btn-outline-secondary" type="button" id="send">Send</button>
            </div>
          </div>

Werfen Sie einen Blick auf die Übergabe um genau zu sehen, wie die Datei bearbeitet werden soll.

Starten Sie die Anwendung neu und sehen Sie es sich noch einmal an. Sie haben zwar geändert, wie die Nachrichten hinzugefügt werden, aber an der Gestaltung hat sich nicht viel geändert. Aber zumindest ist das Formular näher an dem, was man von einer Nachrichten-Benutzeroberfläche erwarten würde.

Chat application now using list items and chat-style inputs

Das CSS

Nachdem die Änderungen am Markup abgeschlossen sind, geschehen einige seltsame Dinge im Layout.

Diese drei CSS-Änderungen sind in einer einzigen einzigen Übergabe auf public/stylesheets/style.css.

Feste Ränder der Navigationsleiste

Die erste CSS-Änderung ist das Hinzufügen von padding-top zum Hauptinhaltscontainer hinzuzufügen, wobei die Höhe der Navigationsleiste (40px) und ein geeigneter Leerraum auf der Grundlage des Standardstylings von Bootstrap (8px) berücksichtigt werden.

/* ... */

[role="main"] {
  padding-top: 48px; /* space for fixed navbar (40px) and margin (8px) */
}

Starten Sie die Anwendung neu und versuchen Sie es.

Fixed header margins in chat application

Scrollbarer Nachrichten-Feed

Diese Änderung an messageFeed legt fest, dass die Höhe des Elements, das die Meldungen enthält, 100 % der Viewport-Höhe abzüglich der Höhen der Navigationsleiste (48px), der Haupttitelleiste (71px) und der Fußzeile (noch zu gestalten, 53px) betragen soll.

/* ... */

#messageFeed {
  height: calc(100vh - 172px); /* space for fixed navbar (48px), "main" title (71px), footer (53px) */
  overflow-y: scroll; /* vertical scroll for the message feed */
}

Starten Sie die Anwendung neu und versuchen Sie es. Um den Überlauf für die messageFeedzu sehen, müssen Sie einige weitere Nachrichten senden.

Chat application message feed now scrollable

Feste Texteingabe für das Versenden von Nachrichten

Diese letzte CSS-Änderung betrifft den Bereich <footer>, die den Texteintrag und die Schaltfläche enthält. Sie möchten sie am unteren Rand des Fensters in voller Breite fixieren. Legen Sie die Höhe (53px) fest, geben Sie ihm eine Hintergrundfarbe und fügen Sie einen Standardrand hinzu, der durch das Bootstrap-Thema definiert ist.

/* ... */

#messages footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%; /* 100% of page width */
  padding: 0 15px 15px 15px; /* standard edge margin (15px) */
  height: 53px; /* space for input height (38px) + bottom padding (15px) */
  background-color: #fff;
}

Starten Sie die Anwendung neu und versuchen Sie es.

Chat application inputs now fixed to footer

Das JavaScript

Die letzten Änderungen, die Sie an der Demo-Anwendung vornehmen werden, betreffen das JavaScript, das mit der Demo geliefert wurde. Diese Änderungen werden alle in der Datei public/javascripts/chat.js Datei vorgenommen.

Markup für das Ereignis Mitglied beigetreten

Bearbeiten Sie die Datei und suchen Sie die memberJoined Funktion. Ändern Sie sie so, dass sie ein Listenelement <li> Element zurückgibt, wie unten gezeigt.

// public/javascripts/chat.js

//...

  memberJoined(member, event) {
    const date = new Date(Date.parse(event.timestamp));

    return `<li class="my-2 text-center">` +
    `<p>${member.display_name} joined the conversation <small>@ ${date.toLocaleString('en-GB')}</small></p>` +
    `</li>`;
  }

//...

Um zu sehen, wie die JavaScript-Funktion geändert wird, sehen Sie sich die Übergabe.

Starten Sie die Anwendung neu und versuchen Sie es erneut mit der Anwendungs-URL. Sie werden nun sehen, dass die vom Benutzer hinzugefügte Nachricht im Nachrichten-Feed gut zentriert ist.

Chat application events now using line items

Markierungen für Von-mir- und An-mir-Nachrichten

In der gleichen Datei finden Sie die senderMessage Funktion. Bearbeiten Sie sie, um ein Listenelement zurückzugeben <li> Element zurückgibt, das ein Medienobjekt. Medienobjekte ähneln Nachrichten insofern, als sie einen Titel (für den Autor und die Metadaten), einen Inhalt (die Nachricht) und ein optionales Bild haben.

In diesem Fall haben Sie eine Bedingung, die die Ausgabe bestimmt:

• Ein Standard-Medienobjekt, wenn die aktuelle user.name gleich der Nachricht ist user.name - Von mir.

• Ein Medienobjekt mit rechtsbündigem Text, wenn die aktuelle user.name nicht der Nachricht entspricht user.name - An mich.

// public/javascripts/chat.js

//...

  senderMessage(user, sender, message) {
    const date = new Date(Date.parse(message.timestamp))
    var output = '';

    if (user.name === sender.user.name) {
      output = `<li class="media my-3">` +
      `<div class="media-body">` +
      `<h5 class="mt-0 mb-1">${sender.display_name} <small>@ ${date.toLocaleString('en-GB')}</small></h5>` +
      message.body.text +
      `</div>` +
      `</li>`;
    } else {
      output = `<li class="media my-3">` +
      `<div class="media-body text-right">` +
      `<h5 class="mt-0 mb-1">${sender.display_name} <small>@ ${date.toLocaleString('en-GB')}</small></h5>` +
      message.body.text +
      `</div>` +
      `</li>`;
    }

    return output;
  }

//...

Um zu sehen, wie diese JavaScript-Funktion geändert wird, sehen Sie sich die Übergabe.

Starten Sie die Anwendung neu und versuchen Sie es erneut mit der Standard-URL: http://localhost:3000. Sie werden nun sehen, dass Ihre Nachrichten schön gestylt sind.

Now using from-me and to-me message style in chat application

Adorable.io Avatare für Benutzer hinzufügen

Da es in Ihrer Anwendung keine Benutzerprofile gibt, wirkt sie durch das Fehlen von Avataren ein wenig leer. Um das Aussehen des Medienobjekts zu vervollständigen und ihm den Effekt einer modernen Chat-Anwendung zu verleihen, können Sie einen Platzhalter-Avatar-Dienst wie adorable.io verwenden, der auf Benutzerinformationen basiert.

Adorable akzeptiert jede beliebige Zeichenkette als Teil einer URL, https://api.adorable.io/avatars/64/my-string-here.png und gibt ein lustiges Gesicht zurück. Es ist eine großartige Möglichkeit, ein Platzhalterbild hinzuzufügen, das sich von Benutzer zu Benutzer ändert.

Bearbeiten Sie also weiterhin dieselbe Datei, gehen Sie zurück zu der senderMessage zurück und fügen Sie diese Zeile nach dem ersten Element der Zeile <li> Element, für Nachrichten von-ich.

// public/javascripts/chat.js

//...

      `<img src="https://api.adorable.io/avatars/64/${btoa(sender.display_name)}.png" class="mr-3" alt="" />` +

//...

Fügen Sie dann diese Zeile in die Datei zu-ich Seite der Bedingung ein, unmittelbar vor dem abschließenden </li> Element.

// public/javascripts/chat.js

//...

      `<img src="https://api.adorable.io/avatars/64/${btoa(sender.display_name)}.png" class="ml-3" alt="" />` +

//...

Der entscheidende Unterschied zwischen diesen Zeilen ist, dass die eine die mr-3 Klasse hat und die andere die ml-3 Klasse hat. Die eine ist für ein linksbündiges Bild mit einem Rand auf der rechten Seite. Die andere für ein rechtsbündiges Bild mit einem Rand auf der linken Seite. Wenn man das durcheinander bringt, sieht es vielleicht etwas seltsam aus. Werfen Sie also einen Blick auf diese Übergabe um zu überprüfen, ob Sie es richtig gemacht haben.

Wenn Sie mit Ihren Änderungen zufrieden sind, starten Sie neu und werfen Sie einen Blick auf die Anwendung.

Adorable.io avatars in chat application

Scroll-To-Bottom für Nachrichten hinzufügen

Bei herkömmlichen Messaging-Benutzeroberflächen stehen die neuesten Nachrichten ganz unten, und man scrollt nach oben, um ältere Nachrichten zu sehen. Auch die Demo-Anwendung ordnet Nachrichten und Ereignisse auf diese Weise an. Damit Sie sich auf den richtigen Inhalt konzentrieren können, können Sie nun den folgenden Code hinzufügen. Dieser Code blättert den Nachrichten-Feed automatisch nach unten, wenn eine neue Nachricht eintrifft, allerdings nur, wenn sich der Nachrichten-Feed bereits am unteren Rand befand. Wenn Sie also nach oben blättern, um ältere Nachrichten zu sehen, wird nichts passieren.

Fügen Sie zwei neue Funktionen in die chat.js Datei hinzu. Die erste Funktion gibt den booleschen Wert zurück, ob messageFeed ganz unten ist oder nicht. Die andere Funktion blättert messageFeed bis zum Ende.

// public/javascripts/chat.js

//...

  isFeedAtBottom() {
    return (this.messageFeed.offsetHeight+this.messageFeed.scrollTop)===this.messageFeed.scrollHeight;
  }

  scrollFeedToBottom() {
    this.messageFeed.scrollTop = this.messageFeed.scrollHeight;
  }
  
//...

Als Nächstes ändern Sie die Ereignis-Listener für neue gesendete Nachrichten und neue Mitglieder, die der Unterhaltung hinzugefügt werden. In beiden Fällen zeichnen Sie die Bildlaufposition des Nachrichtenfeeds auf, bevor Sie die Zeile hinzufügen. Dann scrollen Sie je nach dem Kontext vor der Änderung (oder nicht).

// public/javascripts/chat.js

//...

  setupConversationEvents(conversation, user) {
    //...

    conversation.on('text', (sender, message) => {
      var feedAtBottom = this.isFeedAtBottom();

      // ...

      if (feedAtBottom) {
        this.scrollFeedToBottom();
      }
    })

    conversation.on("member:joined", (member, event) => {
      var feedAtBottom = this.isFeedAtBottom();

      // ...

      if (feedAtBottom) {
        this.scrollFeedToBottom();
      }
    })
  
    //...

  }
  
//...

Die letzte Änderung an der Demo-Anwendung besteht darin, dass der Nachrichten-Feed beim Laden der Seite nach unten gescrollt wird. Also, nach der Zeile, in der Sie die eventsHistory zum Nachrichten-Feed (this.messageFeed.innerHTML = eventsHistory + this.messageFeed.innerHTML), fügen Sie this.scrollFeedToBottom();.

// public/javascripts/chat.js

//...

  showConversationHistory(conversation, user) {
    // ...

      // ...

        this.messageFeed.innerHTML = eventsHistory + this.messageFeed.innerHTML;

        this.scrollFeedToBottom();

      // ...

    // ...
  }

//...

Um sicherzugehen, dass Sie diese Änderung korrekt durchgeführt haben, können Sie die Übergabe einsehen.

Wenn Sie mit Ihren Änderungen zufrieden sind, starten Sie neu und werfen Sie einen Blick auf die Anwendung.

Chat application message feed now scrolls to bottom

Das Ende

Wenn I eine Chat-Anwendung bauen würde, würde ich so vorgehen würde ich es aussehen.

Wir hoffen, dass dieser Leitfaden zur Erstellung einer Messaging-UI für Sie nützlich ist. Er enthält die Grundlagen, wie Von-mir und An mich Ausrichtung, automatisches Scrollen nach unten und Platzhalter für Benutzeravatare.

Sie können diese UI-Techniken nun in einigen anderen Vonage Conversation Client SDK-Tutorials anwenden, z. B. Hinzufügen von Voice-Funktionalität zu einer bestehenden Chat-Applikation, Registrieren zum Chatten mit Typeformund die JavaScript Client SDK Überblick.

Einige unserer anderen Anleitungen beinhalten das Senden von Nachrichten zwischen mehreren Benutzern! Ich fordere Sie heraus, mehrere Benutzer dazu zu bringen, sich gegenseitig Nachrichten zu senden, indem Sie eine gut aussehende Messaging-Oberfläche verwenden und Ihre Fortschritte teilen.

Chat application using multiple users

Und vergessen Sie nicht, wenn Sie Fragen, Ratschläge oder Ideen haben, die Sie mit der breiteren Gemeinschaft teilen möchten, dann können Sie sich gerne in unserer Gemeinschaft Slack Arbeitsbereich oder schreibe uns unten eine Antwort 👇.