Erstellen Sie einen Video-Hilfe-Chat mit Node.js und Svelte

Ein Anwendungsfall wie ein Video-Hilfe-Chat für Ihre Website ist ein gutes Argument für ein Front-End-Framework. Vielleicht hat der Rest der Website nichts mit dem Video-Chat zu tun, oder Sie möchten den Chat an mehreren Stellen oder mit mehreren Konfigurationen verwenden. Aus einer Vielzahl von Gründen ist es die Art von Sache, die Sie wahrscheinlich in einer Komponente bauen wollen.

Svelte, am neueren Ende des Front-End-Framework-Spektrums, könnte eine zugänglichere Wahl sein. Wenn Sie sich noch nicht auf ein Framework festgelegt haben, ist es vielleicht schneller, mit etwas anzufangen, das HTML, CSS und JavaScript auf so vertraute Weise verwendet. Und bei der Vielzahl von Komponenten, die für die Erstellung von Videos erforderlich sind, ist ein geringerer Lernaufwand eine nützliche Funktion für dieses Beispiel.

Voraussetzungen

Um mit einem neuen Svelte-Projekt zu beginnen, ist die Empfehlung ist die Verwendung von degitzu verwenden, ein praktisches Werkzeug, mit dem sich Anwendungsvorlagen problemlos herunterladen und entpacken lassen. Sie können ein neues Svelte-Projekt starten, indem Sie npx:

npx degit sveltejs/template video-help-chat

Sobald Sie Ihre Kopie haben, führen Sie npm install um die Abhängigkeiten zu installieren.

Jetzt können Sie zu dem Verzeichnis video-help-chat Verzeichnis navigieren und Sie werden das Gerüst für ein neues Svelte-Projekt sehen. Bevor Sie sich in den Code stürzen, benötigen Sie ein paar Dinge, damit der Video-Chat funktioniert:

• a Vonage Video API Entwickler-Konto

• Express zur Verwaltung der Videositzung

• Gleichzeitig, um Express und Svelte gleichzeitig auszuführen

• Dotenv, damit Sie Ihre Anmeldedaten in einer .env Datei

Wenn Sie noch keinen Vonage Video API Account haben, müssen Sie sich zunächst für eine Testversion anmelden. Die Tools zur Erstellung Ihres Video-Servers können alle von npm installiert werden:

npm -i opentok express concurrently dotenv

Schlank und Express, gemeinsam

Mit Concurrently können Sie mehrere Befehle auf einmal von einem einzigen script in Ihrem package.json. Sie können damit Ihren Express-Server starten und gleichzeitig Rollup ausführen, um Svelte neu zu erstellen, wenn sich etwas ändert. Da Sie bereits über Befehle in scripts bereits Befehle für Svelte haben, können Sie npm-Skripte übereinanderlegen, indem Sie ein neues Skript hinzufügen, das die vorhandenen ausführt:

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

Einstellen Ihrer Berechtigungsnachweise

Es empfiehlt sich, gleich zu Beginn einen sicheren Ort für Ihren API-Schlüssel und Ihr Geheimnis zu schaffen. Erstellen Sie eine .env Datei, um diese und andere sensible Daten zu speichern. Bevor Sie Ihren Code übergeben, fügen Sie die Datei zu .gitignore hinzufügen, damit sie nicht versehentlich eingecheckt wird. Wenn Sie diesen Code später hosten, wird Ihr Hoster wahrscheinlich eine sichere Möglichkeit haben, die .env Datei dort zu speichern.

Im Moment benötigen Sie nur zwei Eigenschaften in .env: Ihren Vonage Video API Schlüssel und Ihr Geheimnis. Beide sollten in Anführungszeichen ohne Leerzeichen eingeschlossen sein:

Server

Ihr Server wird die von Ihnen angegebenen Anmeldeinformationen verwenden, um einen Vonage Video API-Client zu erstellen.

Die Vonage Video API war früher unter dem Namen OpenTok bekannt. Der Name wird in einigen Codes immer noch verwendet, und wir werden ihn hier beibehalten, damit der Code unseren älteren Tutorials ähnlicher wird.

Beginnen Sie mit dem Import von Express und erstellen Sie die Express-Anwendung. Anschließend können Sie eine Route für /chat. Man sieht oft, dass statische Seiten am Anfang eines Express-Servers behandelt werden, aber hier werden sie fast am Ende behandelt. Dadurch wird die Verantwortung, die wir an die Svelte-Seite der Anwendung zurückgeben, begrenzt, so dass diese nicht versucht, unsere Server-Endpunkte zu verwalten. Schließlich können Sie dem Server mitteilen, dass er auf Port 5000 lauschen soll.

Der /chat Endpunkt ist der Ort, an dem die interessanten Dinge passieren. Diese Funktion gibt die Anmeldedaten zurück, die für die Erstellung des Video-Chats am Frontend benötigt werden. Sie verwaltet auch die Video-Chat-Sitzung auf sehr einfache Weise, indem sie die bestehende Sitzung zurückgibt oder eine neue erstellt, falls keine vorhanden ist.

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

Um mit der Integration dieses Beispiels in eine echte Website zu beginnen, ist die sessionId ist Ihr Einstiegspunkt. Sie können jederzeit eine neue Sitzung über den /chat Endpunkt eine neue Sitzung erstellen und die IDs zu einem Stapel anstelle einer einzelnen Variablen hinzufügen. Ihr Team, das für die Beantwortung der Video-Chats zuständig ist, kann dann auf diese Sitzungs-IDs zugreifen, um sich an den wartenden Anrufen zu beteiligen.

Kunde

Ihre Musteranwendung sollte eine ausgefüllte App.svelte Datei unter /public/src. Es sollte möglich sein, dies jetzt auszuführen und zu testen, indem Sie in Ihr Terminal gehen und Folgendes eingeben:

Sie sollten die Svelte Hallo-Welt-Seite sehen, wenn Sie Ihren Browser öffnen und zu 'localhost:5000' gehen.

Während Sie die App.svelte geöffnet haben, fügen Sie Verweise auf die Komponente hinzu, die wir als Nächstes erstellen werden. Importieren Sie zunächst die Komponente, die wir folgendermaßen nennen Chat.svelte:

<script>
	export let name;

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

Unten auf der Seite, oberhalb des <style> Tag, die Komponente selbst ein:

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

Chat-Komponente

Ihre laufende Anwendung könnte jetzt einige Beschwerden haben, also fügen Sie schnell die Chat.svelte Datei zu /public/src. Wenn Sie schon dabei sind, können Sie auch ChatButton.svelte und VideoChat.svelte Dateien.

Die Chat-Komponente ist lediglich ein Container für den Chat, der zwei Zustände hat. Zunächst wird dem Benutzer ein Link angezeigt, über den er den Chat starten kann. Sobald er auf den Link klickt, betritt er den eigentlichen Video-Chat. Die Chat-Komponente verwaltet das Umschalten zwischen den beiden Zuständen, die in eigenen Komponenten gekapselt werden.

Wenn Sie noch nicht mit vielen Svelte-Komponenten gearbeitet haben, ist dies eine gute Minimalversion, die Sie sich ansehen sollten. Sie können sehen, dass es nur JavaScript, HTML und CSS ist. Sie sieht ähnlich aus wie eine statische HTML-Seite, nur ohne den Inhalt und die Metainformationen:

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

Da es sich nur um einen Container für den Zustand handelt, ist es sinnvoll, dass die Komponente nur eine Eigenschaft hat, collapsed. Sie importiert die beiden anderen Komponenten und bestimmt anhand einer bedingten Struktur im Markup, welche angezeigt werden soll. Schließlich wird der Container mit Hilfe von CSS unten rechts platziert. Wenn der Chat geöffnet ist, streckt eine bedingte CSS-Klasse den Container.

Funktionalität der Chat-Schaltfläche

Der größte Teil der ChatButton-Komponente ist dekoratives CSS, damit sie wie eine kleine Sprechblase aussieht. Es ist aber auch ein Beispiel dafür, wie Svelte Ereignisse verarbeitet und zwischen Komponenten kommuniziert.

Die Komponente exportiert nur eine Eigenschaft, showButton. Diese wird nicht innerhalb der Komponente verwendet, sondern in ihrer übergeordneten Komponente. Sie wurde gebunden an die collapsed Eigenschaft der Komponente Chat innerhalb des Chat-Markup gebunden:

    <ChatButton bind:showButton={collapsed}/>

Wenn die Schaltfläche angeklickt wird, wird die openChat Funktion aufgerufen, die den Wert von showButton auf false und setzt folglich collapsed im übergeordneten Element auf false. Dadurch wird die Chat-Benutzeroberfläche geöffnet.

<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

Wir haben uns die guten Sachen (das JavaScript natürlich) für den Schluss aufgehoben. Es gibt nicht viel HTML und CSS in der VideoChat-Komponente. Es gibt Platzhalter für den Herausgeber und den Teilnehmer (Ansichten von Ihnen und der Person, mit der Sie chatten) und mehr Sprechblasen-Styling für den Container. Der Rest ist JS.

Um einen Video-Chat zu erstellen, müssen Sie mehrere Dinge tun:

• Abrufen der Sitzung (neu erstellt oder im Gange, dem Client ist das egal) vom Server

• Initialisieren

• Abwarten, dass ein Stream erstellt wird, und diesen dann abonnieren

• Abwarten, bis die Verbindung unterbrochen wird

• Initialisierung der Veröffentlichung (Senden von Video und Audio)

• Verbinden Sie sich mit der Sitzung und veröffentlichen Sie sie

Der größte Teil der Arbeit wird in einer Funktion namens initSessiondie aufgerufen wird, sobald der Client erfolgreich eine Sitzung vom Server erhalten hat. Da der Hauptteil der initSession entfernt wurde, ist die Komponente nicht allzu komplex. Sie verwendet fetch um die Sitzung zu erhalten und definiert einen Fehler-Handler. Dann definiert sie die Markup-Platzhalter für den Video-Chat und das CSS, um ihn zu gestalten:

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

Der Inhalt von initSession sind hauptsächlich Rückrufe. Zuerst erstellen Sie einen Listener für streamCreatedund definieren darin ein Options-Objekt, mit dem Sie session.subscribe(). Sie können auch einen Listener für sessionDisconnected. Derzeit gibt diese Komponente keine Rückmeldung an ihre Eltern, aber es wäre robuster, wenn sie signalisieren würde, wann der Chat beendet ist. Der sessionDisconnected Handler wäre ein Ort, um dies zu tun.

Sie können eine publisherOptions erstellen, die genauso aussehen wie Ihre subscriberOptions und geben Sie einfach an, dass das Video-Element mit 100 % Höhe und Breite an seinen Container angehängt werden soll. Dann können Sie den Herausgeber initialisieren.

Wenn Ihr Publisher bereit ist, verbinden Sie sich mit der Sitzung mit session.connect(). Sobald Sie erfolgreich verbunden sind, können Sie die Veröffentlichung mit 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);
      }
    });
  }

Probieren Sie es aus

Wenn Ihr Server die ganze Zeit gelaufen ist, sollten Sie in der Lage sein, einen Teil oder den gesamten Code in Ihrem offenen Browser-Tab zu sehen. Wahrscheinlich müssen Sie aber Ihren Server neu starten. Fahren Sie in Ihrem Terminal alles mit Strg+C herunter und starten Sie dann Express und Svelte erneut mit npm run serve.

Öffnen Sie oder kehren Sie zurück zu localhost:5000 in Ihrem Browser. Am einfachsten können Sie den Chat ausprobieren, indem Sie einen anderen Browser öffnen und ebenfalls zu localhost:5000. Dies ist nicht sehr anspruchsvoll, aber das Echo, das Sie hören, sollte Ihnen bestätigen, dass der Chat funktioniert.

Nächste Schritte

Nachdem Sie nun einen grundlegenden Chat eingerichtet haben, können Sie noch viel mehr tun mit der Vonage Video API. Sie können sich aber auch dafür entscheiden, die Funktionen vorerst auf ein Minimum zu beschränken und einige Änderungen an der Art und Weise vorzunehmen, wie der Server Sitzungen bereitstellt, so dass Benutzer von dieser Schnittstelle aus "fragen" können und interne Benutzer von einer anderen aus "antworten" können.

Es gibt noch viel mehr, was Sie mit Svelte machen können, wie Sie in dem hervorragenden Lernprogramm. Wenn Sie weitere Funktionen in Ihren Chat einbauen, z. B. die Erfassung des Namens oder der E-Mail-Adresse des Benutzers, können diese Tools sehr nützlich sein.