Créer un chat d'aide vidéo avec Node.js et Svelte

Un cas d'utilisation tel qu'un chat d'aide vidéo pour votre site web est un excellent argument en faveur d'un framework front-end. Peut-être que le reste du site n'a rien à voir avec le chat vidéo, ou peut-être que vous voulez utiliser le chat à plusieurs endroits ou avec plusieurs configurations. Pour toutes ces raisons, c'est le genre de chose que vous voudrez probablement intégrer dans un composant.

Svelte, qui se situe à l'extrémité la plus récente du spectre des frameworks frontaux, pourrait être un choix plus accessible. Si vous n'êtes pas déjà engagé dans un framework, il peut être plus rapide de commencer avec quelque chose qui utilise HTML, CSS et JavaScript d'une manière aussi familière. De plus, compte tenu de la diversité des éléments nécessaires au fonctionnement d'une Video, il est utile d'avoir moins de choses à apprendre pour cet exemple.

Conditions préalables

Pour démarrer un nouveau projet Svelte, la recommandation recommandation est d'utiliser degitun outil pratique qui télécharge et décompresse facilement les modèles d'application. Vous pouvez démarrer un nouveau projet Svelte en utilisant npx:

npx degit sveltejs/template video-help-chat

Une fois que vous avez votre copie, exécutez npm install pour installer les dépendances.

Vous pouvez maintenant naviguer dans le répertoire video-help-chat et vous verrez l'échafaudage d'un nouveau projet Svelte. Avant de vous lancer dans le code lui-même, vous aurez besoin de quelques éléments pour faire fonctionner le chat vidéo :

• a un compte de développeur de l'API Video de Vonage

• Express pour gérer la session Video

• Concurremment pour exécuter simultanément Express et Svelte

• Dotenv pour que vous puissiez conserver vos informations d'identification dans un .env fichier

Si vous n'avez pas de compte Video API de Vonage, vous devrez d'abord vous inscrire à un essai. Les outils pour créer votre serveur Video peuvent tous être installés à partir de npm :

npm -i opentok express concurrently dotenv

Svelte et express, ensemble

Concurremment vous permet d'exécuter plusieurs commandes à la fois à partir d'un seul et même endroit. script dans votre package.json. Vous pouvez l'utiliser pour démarrer votre serveur Express tout en exécutant Rollup pour reconstruire Svelte en cas de changement. Puisque vous avez déjà des commandes dans scripts pour gérer Svelte, vous pouvez superposer des scripts npm, en ajoutant un nouveau script qui exécute les scripts existants :

"scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public",
    "serve": "concurrently \"node server.js\" \"npm run dev\""
  },

Définir vos informations d'identification

Une bonne pratique consiste à créer d'emblée un emplacement sécurisé pour votre clé et votre secret API. Créez un fichier .env pour stocker ces données et toute autre donnée sensible. Avant de livrer votre code, assurez-vous d'ajouter le fichier à .gitignore afin qu'il ne soit pas accidentellement archivé. Si vous hébergez ce code plus tard, votre hébergeur aura probablement un moyen sûr pour que vous puissiez repeupler le fichier .env en toute sécurité.

Pour l'instant, vous n'avez besoin que de deux propriétés dans .env: votre clé et votre secret de l'API Video de Vonage. Les deux doivent être entre guillemets, sans espace :

Serveur

Votre serveur utilisera les informations d'identification que vous avez fournies pour créer un client Video API de Vonage.

L'API Video de Vonage était auparavant connue sous le nom d'OpenTok. Ce nom est encore utilisé dans certains codes, et nous continuerons à l'utiliser ici pour que le code ressemble davantage à nos anciens tutoriels.

Commencez par importer Express et créez l'application Express. Vous pouvez ensuite créer un itinéraire pour /chat. Les pages statiques sont souvent gérées au sommet d'un serveur Express, mais ici, elles seront gérées presque à la fin. Cela permet de limiter la part de responsabilité que nous redonnons à l'application Svelte, afin qu'elle n'essaie pas de gérer les points d'extrémité de notre serveur. Enfin, vous pouvez indiquer au serveur d'écouter sur le port 5000.

L'extrémité /chat est l'endroit où les choses intéressantes se passent. Cette fonction renvoie les informations d'identification nécessaires pour créer le chat vidéo sur le front-end. Elle gère également la session de Video Chat de manière très basique, en renvoyant la session existante ou en en créant une nouvelle s'il n'y en a pas.

require('dotenv').config();
const express = require('express');
const app = express();
app.use(express.json());

let sessionId;

app.get('/chat', function(request, response) {
  if (sessionId) {
    response.send({
      apiKey: process.env.VONAGE_VIDEO_API_KEY,
      sessionId: sessionId,
      token: opentok.generateToken(sessionId)
    });
  } else {
    opentok.createSession(function(err, session) {
      sessionId = session.sessionId;
      
      response.send({
        apiKey: process.env.VONAGE_VIDEO_API_KEY,
        sessionId: sessionId,
        token: opentok.generateToken(sessionId)
      });
    });
  } 
});

