Chat-Paginierung mit unendlichem Bildlauf

Anknüpfend an den vorherigen Beitrag Erstellen einer einfachen Messaging-Oberfläche mit Bootstrapzeigt dieser Artikel, wie man mit dem Vonage Conversation Client SDK ältere Nachrichten aus der Konversation laden kann, die jetzt paginiert von der Conversation API geliefert wird.

Voraussetzungen

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.

Sind Sie bereit, mit dem Bau zu beginnen?

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

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.

Sie finden Ihren API-Schlüssel und Ihr Geheimnis auf der Seite Dashboard die für die Einrichtung der Vonage CLI verwendet werden.

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.

Erste Schritte

Basierend auf der fertigen Anwendung aus dem letzten Tutorial gibt es eine neue Start-Demo-Anwendung. Klonen und installieren Sie sie, indem Sie diese Schritte ausführen.

Holen Sie sich die Demo-App

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.

Konfigurieren Sie die Demo-App

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 und rufen Sie sie über die Standard-URL der Anwendung.

Hinweis: Dies ist nur ein Beispiel, und Sie sollten keine Anmeldedaten in eine Anwendung einbauen, vor allem nicht in eine, die sie dem Kunden zugänglich macht.

Vonage Chat Simple Messaging UI

Vorbereiten einer Nachrichtenhistorie

Da Sie mehr Nachrichten zum Durchblättern benötigen, erstellen Sie einen Nachrichtenverlauf, indem Sie mehrere Nachrichten an den Client senden. Die Standardseitengröße beträgt 20 Elemente, also erstellen Sie mehr als 20 Nachrichten. Ich empfehle, 60 Testnachrichten zu erstellen, damit Sie 2 ganze Seiten des Verlaufs laden können.

Hinzufügen einer Paginierung zur App

In den Standardeinstellungen für die Anwendung werden nur 20 Elemente aus den vergangenen Ereignissen der Unterhaltung angezeigt. Jetzt ist es an der Zeit, der Anwendung eine Paginierung hinzuzufügen, damit Benutzer ältere Ereignisse laden können.

Was ist Paginierung?

Paginierung oder Paging ist die Art und Weise, wie eine Anwendung den Inhalt in mehrere Seiten unterteilt. Wenn sie in einem API-Design implementiert ist, ermöglicht sie die Bereitstellung überschaubarer Sammlungen von Ergebnissen, die in der Regel programmatisch navigiert werden können. SDKs wie das Vonage Conversation Client SDK unterscheiden sich davon nicht, da sie die Paginierungsfunktionalität der APIs häufig in benutzerfreundliche Methoden erweitern, die die Paginierung vereinfachen.

Das Benutzererlebnis

Einige Applications bieten Links wie "Weiter" oder "Zurück" oder Seitenzahlen. Aber das ist nicht das, was Sie hier implementieren werden. Da es sich bei den Nachrichten in einem Chat-Kanal um einen kontinuierlichen Gesprächsstrom handelt, können die Benutzer mit dieser Anwendung einfach weiter durch die historischen Nachrichten blättern. Dies geschieht durch ein Konzept, das als unendliches Scrollen bekannt ist. Wenn Sie durch ältere Nachrichten blättern und zum Ende gelangen, fordert die App die nächste Seite des Verlaufs an und fügt sie ein. Bei älteren Kanälen mit einer großen Anzahl von Nachrichten hat man das Gefühl, dass man ewig weiterblättern kann, also ein unendliches Scrollen.

Der Kodex

Jetzt werden Sie etwas Code schreiben. Hier werden Sie Änderungen vornehmen, um die Bildlaufposition Ihrer Nachrichtenliste zu erkennen und weitere Nachrichten zu laden, wenn Sie die älteste Nachricht erreichen. Die älteste Nachricht wird ganz oben im Fenster angezeigt.

Nach oben blättern

Um zu erkennen, wenn Sie nach oben blättern, müssen Sie ein neues Ereignis hinzufügen. Bearbeiten Sie die public/javascripts/chat.js Datei und fügen Sie den folgenden Code unter der setupUserEvents() Methode ein.

// public/javascripts/chat.js

