Construire une application de chat en temps réel avec Pusher et Vue.js –

Les applications qui communiquent en temps réel deviennent de plus en plus populaires, car elles offrent une expérience utilisateur plus fluide et plus naturelle.

Dans ce tutoriel, nous allons créer une application de discussion en temps réel avec Vue. .js powered by ChatKit un service fourni par Pusher . Le service ChatKit nous fournira le back-end complet nécessaire à la création d'une application de discussion sur n'importe quel appareil, nous permettant de nous concentrer sur la construction d'une interface utilisateur frontale qui se connecte au service ChatKit via le package client ChatKit .

Vous voulez apprendre Vue.js de fond en comble? Obtenez une collection complète de livres Vue couvrant les bases, les projets, les astuces, les outils et plus avec SitePoint Premium. Inscrivez-vous maintenant pour seulement 9 $ par mois .

Prérequis

Il s'agit d'un tutoriel de niveau intermédiaire à avancé. Vous devez vous familiariser avec les concepts suivants:

• Principes de base de Vue.js
• Principes de base de Vuex
• utilisant un framework CSS

Vous aurez également besoin d’un nœud installé sur votre machine. Vous pouvez le faire en téléchargeant les fichiers binaires sur le site Web officiel ou en utilisant un gestionnaire de versions . C'est probablement le moyen le plus simple, car il vous permet de gérer plusieurs versions de Node sur le même ordinateur.

Enfin, vous devez installer Vue CLI globalement à l'aide de la commande suivante:

 npm install -g @vue / cli

Au moment de la rédaction, les versions les plus récentes étaient les suivantes: Node 10.14.1 et Vue CLI 3.2.1

À propos du projet

Nous allons créer une application de discussion rudimentaire semblable à Slack ou Discord. L’application fera ce qui suit:

• avoir plusieurs canaux et salles
• liste les membres de la salle et détecter le statut de présence
• détecter le moment où les autres utilisateurs commencent à taper

Comme mentionné précédemment, nous construisons simplement le frontal. Le service ChatKit a une interface back-end qui nous permettra de gérer les utilisateurs, les autorisations et les salles.

Vous pouvez trouver le code complet de ce projet sur GitHub .

Configuration d'une instance ChatKit

Créons notre instance ChatKit, qui est similaire à une instance de serveur si vous connaissez Discord.

Allez à la page ChatKit sur le site Web de Pusher et cliquez sur le bouton Inscrivez-vous . bouton. Vous serez invité à entrer une adresse e-mail et un mot de passe, ainsi que la possibilité de vous connecter avec GitHub ou Google.

Sélectionnez l'option qui vous convient le mieux, puis, à l'écran suivant, renseignez certains détails, tels que . Type de compte Rôle d'utilisateur etc.

Cliquez sur Complétez Onboarding pour accéder au tableau de bord principal Pusher. Cliquez ici sur le produit ChatKit.

Cliquez sur le bouton Créer pour créer une nouvelle instance de ChatKit. Je vais appeler le mien VueChatTut .

Nous allons utiliser le plan gratuit de ce didacticiel. Il prend en charge jusqu'à 1 000 utilisateurs uniques, ce qui est plus que suffisant pour nos besoins. Rendez-vous à l'onglet Console . Vous devrez créer un nouvel utilisateur pour commencer. Allez-y et cliquez sur le bouton Create User .

Je vais appeler le mien “john” ( Identifiant utilisateur ) et “John Wick” ( nom complet ), mais vous pouvez nommer le vôtre comme vous le souhaitez. La prochaine partie est facile: créez les deux utilisateurs ou plus. Par exemple:

• sel, Evelyn Salt
• chasse, Ethan Hunt

Créez trois salles ou plus et attribuez des utilisateurs. Par exemple:

• Général (jean, sel, chasse)
• Armes (jean, sel)
• Combat (jean, chasse)

Voici un aperçu de ce que devrait votre interface Console like.