app.use(express.static('public'));
app.get('/', function(request, response) {
  response.sendFile(__dirname + '/public/index.html');
});

app.listen(5000);

Pour commencer à intégrer cet exemple dans un site réel, la variable sessionId ci-dessus est votre point d'entrée. Vous pouvez toujours créer une nouvelle session à partir du point de terminaison /chat et ajouter les identifiants à une pile, au lieu d'une seule variable. Votre équipe chargée de répondre aux chats vidéo peut alors accéder à ces identifiants de session pour rejoindre les appels en attente.

Client

Votre modèle de demande doit inclure un fichier populé App.svelte sous /public/src. Il devrait être possible de l'exécuter et de le tester dès maintenant en allant dans votre terminal et en tapant :

Vous devriez voir la page Svelte hello world si vous ouvrez votre navigateur et allez sur 'localhost:5000'.

Pendant que vous avez App.svelte ouvert, ajoutez des références au composant que nous allons créer. Tout d'abord, importez le composant, que nous appellerons Chat.svelte:

<script>
	export let name;

	import Chat from './Chat.svelte';
</script>

Au bas de votre page, au-dessus de la balise <style> ajoutez le composant lui-même :

<main>
	<h1>Hello {name}!</h1>
	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>

<Chat/>

Composant du chat

Il se peut que votre application en cours d'exécution ait à se plaindre en ce moment, alors ajoutez rapidement le fichier Chat.svelte au fichier /public/src. Pendant que vous y êtes, vous pouvez également ajouter ChatButton.svelte et VideoChat.svelte fichiers.

Le composant Chat sera simplement un conteneur pour le chat, qui a deux états. Au départ, l'utilisateur se voit proposer un lien pour lancer la discussion. Une fois qu'il aura cliqué sur le lien, il entrera dans la discussion vidéo proprement dite. Le composant Chat gère le passage entre les deux, qui seront encapsulés dans leurs propres composants.

Si vous n'avez pas travaillé avec beaucoup de composants Svelte, celui-ci est un bon exemple minimal. Vous pouvez voir qu'il n'y a que du JavaScript, du HTML et du CSS. Il ressemble beaucoup à une page HTML statique, sans le contenu et les méta-informations :

<script>
  export let collapsed = true;

  import ChatButton from './ChatButton.svelte';
  import Conversation from './VideoChat.svelte';
</script>