// ...

  setupUserEvents() {

    // ...

    this.messageFeed.addEventListener("scroll", () => {
        alert('scrolling!');
    }
  }

// ...

Sie können dies im Browser testen, wo Sie schnell feststellen werden, warum es nicht sehr hilfreich ist. Dieser Code fügt einen Ereignis-Listener zum messageFeed Element hinzu, was bedeutet, dass jedes Mal, wenn Sie versuchen zu scrollen, ein Popup-Fenster erscheint. Nicht das, was Sie wollen!

Ändern Sie ihn also leicht ab. Fügen Sie den folgenden Code oberhalb der setupUserEvents() Methode ein und ändern Sie Ihren neuen Ereignis-Listener wie gezeigt.

// public/javascripts/chat.js

// ...

  isFeedAtTop() {
    return 0 === this.messageFeed.scrollTop;
  }

  setupUserEvents() {

    // ...

    this.messageFeed.addEventListener("scroll", () => {
      if (this.isFeedAtTop()) {
        alert('scrolling!');
      }
    }
  }

// ...

Diese neue Änderung schafft eine neue Methode, die erkennt, wo die Scroll-Position des messageFeed ist bei 0Null, oder ganz am Anfang des Nachrichtenverlaufs. Noch nützlicher! Jetzt wissen Sie, wann jemand die älteste Nachricht am Anfang der Nachrichtenliste erreicht.

Vonage Chat Alert When Scrolling to the Top

Wer sind Sie?

Um neue Nachrichten einem Benutzer zuzuordnen, wenn sie aus dem Gesprächsverlauf geladen werden, sollten Sie sie speichern. Bearbeiten Sie die public/javascripts/chat.js Datei, fügen Sie die folgende Zeile nach der Zeile this.conversation = conversation;.

// public/javascripts/chat.js

// ...

  setupConversationEvents(conversation, user) {
    // ...
    this.user = user;
    // ...
  }

// ...

Speichern des Seitenkontextes

Um weitere Nachrichten aus dem Nachrichtenverlauf zu laden, müssen Sie wissen, welche Seite zuletzt geladen wurde. Um dies zu tun, bearbeiten Sie immer noch die public/javascripts/chat.js Datei bearbeiten, ändern Sie die bestehende showConversationHistory wie unten gezeigt, um die letzte Ereignisseite der Anwendung zu speichern.

// public/javascripts/chat.js

// ...

  showConversationHistory(conversation, user) {
    // ...
      .then((eventsPage) => {
        this.lastPage = eventsPage;
        var eventsHistory = "";
    // ...
  }

// ...

Falls es nicht klar ist, wie die showConversationHistory Methode nach der Änderung aussehen sollte, sehen Sie hier die gesamte Methode mit der vorgenommenen Änderung.

// public/javascripts/chat.js

// ...

  showConversationHistory(conversation, user) {
    conversation
      .getEvents({ page_size: 20, order: 'desc' })
      .then((eventsPage) => {
        this.lastPage = eventsPage;
        var eventsHistory = "";

        eventsPage.items.forEach((value, key) => {
          if (conversation.members.get(value.from)) {
            switch (value.type) {
              case 'text':
                eventsHistory = this.senderMessage(user, conversation.members.get(value.from), value) + eventsHistory;
                break;
              case 'member:joined':
                eventsHistory = this.memberJoined(conversation.members.get(value.from), value) + eventsHistory;
                break;
            }
          }
        });

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

        this.scrollFeedToBottom();
      })
      .catch(this.errorLogger);
  }

// ...

Die Idee dieser Methode ist es, die EventsPage zu speichern, die durch den Aufruf von getEventszurückgegebenen Daten zu speichern, so dass die Anwendung sie später wieder verwenden kann.

Mit dieser Änderung weiß die Anwendung nun, welche Seite zuletzt aufgerufen wurde.

Unnötige Anfragen vermeiden

Eine Methode des EventsPage Objekt ist hasNextdie true zurückgibt, wenn weitere Ereignisse zu laden sind.

Mit der hasNext Methode bearbeiten Sie das Scrolling-Ereignis, das Sie zuvor hinzugefügt haben, um this.lastPage.hasNext() zu der Bedingung um unser alert.

// public/javascripts/chat.js

// ...

  setupUserEvents() {

    // ...

    this.messageFeed.addEventListener("scroll", () => {
      if (this.isFeedAtTop() && this.lastPage.hasNext()) {
        alert('scrolling!');
      }
    }
  }

// ...

Jetzt erhalten Sie nur noch eine Warnung, wenn eine weitere Seite mit Ereignissen geladen werden muss.

Laden Sie die nächste Seite

Um die nächste Seite zu laden, ersetzen Sie die alert in Ihrem Ereignis-Listener durch den unten gezeigten Code:

// public/javascripts/chat.js

// ...

        this.lastPage
          .getNext()
          .then((eventsPage) => {
            this.lastPage = eventsPage;
            var moreEvents = "";

            eventsPage.items.forEach((value, key) => {
              if (this.conversation.members.get(value.from)) {
                switch (value.type) {
                  case 'text':
                    moreEvents = this.senderMessage(this.user, this.conversation.members.get(value.from), value) + moreEvents;
                    break;
                  case 'member:joined':
                    moreEvents = this.memberJoined(this.conversation.members.get(value.from), value) + moreEvents;
                    break;
                }
              }
            });

            this.messageFeed.innerHTML = moreEvents + this.messageFeed.innerHTML;
          })
          .catch(this.errorLogger);

// ...

Dieser Code verwendet this.lastPage die zuvor in der Anwendung gespeichert wurde, und fordert getNext die eine neue EventsPage.

Der Rest des hier gezeigten Codes überschreibt this.LastPage mit der neuesten Seite und führt fast die gleiche Funktion der showConversationHistory Methode aus, die beim Laden der Seite historische Meldungen ausgibt und sie an den Anfang der messageFeed.

Fixieren der Bildlaufposition

Wenn Sie einen unendlichen Bildlauf durchführen, werden Sie feststellen, dass neue Nachrichten oben hinzugefügt werden, aber Sie sehen immer noch den oberen Teil der Seite messageFeedund verlieren die Position, an der Sie sich im Nachrichtenverlauf des Kanals befunden haben. Um dies zu beheben, werden Sie die scrollTo Methode, die sich bereits in der public/javascripts/chat.js Datei befindet.

Zuvor, scrollTo verwendet, um zum unteren Ende der Nachrichten zu blättern, was durch eine beliebige Zahl erreicht wird, die größer ist als die Höhe der messageFeed. In diesem Team müssen Sie zu einem bestimmten Punkt auf der Seite messageFeed.

Wenn die Position beim Laden neuer Nachrichten durch die Anwendung 0 an der Spitze, dann wäre es sinnvoll, auf die Differenz zwischen der Höhe vor und nach der messageFeed aktualisiert wurde.

Innerhalb der Bedingung, die die Bildlaufposition und hasNextaber bevor der the.lastPage.getNext() Code ausgeführt wird, fügen Sie den Code zum Speichern der scrollHeightzu speichern, wie hier gezeigt:

// public/javascripts/chat.js

// ...
      if (this.isFeedAtTop() && this.lastPage.hasNext()) {
        this.scrollHeight = this.messageFeed.scrollHeight;

        // ...
// ...

In der gleichen Funktion, nach der Zeile, die die messageFeed.innerHTML mit moreEventsaktualisiert, auch diese Zeile ein:

// public/javascripts/chat.js

// ...
            // ...

            this.scrollTo(this.messageFeed.scrollHeight-this.scrollHeight);
// ...

Falls es nicht klar ist, wie der "scroll" Ereignislistener nach der Änderung aussehen soll, finden Sie hier den gesamten Code:

// public/javascripts/chat.js

// ...

    // ...

    this.messageFeed.addEventListener("scroll", () => {
      if (this.isFeedAtTop() && this.lastPage.hasNext()) {
        this.scrollHeight = this.messageFeed.scrollHeight;

        this.lastPage
          .getNext()
          .then((eventsPage) => {
            this.lastPage = eventsPage;
            var moreEvents = "";

            eventsPage.items.forEach((value, key) => {
              if (this.conversation.members.get(value.from)) {
                switch (value.type) {
                  case 'text':
                    moreEvents = this.senderMessage(this.user, this.conversation.members.get(value.from), value) + moreEvents;
                    break;
                  case 'member:joined':
                    moreEvents = this.memberJoined(this.conversation.members.get(value.from), value) + moreEvents;
                    break;
                }
              }
            });

            this.messageFeed.innerHTML = moreEvents + this.messageFeed.innerHTML;

            this.scrollTo(this.messageFeed.scrollHeight-this.scrollHeight);
          })
          .catch(this.errorLogger);
      }
    });

// ...

Mit etwas Glück werden Sie beim Ausprobieren feststellen, dass die Nachrichten scheinbar oberhalb Ihrer Bildlaufposition geladen werden, so dass Sie "bis ins Unendliche" oder bis ganz nach oben scrollen können.

Vonage Chat Infinite Scrolling to the Top

Das Ende

Dieser Artikel folgt auf den vorherigen Beitrag Erstellen einer einfachen Messaging UI mit Bootstrapund zeigt Ihnen, wie Sie ältere Nachrichten laden können, wenn Sie durch den Nachrichtenverlauf blättern.

Vergessen Sie nicht, wenn Sie Fragen, Feedback, Ratschläge oder Ideen haben, die Sie mit der breiteren Gemeinschaft teilen möchten, dann zögern Sie bitte nicht, sich auf unserem Gemeinschaft Slack Arbeitsbereich zu gehen oder unten eine Antwort zu hinterlassen 👇.