Ensuite, vous pouvez accéder à l'onglet Salles et créer un message à l'aide d'un utilisateur sélectionné pour chaque salle. Ceci est à des fins de test. Allez ensuite à l'onglet Credentials et prenez note du Instance Locator . Nous devrons activer le test jeton fournisseur utilisé pour générer notre point de terminaison HTTP, et en prendre note également.

Notre Le back-end ChatKit est maintenant prêt. Commençons par la construction de l’avant de Vue.js.

Échafaudage du projet Vue.js

Ouvrez votre terminal et créez le projet comme suit:

 vue create vue-chatkit

Sélectionnez Sélectionnez manuellement les fonctions et répondez aux questions ci-dessous.

Assurez-vous que vous avez bien sélectionné Babel, Vuex et Vue Router. comme fonctionnalités supplémentaires. Créez ensuite les dossiers et fichiers suivants comme suit:

Assurez-vous de créer tous les dossiers et fichiers comme indiqué. Supprimez tous les fichiers inutiles qui n'apparaissent pas dans l'illustration ci-dessus.

Pour ceux d'entre vous qui sont chez vous dans la console, voici les commandes permettant de faire tout cela:

 mkdir src / assets / css
mkdir src / store

appuyez sur src / assets / css / {loading.css, loading-btn.css}
touch src / components / {ChatNavBar.vue, LoginForm.vue, MessageForm.vue, MessageList.vue, RoomList.vue, UserList.vue}
touchez src / store / {actions.js, index.js, mutations.js}
touchez src / views / {ChatDashboard.vue, Login.vue}
touchez src / chatkit.js

rm src / components / HelloWorld.vue
rm src / views / {About.vue, Home.vue}
rm src / store.js

Lorsque vous avez terminé, le contenu du dossier src devrait ressembler à ceci:

.
├── App.vue
├── actifs
├── css
│ ├── chargement-btn.css
│ └── loading.css
└── logo.png
Kit chatkit.js
├── composants
├── ChatNavBar.vue
├── LoginForm.vue
├── MessageForm.vue
├── MessageList.vue
├── RoomList.vue
└── UserList.vue
├── main.js
├── routeur.js
├── magasin
├── actions.js
├── index.js
└── mutations.js
Vues
    ├── ChatDashboard.vue
    └── Login.vue

Les fichiers loading-btn.css et loading.css sont disponibles sur le site Web loading.io . Ces fichiers ne sont pas disponibles dans le référentiel npm. Vous devez donc les télécharger manuellement et les placer dans votre projet. Assurez-vous de lire la documentation pour avoir une idée de ce qu’ils sont et de la façon d’utiliser les chargeurs personnalisables.

Nous allons maintenant installer les dépendances suivantes:

 npm i @ pusher / chatkit-client bootstrap -vue moment vue-chat-scroll vuex-persist

Vérifiez les liens pour en savoir plus sur le fonctionnement de chaque paquet et sur sa configuration.

Maintenant, configurons notre projet Vue.js. Ouvrez src / main.js et mettez à jour le code comme suit:

 import Vue de 'vue'
importer BootstrapVue à partir de 'bootstrap-vue'
importer VueChatScroll de 'vue-chat-scroll'

importer l'application depuis './App.vue'
importer le routeur de './router'
importer un magasin depuis './store/index'

importer 'bootstrap / dist / css / bootstrap.css'
importer 'bootstrap-vue / dist / bootstrap-vue.css'
importer './assets/css/loading.css'
importer './assets/css/loading-btn.css'

Vue.config.productionTip = false
Vue.use (BootstrapVue)
Vue.use (VueChatScroll)

nouveau Vue ({
  routeur,
  le magasin,
  rendre: h => h (App)
}). $ mount ('# app')

Mise à jour src / router.js comme suit:

 import Vue Vue de 'vue'
importer un routeur depuis 'vue-router'
import Login depuis './views/Login.vue'
importer ChatDashboard de './views/ChatDashboard.vue'

Vue.use (Routeur)

