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: