Chat Pagination avec défilement infini

Pour faire suite à l'article précédent Créer une interface utilisateur de messagerie simple avec Bootstrapcet article vous montrera comment charger des messages plus anciens de la conversation à l'aide du Vonage Client SDK, qui est maintenant livré paginé à partir de l'API Conversation.

Conditions préalables

Vonage API Account

To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Node et NPM

Pour commencer, vous aurez besoin d'installer Node et NPM. Ce guide utilise Node 8 et NPM 6. Vérifiez qu'ils sont installés et à jour.

Node et NPM doivent être installés et à la bonne version. Allez sur nodejs.org et installez la bonne version si vous ne l'avez pas.

CLI Vonage

Pour configurer votre application, vous devez installer le CLI de Vonage. Installez-le en utilisant NPM dans le terminal.

Vous pouvez trouver votre clé API et votre secret sur le tableau de bord qui sont utilisés pour configurer le CLI de Vonage.

Le CLI de Vonage comporte des modules d'extension qui, lorsqu'ils sont installés, offrent des capacités supplémentaires. Dans ce tutoriel, vous travaillerez avec Conversations, voici donc la commande pour installer son plugin :

Git (optionnel)

Vous pouvez utiliser git pour cloner l'application application de démonstration à partir de GitHub.

Pour ceux qui ne sont pas à l'aise avec les commandes git, ne vous inquiétez pas, je vous couvre. Ce guide contient des instructions pour télécharger le projet sous forme de fichier ZIP.

Suivez ce pour installer git.

Pour commencer

Sur la base de l'application finie du dernier tutoriel, il existe une nouvelle application de démonstration de départ. Clonez-la et installez-la en suivant les étapes suivantes.

Obtenir l'application de démonstration

Pour ceux qui ne sont pas à l'aise avec les commandes git, vous pouvez télécharger l'application de démonstration sous forme de fichier zip et le décompresser localement.

Une fois cloné ou décompressé, passez dans le nouveau répertoire de l'application de démonstration.

Installer les dépendances npm.

Configurez le port d'application à l'aide d'un fichier d'environnement. Copiez le fichier d'exemple :

Maintenant, éditez le fichier d'environnement .env et fixez le port à 3000 (ou tout autre port souhaité).

Parmi les autres paquets installés par votre dernière commande, il y a un paquet appelé nodemonqui vous permet de recharger votre application si vous modifiez des fichiers automatiquement.

Pour lancer l'application de manière standard, exécutez :

Pour démarrer l'application, mais avec nodemon à la place, exécutez :

Conseil : Si vous exécutez l'application avec l'option nodemon pour le reste de ce tutoriel, chaque fois que je suggérerai de redémarrer l'application, vous n'aurez pas besoin de le faire car nodemon le fait pour vous. Cependant, si vous devez vous réauthentifier avec l'application, vous devrez quand même le faire, car les informations de session sont stockées en mémoire et ne sont pas configurées pour utiliser un autre type de stockage.

Configurer l'application de démonstration

Pour vous connecter à Vonage et envoyer ou recevoir des messages du service, vous devez configurer l'application de démonstration.

Créer une application Vonage