exporter le nouveau routeur par défaut ({
  mode: 'histoire',
  base: process.env.BASE_URL,
  itinéraires: [
    {
      path: '/',
      name: 'login',
      component: Login
    },
    {
      path: '/chat',
      name: 'chat',
      component: ChatDashboard,
    }
  ]
})

Mise à jour src / store / index.js :

 import Vue Vue de 'vue'
importer Vuex depuis 'vuex'
importer VuexPersistence de 'vuex-persist'
importer des mutations à partir de './mutations'
importer des actions à partir de './actions'

Vue.use (Vuex)

const debug = process.env.NODE_ENV! == 'production'

const vuexLocal = new VuexPersistence ({
  stockage: window.localStorage
})

exporter par défaut le nouveau Vuex.Store ({
  Etat: {
  },
  des mutations,
  actes,
  getters: {
  },
  plugins: [vuexLocal.plugin],
  strict: débogage
})

Le paquet vuex-persist garantit que notre état Vuex est enregistré entre les rechargements ou les rafraîchissements de pages.

Notre projet devrait pouvoir être compilé maintenant sans erreur. Cependant, ne le lancez pas encore car nous avons besoin de construire l’interface utilisateur.

Construction de l’interface utilisateur

Commençons par mettre à jour src / App.vue comme suit:

Ensuite, nous devons définir les états de notre magasin Vuex tels qu’ils sont requis par nos composants d’interface utilisateur pour fonctionner. Pour ce faire, nous allons dans notre magasin Vuex à src / store / index.js . Il suffit de mettre à jour les sections Etat et Getters comme suit:

 Etat: {
  chargement: faux,
  envoi: faux,
  erreur: null,
  utilisateur: [],
  reconnecter: faux,
  activeRoom: null,
  chambres: [],
  utilisateurs: [],
  messages: [],
  userTyping: null
},
getters: {
  hasError: state => state.error? vrai faux
},

Ce sont toutes les variables d’état dont nous aurons besoin pour notre application de chat. L'état loading est utilisé par l'interface utilisateur pour déterminer si elle doit exécuter le chargeur CSS. L'état error est utilisé pour stocker les informations relatives à une erreur qui vient de se produire. Nous aborderons le reste des variables d'état lorsque nous traversons leurs ponts.

Next open src / view / Login.vue et met à jour de la manière suivante:

Ensuite, insérez le code correspondant à src / components / LoginForm.vue comme suit:

Comme mentionné précédemment, il s'agit d'un didacticiel avancé. Si vous avez des difficultés à comprendre le code ici, consultez les conditions préalables ou les dépendances du projet pour plus d'informations.

Nous pouvons maintenant démarrer le serveur Vue dev via npm run serve pour vous assurer que notre application est en cours d'exécution. sans problème de compilation.

Vous pouvez confirmer que la validation fonctionne en entrant un nom d'utilisateur. Vous devriez voir le bouton Login s'activer après la saisie de trois caractères. Le bouton Login ne fonctionne pas pour le moment, car nous n’avons pas codé cette partie. Nous examinerons cela plus tard. Pour l'instant, poursuivons la construction de notre interface utilisateur de discussion.

Allez à src / view / ChatDashboard.vue et insérez le code comme suit:

Le ChatDashboard servira de parent de présentation pour les composants enfants suivants:

• ChatNavBar une barre de navigation de base
• RoomList ]qui répertorie les salles auxquelles l'utilisateur connecté a accès, et qui est également un sélecteur de salle
• UserList qui répertorie les membres d'une salle sélectionnée
• MessageList qui affiche les messages postés dans une salle sélectionnée
• MessageForm formulaire permettant d'envoyer des messages à la salle sélectionnée

Mettons du code passe-partout dans chaque composant pour que tout soit affiché.

Insérer le cadran code for src / components / ChatNavBar.vue comme suit:

Insérer le code standard pour src / components / RoomList.vue comme suit:

Insérer le code standard pour src / components / UserList.vue comme suit:

Insérer le code général pour src / components / MessageList.vue comme suit:

Insérer le code standard pour src / components / MessageForm.vue comme suit:

Passez en revue le code pour vous assurer que rien n'est un mystère pour vous. Accédez à http: // localhost: 8080 / chat pour vérifier si tout est en cours d'exécution. Vérifiez les consoles du terminal et du navigateur pour vous assurer qu'il n'y a pas d'erreur à ce stade. Vous devriez maintenant avoir la vue suivante:

Assez vide, non? Passons à src / store / index.js et insérons des données fictives dans l’état:

 état: {
  chargement: faux,
  envoi: faux,
  erreur: 'Relax! Ceci est juste un message d'erreur de forage ',
  utilisateur: {
    nom d'utilisateur: 'Jack',
    nom: 'Jack Sparrow'
  },
  reconnecter: faux,
  activeRoom: {
    id: '124'
  },
  chambres: [
    {
      id: '123',
      name: 'Ships'
    },
    {
      id: '124',
      name: 'Treasure'
    }
  ],
  utilisateurs: [
    {
      username: 'Jack',
      name: 'Jack Sparrow',
      presence: 'online'
    },
    {
      username: 'Barbossa',
      name: 'Hector Barbossa',
      presence: 'offline'
    }
  ],
  messages: [
    {
      username: 'Jack',
      date: '11/12/1644',
      text: 'Not all treasure is silver and gold mate'
    },
    {
      username: 'Jack',
      date: '12/12/1644',
      text: 'If you were waiting for the opportune moment, that was it'
    },
    {
      username: 'Hector',
      date: '12/12/1644',
      text: 'You know Jack, I thought I had you figured out'
    }
  ],
  userTyping: null
},

Après avoir enregistré le fichier, votre vue doit correspondre à l'image ci-dessous.

Ce simple test garantit que tous les composants et tous les états sont correctement liés. Vous pouvez maintenant rétablir le code d'état dans sa forme d'origine:

 state: {
  chargement: faux,
  envoi: faux,
  erreur: null,
  utilisateur: null,
  reconnecter: faux,
  activeRoom: null,
  chambres: [],
  utilisateurs: [],
  messages: [],
  userTyping: null
}

Commençons par implémenter des fonctionnalités concrètes en commençant par le formulaire de connexion.

Authentification sans mot de passe

Pour ce tutoriel, nous allons utiliser un système d’authentification non sécurisé sans mot de passe. Un système d’authentification sécurisé approprié n’entre pas dans le cadre de ce didacticiel. Pour commencer, nous devons commencer à créer notre propre interface qui interagira avec le service ChatKit via le package @ pusher / chatkit-client .

Retournez au tableau de bord ChatKit et copiez l'instance et paramètres de jeton d'essai . Enregistrez-les dans le fichier .env.local à la racine de votre projet comme suit:

 VUE_APP_INSTANCE_LOCATOR =
VUE_APP_TOKEN_URL =
VUE_APP_MESSAGE_LIMIT = 10

J'ai également ajouté un paramètre MESSAGE_LIMIT . Cette valeur limite simplement le nombre de messages que notre application de discussion peut extraire. Assurez-vous de bien renseigner les autres paramètres de l'onglet des informations d'identification.

Ensuite, accédez à src / chatkit.js pour commencer à créer notre fondation d'application de chat:

 import {ChatManager, TokenProvider} from ' @ pusher / chatkit-client '

const INSTANCE_LOCATOR = process.env.VUE_APP_INSTANCE_LOCATOR;
const TOKEN_URL = process.env.VUE_APP_TOKEN_URL;
const MESSAGE_LIMIT = Number (process.env.VUE_APP_MESSAGE_LIMIT) || dix;

let currentUser = null;
let activeRoom = null;

fonction asynchrone connectUser (userId) {
  const chatManager = new ChatManager ({
    instanceLocator: INSTANCE_LOCATOR,
    tokenProvider: new TokenProvider ({url: TOKEN_URL}),
    identifiant d'utilisateur
  });
  currentUser = wait chatManager.connect ();
  return currentUser;
}