<div class="chatContainer" class:expanded="{!collapsed}">
  {#if collapsed}
    <ChatButton bind:showButton={collapsed}/>
  {:else}
    <Conversation/>
  {/if}
</div>

<style>
  .chatContainer {
    position: fixed;
    bottom: 2em;
    right: 2em;
  }
  .expanded {
    width: auto;
    left: 2em;
    min-height: 10em;
  }
</style>

Comme il s'agit simplement d'un conteneur pour l'état, il est logique que le composant n'ait qu'une seule propriété, collapsed. Il importe les deux autres composants et détermine lequel afficher à l'aide d'une structure conditionnelle dans le balisage. Enfin, une feuille de style CSS colle le conteneur en bas à droite. Si le chat est ouvert, une classe CSS conditionnelle étire le conteneur.

Fonctionnalité des boutons de chat

La majeure partie du composant ChatButton est constituée de CSS décoratifs qui lui donnent l'aspect d'un petit ballon de parole. Cependant, c'est aussi un exemple de la façon dont Svelte gère les événements et communique entre les composants.

Le composant n'exporte qu'une seule propriété, showButton. Celle-ci n'est pas utilisée dans le composant, mais dans son parent. Elle est liée à la propriété collapsed du composant Chat dans la balise Chat :

    <ChatButton bind:showButton={collapsed}/>

Lorsque le bouton est cliqué, la fonction openChat est appelée, ce qui a pour effet de faire passer la valeur de showButton à false et, par conséquent, la valeur de collapsed à false dans le parent. Cela ouvrira l'interface utilisateur du chat.

<script>
  export let showButton = true;

  function openChat() {
    showButton = false;
  }
</script>

<button on:click={openChat}>Chat now</button>

<style>
  button {
    position: relative;
    background: #ac57c8;
    border: none;
    border-radius: 10px;
    padding: 20px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 5px 15px 10px rgba(0,0,0,.5);
  }
  button:hover, button:active {
    color: #83C4F1;
  }
  button:after {
    content: '';
    position: absolute;
    right: 0;
    top: 60%;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-left-color: #ac57c8;
    border-right: 0;
    border-bottom: 0;
    margin-top: -10px;
    margin-right: -20px;
  }
</style>

Video Chat

Nous avons gardé les bonnes choses (le JavaScript, bien sûr) pour la fin. Il n'y a pas beaucoup de HTML et de CSS dans le composant VideoChat. Il y a des espaces réservés pour l'éditeur et l'abonné (qui vous représentent vous et la personne avec qui vous discutez), ainsi qu'un style de ballon de parole pour le conteneur. Le reste est du JS.

Pour créer un chat vidéo, vous devrez faire plusieurs choses :

• Obtenir la session (nouvellement créée ou en cours, le client s'en moque) du serveur.

• L'initialiser

• Écouter la création d'un flux, puis s'y abonner

• Écouter la déconnexion de la session

• Initialisation de la publication (envoi de vidéo et d'audio)

• Se connecter à la session et y publier

La majeure partie du travail s'effectue dans une fonction appelée initSessionappelée une fois que le client a réussi à obtenir une session du serveur. Avec la viande de initSession supprimée, le composant n'est pas trop complexe. Il utilise fetch pour obtenir la session et définit un gestionnaire d'erreur. Il définit ensuite les marqueurs pour le chat vidéo et les feuilles de style CSS pour le mettre en page :

<script>
  fetch('/chat').then(function fetch(res) {
    return res.json();
  }).then(function fetchJson(json) {
    if (json.error) {
      handleError(error);
    } else {
      initSession(json.apiKey, json.sessionId, json.token);
    }
  }).catch(function catchErr(error) {
    handleError(error);
  });

  function handleError(error) {
    if (error) {
      console.error(error);
    }
  }

  function initSession(apiKey, sessionId, token) {}
</script>


<div class="conversation">
  <div id="subscriber"></div>
  <div id="publisher"></div>
</div>

<style>
  .conversation {
    position: relative;
    width: auto;
    min-height: 10em;
    background: #ac57c8;
    border: none;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 5px 15px 10px rgba(0,0,0,.5);
  }
  .conversation:after {
    content: '';
    position: absolute;
    right: 0;
    top: 60%;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-left-color: #ac57c8;
    border-right: 0;
    border-bottom: 0;
    margin-top: -10px;
    margin-right: -20px;
  }
</style>

Le contenu de initSession est principalement constitué de rappels. Tout d'abord, vous créez un écouteur pour streamCreatedet à l'intérieur de celui-ci, vous définissez un objet d'options et l'utilisez pour appeler session.subscribe(). Vous pouvez également créer un récepteur pour sessionDisconnected. Actuellement, ce composant ne donne pas de retour d'information à son parent, mais il serait plus robuste s'il signalait la fin de la discussion. Le sessionDisconnected serait l'endroit idéal pour le faire.

Vous pouvez créer publisherOptions qui ressemblent à vos subscriberOptions et indiquer simplement que l'élément Video doit être ajouté à son conteneur avec une hauteur et une largeur de 100 %. Vous pouvez ensuite initialiser l'éditeur.

Enfin, une fois votre éditeur prêt à l'emploi, connectez-vous à la session avec session.connect(). Une fois la connexion établie, vous pouvez commencer à publier avec session.publish().

function initSession(apiKey, sessionId, token) {
    var session = OT.initSession(apiKey, sessionId);

    // Subscribe to a newly created stream
    session.on('streamCreated', function streamCreated(event) {
      var subscriberOptions = {
        insertMode: 'append',
        width: '100%',
        height: '100%'
      };
      session.subscribe(event.stream, 'subscriber', subscriberOptions, handleError);
    });

    session.on('sessionDisconnected', function sessionDisconnected(event) {
      console.log('You were disconnected from the session.', event.reason);
    });

    // initialize the publisher
    var publisherOptions = {
      insertMode: 'append',
      width: '100%',
      height: '100%'
    };
    var publisher = OT.initPublisher('publisher', publisherOptions, handleError);

    // Connect to the session
    session.connect(token, function callback(error) {
      if (error) {
        handleError(error);
      } else {
        // If the connection is successful, publish the publisher to the session
        session.publish(publisher, handleError);
      }
    });
  }

Essayez-le

Si votre serveur a fonctionné pendant tout ce temps, vous devriez pouvoir voir une partie ou la totalité de votre code fonctionner dans l'onglet ouvert de votre navigateur. Vous devez probablement redémarrer votre serveur. Dans votre terminal, arrêtez tout en appuyant sur Ctrl+C, puis redémarrez Express et Svelte avec npm run serve.

Ouvrir ou retourner à localhost:5000 dans votre navigateur. La façon la plus simple d'essayer le chat est d'ouvrir un autre navigateur et d'aller également sur localhost:5000. Ce n'est pas très sophistiqué, mais l'écho que vous entendrez devrait vous confirmer que le chat fonctionne.

Prochaines étapes

Maintenant que vous avez un chat de base, vous pouvez faire beaucoup plus avec l'API vidéo de Video API de Vonage. Vous pouvez également choisir de garder les fonctions réduites pour l'instant et d'apporter quelques modifications à la façon dont le serveur fournit les sessions afin que les utilisateurs puissent " demander " à partir de cette interface et que les utilisateurs internes puissent " répondre " à partir d'une autre.

Vous pouvez également faire bien d'autres choses avec Svelte, comme le montre leur excellent tutoriel. Si vous intégrez d'autres fonctionnalités à votre chat, par exemple la collecte du nom ou de l'adresse électronique de l'utilisateur, ces outils pourraient s'avérer très utiles.