WebSocket -Beispielprogramm
Das WebSocket-Protokoll ermöglicht eine wechselseitige Kommunikation zwischen einem Client und einem Server. Dieser Vorgang ähnelt der Art und Weise, wie Anrufe auf Ihrem Telefon stattfinden: Zuerst stellen Sie eine Verbindung her und dann können Sie miteinander kommunizieren. Das WebSocket -Protokoll wird fast überall verwendet - von Multiplayer -Browser -Spielen bis hin zu Chat -Anwendungen.
Dieser Artikel zeigt, wie Sie ein WebSocket -Protokoll erstellen und es verwenden, um mit mehreren Benutzern zu kommunizieren.
Voraussetzungen
Bevor Sie zum Erstellen und Verwenden eines WebSocket -Protokolls übergehen, müssen Sie zunächst einige Dinge installieren, die für diesen Prozess erforderlich sind. Das erste, was Sie installieren müssen, ist der Knoten.JS, eine serverseitige Plattform, die die JavaScript-Programmiersprache in den Maschinencode umwandelt, mit dem Sie JavaScript direkt auf Ihrem Computer ausführen können. Zum Installieren von Knoten.JS, Windows -Benutzer können einfach zum offiziellen Knoten gehen.JS -Website und klicken Sie auf die Schaltfläche Green LTS in der Mitte des Bildschirms.
Klicken Sie für Linux- und MacOS -Benutzer auf die Downloads Abschnitt im Unterhader der Website.
Nach dem Öffnen der Downloads In Abschnitt werden Installationsdateien für alle drei Hauptplattformen angezeigt. Wählen Sie ein Paket aus, das von Ihrem System unterstützt wird.
Führen Sie den Installationsprogramm aus, der mit den heruntergeladenen Dateien und dem Knoten geliefert wird.JS wird auf Ihrem Computer installiert. Um zu überprüfen, ob das Programm installiert wurde, öffnen Sie das Terminal und geben Sie den folgenden Befehl aus:
$ node -v
Nach der Installation des Knotens.JS, Sie haben jetzt Zugriff auf verschiedene JavaScript -Module, wodurch Ihre Arbeit auf lange Sicht effizienter wird. Öffnen Sie das Verzeichnis, in dem Sie Ihre Client- und Serverarchitektur erstellen möchten, dann das Terminal in diesem Verzeichnis öffnen und den folgenden Befehl ausführen:
$ npm init -y
Dieser Befehl wird zum Erstellen des Pakets verwendet.JSON -Datei, mit der Sie einen anderen Knoten einrichten und installieren können.JS -Pakete. Installieren Sie das WebSocket -Protokollpaket, indem Sie den folgenden Befehl im Terminal ausgeben:
$ npm Installieren Sie WS
Erstellen Sie drei Dateien mit dem Namen Index.HTML, Kunde.JS und Server.JS. Wie unter den Namen angegeben, sind diese JavaScript -Dateien die Client- und Serverarchitektur unseres WebSocket -Protokolls. Jetzt können wir endlich den Code unserer Client- und Serveranwendungen schreiben.
Erstellen eines WebSocket -Servers
Um einen WebSocket -Server zu erstellen, werden wir zunächst den Code für den Server schreiben. Öffne das Server.JS Datei, die Sie in Ihrem Texteditor oder IDE im vorherigen Abschnitt erstellt haben, und geben Sie die folgenden Zeilen in der Datei ein.
const webocket = fordert ('WS');const ws = neues Websocket.Server (Port: 8080);
Konsole.log ("Server gestartet");
WS.auf ('Verbindung', (WSS) =>
Konsole.Log ("Ein neuer Client angeschlossen")
WSS.Senden ('Willkommen zum Server!');
WSS.auf ('meldung', (message) =>
Konsole.log ('Server empfangen: $ message');
WSS.send ('' hast deine Nachricht: ' + meldung);
);
);
Jetzt werden wir erklären, was jede Zeile ausführlicher tut.
Code Erläuterung
Wie bereits erwähnt, gibt es im Knoten einige eingebaute Module erhältlich.JS, die Ihre Arbeit viel einfacher machen. Um diese Module zu importieren, werden wir die verwenden erfordern Stichwort.
const webocket = fordert ('WS');const ws = neues Websocket.Server (Port: 8080);
Konsole.log ("Server gestartet");
Die erste Zeile wird verwendet, um den Knoten zu importieren.JS WebSocket -Modul. Mit diesem Modul erstellen wir in der nächsten Zeile unseren WebSocket -Server, der auf Port 8080 zuhört. Der Konsole.Protokoll() Zeile ist einfach da, um uns mitzuteilen, dass der Server begonnen hat. Sie werden sehen, dass dies in Ihrem Terminal angezeigt wird, wenn Sie den folgenden Befehl im Terminal ausführen:
$ Node Server
In der nächsten Zeile stellen wir eine Verbindung zwischen dem Server und dem Client her.
WS.auf ('Verbindung', (WSS) =>Konsole.Log ("Ein neuer Client angeschlossen")
);
Nachdem eine Verbindung hergestellt wurde, ist das WSS.Send () Zeile sendet eine Nachricht an den Client. In diesem Fall ist die Nachricht „Willkommen auf dem Server.”
WSS.Senden ('Willkommen zum Server!');Schließlich die WSS.Auf ('Nachricht') empfängt der Server die Nachricht vom Client. Zur Bestätigung sendet der Server diese Nachricht in der letzten Zeile an den Client zurück.
WSS.auf ('meldung', (message) =>Konsole.log ('Server empfangen: $ message');
WSS.send ('' hast deine Nachricht: ' + meldung);
);
Erstellen eines WebSocket -Clients
Für die Client-Seite benötigen wir beide den Index.HTML -Datei und der Client.JS -Datei. Natürlich können Sie den Inhalt einfach vom Client hinzufügen.JS -Datei in Ihren Index.HTML -Datei, aber ich ziehe es vor, sie getrennt zu halten. Schauen wir uns zunächst den Kunden an.JS -Code. Öffnen Sie die Datei und geben Sie die folgenden Zeilen in der Datei ein:
const socket = new WebSocket ('WS: // localhost: 8080');Steckdose.AddEventListener ('Open', () =>
Konsole.Log ('mit dem Server verbunden!');
);
Steckdose.AddEventListener ('Nachricht', (msg) =>
Konsole.log ('client empfangen: $ msg.Daten');
);
const sendsg = () =>
Steckdose.Senden ('Wie geht es amigo!');
Code Erläuterung
Wie mit dem Server.JS, wir werden ein neues WebSocket erstellen, das Port 8080 anhört, das in der zu sehen ist Localhost: 8080 Abschnitt des Codes.
const socket = new WebSocket ('WS: // localhost: 8080');In der nächsten Zeile, AddEventListener lässt Ihren Kunden Ereignisse hören, die derzeit stattfinden. In diesem Fall würde es den Server erstellen und starten. Sobald die Verbindung hergestellt ist, gibt der Client eine Nachricht an das Terminal aus.
Steckdose.AddEventListener ('Open', () =>Konsole.Log ('mit dem Server verbunden!');
);
Noch einmal hört der Kunde auf Ereignisse, die derzeit stattfinden. Wenn der Server eine Nachricht sendet, empfängt der Client dies und zeigt dann die Nachricht im Terminal an.
Steckdose.AddEventListener ('Nachricht', (msg) =>Konsole.log ('client empfangen: $ msg.Daten');
);
Die letzten Zeilen sind einfach eine Funktion, bei der der Client eine Nachricht an den Server sendet. Wir werden dies mit einer Schaltfläche in unserer HTML -Datei verbinden, um besser zu verstehen, wie dies funktioniert.
const sendsg = () =>Steckdose.Senden ('Wie geht es amigo!');
Vorbereitung einer HTML -Datei
Schließlich öffnen Sie den Index.HTML -Datei und fügen Sie einen Verweis auf Ihren Client hinzu.JS -Datei innerhalb davon. In meinem Fall werde ich einfach die folgenden Codezeilen hinzufügen:
Wie Sie in den folgenden Zeilen sehen können, src (innerhalb des Skript -Tags) bezieht sich auf die Client -JavaScript -Datei. Die im Client erstellte Sendsg -Funktion, die erstellt wurde.JS -Datei wurde auch mit der Onclick -Funktion der Schaltfläche verbunden.
Alles zusammenstellen
Sie können jetzt mit dem Testen Ihrer Client- und Serverarchitektur beginnen. Öffnen Sie zunächst das Terminal und führen Sie den folgenden Befehl aus, um Ihren Server zu starten:
$ Node Server
Öffnen Sie nach dem Start Ihres Servers das Verzeichnis, in dem Ihr Index.Die HTML-Datei ist vorhanden und doppelklicken Sie darauf, um sie in Ihrem Browser zu öffnen. Sie sehen, dass die folgende Nachricht im Terminal angezeigt wird, dass ein Client verbunden hat:
Sie können auch die vom Server an den Client gesendeten Nachrichten überprüfen, indem Sie die mit der rechten Klick-Taste drücken und dann die öffnen Prüfen Fenster. Klicken Sie in diesem Fenster auf die Konsole Abschnitt, und Sie können die vom Server gesendeten Nachrichten sehen.
Sobald Sie auf die Schaltfläche klicken, können sowohl der Server als auch der Client Nachrichten an und voneinander senden und empfangen.
Server:
Klient:
Voilà, Ihre WebSocket -Verbindung wurde hergestellt!
Abschluss
Das WebSocket -Protokoll ist eine hervorragende Möglichkeit, die Kommunikation zwischen einem Client und einem Server festzulegen. Dieses Protokoll wird in mehreren Bereichen verwendet, einschließlich Multiplayer -Browser -Spielen, Chat -Systemen verschiedener Social -Media -Plattformen und sogar Kollaborationsprozessen zwischen Codierern.