défaut d'exportation {
  connectUser
}

Notez que nous transformons la constante MESSAGE_LIMIT en un nombre, car par défaut l'objet process.env force toutes ses propriétés à être de type chaîne.

Insérez le code suivant pour src / store / mutations :

 export default {
  setError (état, erreur) {
    state.error = error;
  },
  setLoading (état, chargement) {
    state.loading = chargement;
  },
  setUser (état, utilisateur) {
    state.user = utilisateur;
  },
  setReconnect (état, reconnecter) {
    state.reconnect = reconnecter;
  },
  setActiveRoom (state, roomId) {
    state.activeRoom = roomId;
  },
  setRooms (état, chambres) {
    state.rooms = rooms
  },
  setUsers (état, utilisateurs) {
    state.users = utilisateurs
  },
 clearChatRoom (état) {
    state.users = [];
    state.messages = [];
  },
  setMessages (état, messages) {
    state.messages = messages
  },
  addMessage (state, message) {
    state.messages.push (message)
  },
  setSending (état, statut) {
    state.sending = status
  },
  setUserTyping (state, userId) {
    state.userTyping = userId
  },
  reset (état) {
    state.error = null;
    state.users = [];
    state.messages = [];
    state.rooms = [];
    state.user = null
  }
}

Le code des mutations est très simple: il ne s'agit que d'un groupe de passeurs. Vous comprendrez bientôt à quoi correspond chaque fonction de mutation dans les sections suivantes. Ensuite, mettez à jour src / store / actions.js avec le code suivant:

 import chatkit from '../chatkit';

// Fonction d'assistance pour l'affichage des messages d'erreur
fonction handleError (commit, error) {
  const message = error.message || error.info.error_description;
  commit ('setError', message);
}

défaut d'exportation {
  connexion async ({commit, state}, userId) {
    essayer {
      commit ('setError', '');
      commit ('setLoading', true);
      // Connecter l'utilisateur au service ChatKit
      const currentUser = wait chatkit.connectUser (userId);
      commit ('setUser', {
        nom d'utilisateur: currentUser.id,
        nom: currentUser.name
      });
      commit ('setReconnect', false);

      // Test state.user
      console.log (state.user);
    } catch (error) {
      handleError (commit, error)
    } enfin {
      commit ('setLoading', false);
    }
  }
}

Ensuite, mettez à jour src / components / LoginForm.vue comme suit:

 import {mapState, mapGetters, mapActions} à partir de 'vuex'

// ...
défaut d'exportation {
  // ...
  méthodes: {
    ... mapActions ([
      'login'
    ]),
    async onSubmit () {
      const result = wait this.login (this.userId);
      si (résultat) {
        ceci. $ routeur.push ('chat');
      }
    }
  }
}

Vous devez redémarrer le serveur Vue.js pour charger les données env.local . Si vous voyez des erreurs concernant les variables non utilisées, ignorez-les pour l'instant. Une fois que cela est fait, accédez à http: // localhost: 8080 / et testez la fonction de connexion:

Dans l'exemple ci-dessus, je 'a utilisé un nom d'utilisateur incorrect uniquement pour vérifier le bon fonctionnement de la fonction de traitement des erreurs.

Dans cette capture d'écran, j'ai utilisé le nom d'utilisateur correct. J'ai également ouvert l'onglet de la console du navigateur pour m'assurer que l'objet utilisateur a été rempli. Mieux encore, si vous avez installé Vue.js Outils de développement dans Chrome ou Firefox vous devriez pouvoir obtenir des informations plus détaillées.

Si tout fonctionne correctement pour vous à ce stade, passez à l'étape suivante.

S'abonner à une salle

Maintenant que nous avons vérifié que la fonctionnalité de connexion fonctionne, nous besoin de rediriger les utilisateurs vers la vue ChatDashboard . Le code this. $ Router.push ('chat'); le fait pour nous. Cependant, notre action login doit renvoyer un booléen afin de déterminer quand il est correct de naviguer vers la vue ChatDashboard . Nous devons également renseigner les composants RoomList et UserList avec les données réelles du service ChatKit.

Update src / chatkit.js comme suit:

 ] // ...
importer le moment de 'moment'
importer un magasin depuis './store/index'

// ...
fonction setMembers () {
  membres const = activeRoom.users.map (utilisateur => ({
    nom d'utilisateur: user.id,
    nom: utilisateur.nom,
    présence: user.presence.state
  }));
  store.commit ('setUsers', membres);
}

fonction async. subscribeToRoom (roomId) {
  store.commit ('clearChatRoom');
  activeRoom = wait currentUser.subscribeToRoom ({
    roomId,
    messageLimit: MESSAGE_LIMIT,
    crochets: {
      onMessage: message => {
        store.commit ('addMessage', {
          nom: message.sender.name,
          nom d'utilisateur: message.senderId,
          text: message.text,
          date: moment (message.createdAt) .format ('h: mm: ss un D-MM-AAAA')
        });
      },
      onPresenceChanged: () => {
        setMembers ();
      },
      onUserStartedTyping: utilisateur => {
        store.commit ('setUserTyping', user.id)
      },
      onUserStoppedTyping: () => {
        store.commit ('setUserTyping', null)
      }
    }
  });
  setMembers ();
  retourne activeRoom;
}

défaut d'exportation {
  connectUser,
  subscribeToRoom
}

Si vous examinez la section hooks nous avons des gestionnaires d'événements utilisés par le service ChatKit pour communiquer avec notre application client. Vous pouvez trouver la documentation complète ici . Je vais résumer rapidement l'objectif de chaque méthode de type hook:

• le message onMessage reçoit des messages
• onPresenceChanged reçoit un événement lorsqu'un utilisateur se connecte ou se déconnecte
• . onUserStartedTyping reçoit un événement qu'un utilisateur est en train de taper
• onUserStoppedTyping reçoit un événement qu'un utilisateur a cessé de taper

Pour le onUserStartedTyping nous avons besoin de un événement de frappe de notre MessageForm pendant qu'un utilisateur tape. Nous examinerons cela dans la section suivante.

Mettez à jour la fonction de connexion dans src / store / actions.js avec le code suivant:

 // .. .
essayer {
  // ... (place juste après l'instruction de validation `setUser`)
  // Enregistrer la liste des chambres de l'utilisateur en magasin
  const rooms = currentUser.rooms.map (room => ({
    id: room.id,
    nom: room.name
  }))
  commit ('setRooms', chambres);

  // abonner un utilisateur à une salle
  const activeRoom = state.activeRoom || chambres [0]; // sélectionne la dernière pièce utilisée ou la première
  commit ('setActiveRoom', {
    id: activeRoom.id,
    nom: activeRoom.name
  });
  wait chatkit.subscribeToRoom (activeRoom.id);

  retourne vrai;
} catch (error) {
  // ...
}

Après avoir enregistré le code, retournez à l’écran de connexion et entrez le nom d’utilisateur correct. Vous devriez être dirigé vers l'écran suivant:

Nice! Presque tous les composants fonctionnent sans effort supplémentaire puisque nous les avons connectés correctement au magasin Vuex. Essayez d’envoyer un message via l’interface de la console du tableau de bord de ChatKit. Créez un message et postez-le dans la salle Général . Les nouveaux messages devraient apparaître automatiquement dans le composant MessageList . Bientôt, nous allons implémenter la logique d’envoi de messages depuis notre application Vue.js.

Si vous rencontrez des problèmes

Si vous rencontrez des problèmes, essayez ce qui suit:

