Erstellen der Projektordner und der HTML-Vorlage
Sie beginnen mit der Erstellung einer HTML-Datei, einer JavaScript-Datei und einer CSS-Datei. Diese drei Dateien werden unser Layout, die Anwendungslogik und einige visuelle Elemente enthalten.
- Bevor Sie mit dem Code beginnen, erstellen Sie einen neuen Projektordner auf Ihrem Computer, um diese Dateien zu speichern (das folgende Beispiel heißt myproject aber Sie können es nennen, wie Sie wollen). Dann fügen Sie eine /js und /css zusammen mit leeren Dateien für index.html, app.jsund app.css in der folgenden Struktur:
Sobald Sie Ihr Projekt eingerichtet haben, öffnen Sie den Hauptprojektordner in Ihrem Code-Editor und gehen Sie zum Abschnitt index.html Datei.
- Kopieren Sie den folgenden Code (über die Schaltfläche Kopieren) und fügen Sie ihn im Code-Editor in Ihre Datei index.html ein:
<!DOCTYPE html>
<html>
<head>
<title> OpenTok Signaling Sample </title>
<script src="https://static.opentok.com/v2/js/opentok.min.js"></script>
<link href="css/app.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="textchat">
<p id="history"></p>
<form>
<input type="text" placeholder="Input your text here" id="msgTxt"></input>
</form>
</div>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
Der obige Code enthält Verweise auf die opentok.js Bibliothek sowie die von Ihnen erstellten JS- und CSS-Dateien. Der Code enthält auch ein Div für den Text-Chat und ein Formular, mit dem Sie Nachrichten senden können.
Einfacher Text-Chat
In diesem Tutorial lernen Sie, wie Sie mit der Video API von Vonage einen einfachen Text-Chat von Grund auf aufbauen. Dies ist der schnellste Weg, um einen Proof of Concept für diese Funktionalität auf der Videoplattform zu erstellen.