Tout d'abord, créez une Applications Vonage avec des capacités RTC (communication en temps réel). L'URL de l'événement sera un journal en direct des événements qui se produisent sur le service Vonage, comme l'arrivée/le départ d'utilisateurs, l'envoi de messages, l'activation de l'audio (si vous avez eu envie de l'activer).

Créer une conversation Vonage

Deuxièmement, créez une conversation Vonage, qui agit comme un salon de discussion. Ou un conteneur pour les messages et les événements.

Créez votre utilisateur

Créez maintenant un utilisateur pour vous-même.

Remarque : Dans cette démonstration, vous ne discuterez pas entre deux utilisateurs. D'autres guides vous montrent comment créer des conversations entre plusieurs utilisateurs. Ce guide se concentre sur la mise en forme de l'interface utilisateur de votre message d'une manière simple mais attrayante.

Ajouter l'utilisateur à une conversation

Ensuite, ajoutez votre nouvel utilisateur à la conversation. Un utilisateur peut être membre d'une application, mais il doit tout de même rejoindre la conversation.

Générer un jeton d'utilisateur

Enfin, générez un jeton pour votre nouvel utilisateur. Ce jeton représente l'utilisateur lorsqu'il accède à l'application. Ce jeton d'accès l'identifie, de sorte que toute personne l'utilisant sera supposée être le bon utilisateur.

En pratique, vous configurerez l'application avec ce jeton. En production, ces jetons doivent être protégés, gardés secrets et exposés avec précaution à l'application cliente, si tant est qu'ils le soient.

Configurer l'Applications

Après avoir généré toutes les parties dont vous aurez besoin, éditez le fichier views/layout.hbs et trouvez le JavaScript illustré ici.

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

Editez la configuration avec les valeurs que vous avez générées dans les commandes ci-dessus.

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

Maintenant configurée, démarrez l'application et accédez-y en utilisant l'adresse l'URL par défaut de l'application.

Remarque : Il ne s'agit que d'une démonstration et vous ne devriez pas coder en dur des informations d'identification dans une application, en particulier une application qui les expose au client.

Vonage Chat Simple Messaging UI

Préparer un historique des messages

Comme vous avez besoin de plus de messages à faire défiler, créez un historique des messages en envoyant plusieurs messages au client. La taille de la page par défaut étant de 20 éléments, créez plus de 20 messages. Je recommande de créer 60 messages de test afin de pouvoir charger deux pages entières d'historique.

Ajouter une pagination à l'application

Les paramètres par défaut de l'application ne renvoient que 20 éléments des événements passés de la conversation. Il est maintenant temps d'ajouter la pagination à l'application pour que les utilisateurs puissent charger les événements plus anciens.

Qu'est-ce que la pagination ?

La pagination est la manière dont une application divise le contenu en plusieurs pages. Lorsqu'elle est mise en œuvre dans la conception d'une API, elle permet de fournir des collections de résultats gérables, qui peuvent généralement être parcourues par programme. Les SDK tels que le Vonage Conversion Client SDK ne sont pas différents, car ils étendent souvent la fonctionnalité de pagination des API dans des méthodes conviviales qui rendent la pagination plus simple.

L'expérience de l'utilisateur

Certaines Applications proposent des liens tels que "suivant" ou "précédent", ou des numéros de page. Mais ce n'est pas ce que vous allez mettre en œuvre ici. Comme les messages d'un canal de discussion sont un flux continu de conversations, cette application permettra aux utilisateurs de continuer à faire défiler les messages historiques. Pour ce faire, on utilise un concept connu sous le nom de défilement infini. Lorsque vous faites défiler des messages plus anciens et que vous arrivez à la fin, l'application demande la page suivante de l'historique et l'insère. Dans les canaux plus anciens avec beaucoup d'historique, cela donne l'impression de pouvoir faire défiler les messages sans fin ou de les faire défiler à l'infini.

Le code

Vous allez maintenant écrire un peu de code. Ici, vous allez apporter des modifications pour détecter la position de défilement de votre liste de messages et charger d'autres messages lorsque vous atteignez le plus ancien. Le message le plus ancien sera affiché tout en haut de la fenêtre.

Défilement vers le haut

Pour détecter le défilement vers le haut, vous devez ajouter un nouvel événement. Modifiez le fichier public/javascripts/chat.js et ajoutez le code suivant sous la méthode setupUserEvents() le code suivant.

// public/javascripts/chat.js

// ...

  setupUserEvents() {

    // ...

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

// ...

Vous pouvez tester cela dans le navigateur, où vous découvrirez rapidement pourquoi ce n'est pas très utile. Ce code ajoute un récepteur d'événements à l'élément messageFeed ce qui signifie que chaque fois que vous essayez de faire défiler la page, cela déclenche une fenêtre contextuelle. Ce n'est pas ce que vous voulez !

Modifiez-le donc légèrement. Ajoutez le code suivant au-dessus de la méthode setupUserEvents() et modifiez votre nouvel écouteur d'événements comme indiqué.

// public/javascripts/chat.js

// ...

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

  setupUserEvents() {

    // ...

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

// ...

Cette nouvelle modification crée une nouvelle méthode qui détecte où se trouve la position de défilement de l'élément messageFeed est à 0, zéro, ou le tout début de l'historique des messages. Plus utile ! Désormais, vous savez quand quelqu'un atteint le message le plus ancien en haut de la liste des messages.

Vonage Chat Alert When Scrolling to the Top

Qui êtes-vous ?

Pour attribuer de nouveaux messages à un utilisateur lorsqu'ils sont chargés à partir de l'historique des conversations, vous devez enregistrer. En éditant le fichier public/javascripts/chat.js ajoutez la ligne suivante après la ligne this.conversation = conversation;.

// public/javascripts/chat.js

// ...

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

// ...

Stocker le contexte de la page

Pour charger d'autres messages à partir de l'historique des messages, vous devez savoir quelle page a été chargée en dernier. Pour ce faire, toujours en éditant le fichier public/javascripts/chat.js modifiez le fichier showConversationHistory comme indiqué ci-dessous pour stocker la page d'événement la plus récente de l'application.

// public/javascripts/chat.js

// ...

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

// ...

Si vous ne voyez pas clairement à quoi devrait ressembler la méthode showConversationHistory après la modification, voici la méthode entière avec la modification appliquée.

// 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);
  }

// ...

L'idée de cette méthode est de stocker le EventsPage renvoyée par l'appel à getEventsafin que l'application puisse l'utiliser ultérieurement.

Grâce à cette modification, l'application est désormais informée de la page la plus récente.

Éviter les demandes inutiles

Une méthode de l'objet EventsPage est hasNextqui renvoie la valeur "true" s'il y a d'autres événements à charger.

Avec la méthode hasNext modifiez l'événement de défilement que vous avez ajouté plus tôt pour ajouter this.lastPage.hasNext() à la condition entourant notre alert.

// public/javascripts/chat.js

// ...

  setupUserEvents() {

    // ...

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

// ...

Désormais, vous ne recevrez une alerte que s'il y a une autre page d'événements à charger.

Charger la page suivante

Pour charger la page suivante, remplacez le alert dans votre écouteur d'événements par le code ci-dessous :

// 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);

// ...

Ce code utilise this.lastPage qui a été stocké sur l'application plus tôt dans l'article, et demande getNext qui renvoie un nouveau EventsPage.

Le reste du code que l'on voit ici écrase this.LastPage avec la dernière page, et exécute à peu près la même fonction de la méthode showConversationHistory qui affiche les messages historiques lorsque la page est chargée, en les ajoutant en haut de la page messageFeed.

Fixer la position du défilement

Avec le défilement infini, vous remarquerez que les nouveaux messages sont ajoutés en haut de la page, mais que vous regardez toujours le haut de la page d'accueil, perdant ainsi votre position dans l'historique des messages. messageFeedperdant ainsi la position où vous étiez dans l'historique des messages du canal. Pour résoudre ce problème, vous allez réutiliser la méthode scrollTo qui se trouve déjà dans le fichier public/javascripts/chat.js dans le fichier

Auparavant, scrollTo était utilisé pour faire défiler les messages jusqu'au bas de la page, ce qui est réalisé par n'importe quel nombre plus grand que la hauteur de la balise messageFeed. Dans cette équipe, vous devez faire défiler les messages jusqu'à un point précis de l'écran. messageFeed.

Si la position au moment du chargement des nouveaux messages par l'application était 0 en haut, il serait logique de faire défiler les messages jusqu'à la différence entre la hauteur avant et après la mise à jour du message. messageFeed a été mis à jour.

À l'intérieur de la condition qui vérifie la position du défilement et hasNextmais avant que le code the.lastPage.getNext() ne soit exécuté, ajoutez le code permettant de stocker la valeur scrollHeightcomme indiqué ici :

// public/javascripts/chat.js

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

        // ...
// ...

Maintenant, dans cette même fonction, après la ligne qui met à jour l'élément messageFeed.innerHTML avec moreEventsajoute également cette ligne :

// public/javascripts/chat.js

// ...
            // ...

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

Si vous ne voyez pas clairement à quoi doit ressembler l'écouteur d'événement "scroll" après la modification, voici le code dans son intégralité :

// 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);
      }
    });

// ...

Avec un peu de chance, lorsque vous l'essaierez, vous découvrirez que les messages se chargeront apparemment au-dessus de votre position de défilement, ce qui vous permettra de défiler "jusqu'à l'infini", c'est-à-dire jusqu'en haut de la page.

Vonage Chat Infinite Scrolling to the Top

La fin

Cet article fait suite à l'article précédent Créer une interface de messagerie simple avec Bootstrapen vous montrant comment charger des messages plus anciens lorsque vous faites défiler l'historique des messages.

N'oubliez pas que si vous avez des questions, des commentaires, des conseils ou des idées que vous souhaitez partager avec l'ensemble de la communauté, n'hésitez pas à vous rendre sur notre Communauté Slack ou répondez ci-dessous 👇.