• redémarrez le serveur Vue.js [19659007] vider le cache de votre navigateur
• effectuer une réinitialisation / actualisation matérielle (disponible dans Chrome si l'onglet Console est ouverte et que vous maintenez le bouton Reload enfoncé pendant cinq secondes)
• effacez localStorage à l'aide de la console de votre navigateur

Si tout fonctionne correctement jusqu'à présent, passez à la section suivante, où nous implémentons la logique pour les vestiaires.

Vestiaires

Cette partie est assez simple, car nous ' Nous avons déjà jeté les bases. Premièrement, nous allons créer une action qui permettra aux utilisateurs de changer de salle. Allez à src / store / actions.js et ajoutez cette fonction juste après le gestionnaire d'actions login :

 async changeRoom ({commit}, roomId) {
  essayer {
    const {id, name} = wait chatkit.subscribeToRoom (roomId);
    commit ('setActiveRoom', {id, nom});
  } catch (error) {
    handleError (commit, error)
  }
},

Ensuite, accédez à src / composante / RoomList.vue et mettez à jour la section de script comme suit:

 import {mapState, mapActions} à partir de 'vuex'
// ...
défaut d'exportation {
  // ...
  méthodes: {
    ... mapActions ([
      'changeRoom'
    ]),
    onChange (room) {
      this.changeRoom (room.id)
    }
  }
}

Si vous vous en souvenez bien, nous avons déjà défini @ click = "onChange (room)" dans l'élément de b-list-group-item . Testez cette nouvelle fonctionnalité en cliquant sur les éléments du composant RoomList .

Votre interface utilisateur doit se mettre à jour à chaque clic de la salle. Les composants MessageList et UserList doivent afficher les informations correctes pour la salle sélectionnée. Pour la section suivante, nous allons implémenter plusieurs fonctionnalités à la fois.

Reconnexion de l'utilisateur après l'actualisation d'une page

Vous avez peut-être remarqué que, lorsque vous apportez des modifications à store / index.js Si vous effectuez un rafraîchissement de la page, vous obtenez l’erreur suivante: Impossible de lire la propriété 'subscribeToRoom' de null . Cela se produit car l'état de votre application est réinitialisé. Heureusement, le paquet vuex-persist maintient notre état Vuex entre les rechargements de page en l'enregistrant dans la mémoire de stockage locale du navigateur.

Malheureusement, les références qui connectent notre application au serveur ChatKit sont réinitialisées. Pour résoudre ce problème, nous devons effectuer une opération de reconnexion. Nous avons également besoin d'un moyen d'indiquer à notre application qu'un rechargement de page vient de se produire et que notre application doit se reconnecter pour continuer à fonctionner correctement. Nous allons implémenter ce code dans src / components / ChatNavbar.vue . Mettez à jour la section de script comme suit:

Permettez-moi de décomposer la séquence d'événements afin que vous puissiez comprendre la logique qui sous-tend la reconnexion au service ChatKit:

1. unload . Lorsqu'une actualisation de page se produit, cette méthode est appelée. Il vérifie d'abord que l'état user.username a été défini. Si c'est le cas, cela signifie que l'utilisateur ne s'est pas déconnecté. L'état reconnecter est défini sur true.
2. monté . Cette méthode est appelée à chaque fois que ChatNavbar.vue vient de terminer le rendu. Il assigne d’abord un gestionnaire à un écouteur d’événements appelé juste avant le déchargement de la page. Il vérifie également si state.reconnect a été défini sur true. Si tel est le cas, la procédure de connexion est exécutée, ce qui permet de reconnecter notre application de discussion à notre service ChatKit.

J'ai également ajouté une fonctionnalité Logout que nous examinerons plus loin.

Après avoir apporté ces modifications, essayez d'actualiser la page. La page se met à jour automatiquement tout comme le processus de reconnexion en arrière-plan.

Envoi de messages, détection de la frappe et de la déconnexion de l'utilisateur

Commençons par implémenter ces fonctionnalités dans src / chatkit.js en ajoutant le code suivant: [19659059] // …
fonction asynchrone sendMessage (text) {
  const messageId = wait currentUser.sendMessage ({
    texte,
    roomId: activeRoom.id
  });
  retour messageId;
}

fonction d'exportation isTyping (roomId) {
  currentUser.isTypingIn ({roomId});
}

function disconnectUser () {
  currentUser.disconnect ();
}

défaut d'exportation {
  connectUser,
  subscribeToRoom,
  envoyer le message,
  déconnecterUtilisateur
}

Alors que les fonctions sendMessage et disconnectUser seront regroupées dans l’exportation de module de ChatKit, la fonction isTyping sera exportée séparément. Ceci permet à MessageForm d'envoyer directement des événements de frappe sans impliquer le magasin Vuex

Pour sendMessage et disconnectUser nous devons mettre à jour le magasin. afin de prendre en charge des tâches telles que la gestion des erreurs et le chargement des notifications d'état. Allez à src / store / actions.js et insérez le code suivant juste après la fonction changeRoom :

 async sendMessage ({commit}, message) {
  essayer {
    commit ('setError', '');
    commit ('setSending', true);
    const messageId = wait chatkit.sendMessage (message);
    retour messageId;
  } catch (error) {
    handleError (commit, error)
  } enfin {
    commit ('setSending', false);
  }
},
déconnexion async ({commit}) {
  commit ('reset');
  chatkit.disconnectUser ();
  window.localStorage.clear ();
}

Pour la fonction de déconnexion nous appelons commit ('reset') pour réinitialiser notre magasin à son état d'origine. Il s'agit d'une fonctionnalité de sécurité de base permettant de supprimer les informations utilisateur et les messages du cache du navigateur.

Commençons par mettre à jour le formulaire saisi dans src / components / MessageForm.vue pour émettre des événements de frappe en ajoutant le . @input directive:

Mettons maintenant à jour la section de script pour src / components / MessageForm.vue afin de gérer l’envoi de messages et l’émission d’événements de frappe. Mise à jour comme suit:

Et dans src / MessageList.vue :

 import {mapState} de 'vuex'

défaut d'exportation {
  nom: 'liste de messages',
  calculé: {
    ... mapState ([
      'messages',
      'userTyping'
    ])
  }
}

La fonction d'envoi de message devrait maintenant fonctionner. Afin d'afficher une notification qu'un autre utilisateur est en train de taper, nous devons ajouter un élément pour afficher ces informations. Ajoutez l'extrait suivant dans la section modèle de src / components / MessageList.vue juste après le groupe de messages div:

   @ {{userTyping}} est en cours de saisie. .. 

Pour tester cette fonctionnalité, connectez-vous simplement en tant qu'utilisateur utilisant un autre navigateur et commencez à taper. Une notification devrait apparaître dans la fenêtre de discussion de l’autre utilisateur.

Terminons ce didacticiel en implémentant la dernière fonctionnalité, logout . Notre magasin Vuex dispose déjà du code nécessaire pour gérer le processus de déconnexion. Nous avons juste besoin de mettre à jour src / components / ChatNavBar.vue . Liez simplement le bouton Logout au gestionnaire de fonctions sur Logout que nous avions précédemment spécifié:

  Logout 

C’est tout. Vous pouvez maintenant vous déconnecter et vous reconnecter en tant qu'autre utilisateur.

Résumé

Nous en sommes maintenant à la fin du didacticiel. L'API ChatKit nous a permis de créer rapidement une application de discussion en temps réel. Si nous devions créer une application similaire à partir de rien, cela nous prendrait plusieurs semaines, car nous devions également préciser le contenu final. L’avantage de cette solution est que nous n’avons pas à nous occuper de l’hébergement, de la gestion de bases de données ni d’autres problèmes d’infrastructure. Nous pouvons simplement créer et déployer le code frontal sur des périphériques clients sur des plateformes Web, Android et IOS.

Veuillez consulter la documentation, car il existe une tonne de fonctionnalités que je n'ai pas pu afficher. vous dans ce tutoriel. Avec le temps, vous pouvez facilement créer une application de chat complète qui rivalise avec des produits de chat populaires tels que Slack et Discord.

J'écris un code propre, lisible et modulaire. J'aime apprendre de nouvelles technologies qui améliorent l'efficacité et la productivité de mon flux de travail.