Share
Eine der coolsten neuen Funktionen von HTML5 ist WebSockets, mit dem wir ohne AJAX-Anfragen mit dem Server kommunizieren können. In diesem Lernprogramm wird der Prozess zum Ausführen eines WebSocket-Servers in PHP beschrieben. Anschließend wird ein Client erstellt, der über das WebSocket-Protokoll Nachrichten an ihn sendet und empfängt.
WebSockets ist eine Technik für die bidirektionale Kommunikation über einen (TCP) Socket, eine Art PUSH-Technologie. Im Moment wird es vom W3C noch standardisiert; Die neuesten Versionen von Chrome und Safari unterstützen jedoch WebSockets.
Websockets können lange Abfragen ersetzen. Dies ist ein interessantes Konzept. Der Client sendet eine Anfrage an den Server - anstatt dass der Server mit möglicherweise nicht vorhandenen Daten antwortet, hält er im Wesentlichen die Verbindung offen, bis die neuen, aktuellen Daten zum Senden bereit sind - der Client empfängt diese als nächstes und sendet eine weitere Anfrage. Dies hat seine Vorteile: Eine verringerte Latenz ist eine davon, da für eine bereits geöffnete Verbindung keine neue Verbindung hergestellt werden muss. Lange Abfragen sind jedoch keine wirklich ausgefallene Technologie: Es ist auch möglich, dass eine Anforderung unterbrochen wird, und daher wird ohnehin eine neue Verbindung benötigt.
In vielen Ajax-Anwendungen wird davon Gebrauch gemacht - dies ist oft auf eine schlechte Ressourcennutzung zurückzuführen.
Wäre es nicht toll, wenn der Server eines Morgens aufwachen und seine Daten an Clients senden könnte, die bereit sind, ohne eine zuvor eingerichtete Verbindung zuzuhören? Willkommen in der Welt der PUSH-Technologie!
Dieses Tutorial konzentriert sich mehr auf die Client-Erstellung als auf die Server-Implementierung.
Ich verwende XAMPP unter Windows 7, um den PHP-Server lokal auszuführen. Holen Sie sich eine Kopie von phpwebsockets, einem WebSocket-Server in PHP. (Hinweis: Bei dieser Version sind einige Probleme aufgetreten. Ich habe einige Änderungen daran vorgenommen und werde sie in die Quelldateien aufnehmen.) Es gibt verschiedene WebSocket-Implementierungen. Wenn einer nicht funktioniert, können Sie einen anderen Versuch starten oder einfach mit dem Tutorial fortfahren.
Ändern Sie den Server entsprechend Ihrem Setup, zum Beispiel in setup.class.php:
öffentliche Funktion __construct ($ host = 'localhost', $ port = 8000, $ max = 100) $ this-> createSocket ($ host, $ port);
Durchsuchen Sie die Dateien und nehmen Sie gegebenenfalls Änderungen vor.
Lasst uns eine Basisvorlage erstellen; Das ist meine client.php-Datei:
WebSockets-Client WebSockets-Client
z.B. Versuchen Sie "Hallo", "Name", "Alter", "Heute".
In diesem Code erstellen wir eine einfache Vorlage: Wir haben ein Feld für das Chat-Protokoll, ein Eingabefeld und eine Schaltfläche zum Trennen der Verbindung.
Nichts Besonderes, nur einige Elemente ausräumen.
body Schriftfamilie: Arial, Helvetica, serifenlos; #container border: 5px durchgehend grau; Breite: 800px; Marge: 0 auto; Polsterung: 10px; #chatLog padding: 5px; Rand: 1px durchgehend schwarz; #chatLog p margin: 0; .event color: # 999; .warning font-weight: fett; Farbe: #CCC;
Versuchen wir zunächst, die Idee von WebSocket-Ereignissen zu verstehen.
Wir werden drei Ereignisse verwenden:
Aber wie können wir das umsetzen??
Erstellen Sie zuerst ein WebSocket-Objekt
Accentsconagua
var socket = new WebSocket ("ws: // localhost: 8000 / socket / server / startDaemon.php"); Und nach Ereignissen zu suchen ist so einfach wie:
socket.onopen = function () alert ("Socket wurde geöffnet!"); Aber wie sieht es aus, wenn wir eine Nachricht erhalten?
socket.onmessage = function (msg) alert (msg); //Genial!
Vermeiden Sie jedoch die Verwendung von Alert-Boxen und integrieren Sie tatsächlich das Erlernte in die Kundenseite.
Ok, lass uns anfangen. Zuerst fügen wir unseren Code in die Dokumentbereitschaftsfunktion von jQuery ein und prüfen, ob der Benutzer über einen WebSockets-fähigen Browser verfügt. Wenn dies nicht der Fall ist, fügen wir im HTML einen Link zu Chrome hinzu.
$ (document) .ready (function () if (! ("WebSocket" im Fenster)) $ ('# chatLog, Eingabe, Schaltfläche, #examples'). fadeOut ("fast"); $ ('Oh nein, Sie benötigen einen Browser, der WebSockets unterstützt. Wie wäre es mit Google Chrome??
') .appendTo (' # container '); else // Der Benutzer hat WebSockets connect (); function connect () // Der Connect-Funktionscode befindet sich unten); Wenn der Benutzer über WebSockets verfügt, rufen wir eine connect () - Funktion auf. Dies ist der Kern der Funktionalität: Wir beginnen mit dem Öffnen, Schließen und Empfangen von Ereignissen.
Wir definieren die URL unseres Servers
var sockel; var host = "ws: // localhost: 8000 / socket / server / startDaemon.php";
Warten Sie, wo ist das? http in dieser URL? Oh ja, es ist eine WebSocket-URL, daher wird ein anderes Protokoll verwendet. Hier ist eine Zusammenfassung der Teile unserer URL:
Fahren wir mit unserer connect () - Funktion fort. Wir werden unseren Code innerhalb eines Try / Catch-Blocks einfügen. Wenn also etwas schief geht, können wir den Benutzer darüber informieren. Wir erstellen ein neues WebSocket und leiten die Nachricht an eine Nachrichtenfunktion weiter, die ich später erklären werde. Wir erstellen unsere Funktionen onopen, onmessage und onclose. Beachten Sie, dass wir dem Benutzer auch den Socket-Status anzeigen. Dies ist nicht notwendig, aber ich füge es hier ein, da es beim Debuggen hilfreich sein kann.
Funktion connect () try var socket; var host = "ws: // localhost: 8000 / socket / server / startDaemon.php"; var socket = new WebSocket (Host); Botschaft('Sockelstatus: '+ socket.readyState); socket.onopen = function () message ('
Sockelstatus: '+ socket.readyState +' (offen) '); socket.onmessage = function (msg) message ('
Erhalten: '+ msg.data); socket.onclose = function () message ('
Sockelstatus: '+ socket.readyState +' (geschlossen) '); catch (Ausnahme) Nachricht ('
Fehler '+ Ausnahme);
Die message () - Funktion ist ziemlich einfach. Sie nimmt etwas Text an, den wir dem Benutzer anzeigen möchten, und fügt ihn an das ChatLog an. Wir erstellen die entsprechende Klasse für Absatz-Tags in den Socket-Ereignisfunktionen, weshalb es in der Nachrichtenfunktion nur ein schließendes Absatz-Tag gibt.
Funktionsmeldung (msg) $ ('# chatLog'). anhängen (msg + ')'); Wenn Sie bis zu diesem Punkt verfolgt haben, gut gemacht! Es ist uns gelungen, eine einfache HTML / CSS-Vorlage zu erstellen, eine WebSocket-Verbindung zu erstellen und herzustellen und den Benutzer auf dem neuesten Stand zu halten, da der Fortschritt der Verbindung erreicht wurde.
Anstelle einer Senden-Schaltfläche können wir jetzt erkennen, wann der Benutzer die Eingabetaste auf der Tastatur drückt, und die Sendefunktion ausführen. Die '13', die Sie unten sehen, ist der ASCII-Schlüssel für die Eingabetaste.
$ ('# text'). Tastendruck (Funktion (Ereignis) if (event.keyCode == '13') send ();; Und hier ist die send () - Funktion:
Funktion send () var text = $ ('# text'). val (); if (text == "") message ('Bitte geben Sie eine Nachricht ein '); Rückkehr ; try socket.send (text); Botschaft('
Gesendet: '+ Text) catch (Ausnahme) Nachricht ('
Fehler: '+ Ausnahme); $ ('# text'). val ("");
Denken Sie daran, dass das, was Sie oben sehen, ein etwas grobkörniger Code ist, aber in Wirklichkeit ist der Code, den wir wirklich benötigen:
socket.send (); // Danke für JavaScript
Der zusätzliche Code führt eine Reihe von Dingen aus: Erkennen, ob der Benutzer nichts eingibt, aber weiterhin die Eingabetaste drückt, das Eingabefeld löschen und die Nachrichtenfunktionen aufrufen.
Das Schließen des Sockels ist ziemlich einfach: Befestigen Sie einen Klick-Handler an unserer Trennschaltfläche, und wir sind fertig!
$ ('# disconnect'). click (function () socket.close ();); $ (document) .ready (function () if (! ("WebSocket" im Fenster)) $ ('# chatLog, Eingabe, Schaltfläche, #examples'). fadeOut ("fast"); $ ('Oh nein, Sie benötigen einen Browser, der WebSockets unterstützt. Wie wäre es mit Google Chrome??
') .appendTo (' # container '); else // Der Benutzer hat WebSockets connect (); Funktion verbinden () Var Socket; var host = "ws: // localhost: 8000 / socket / server / startDaemon.php"; try var socket = new WebSocket (Host); Botschaft('Sockelstatus: '+ socket.readyState); socket.onopen = function () message ('
Sockelstatus: '+ socket.readyState +' (offen) '); socket.onmessage = function (msg) message ('
Erhalten: '+ msg.data); socket.onclose = function () message ('
Sockelstatus: '+ socket.readyState +' (geschlossen) '); catch (Ausnahme) Nachricht ('
Fehler '+ Ausnahme); Funktion send () var text = $ ('# text'). val (); if (text == "") message ('
Bitte geben Sie eine Nachricht ein '); Rückkehr ; try socket.send (text); Botschaft('
Gesendet: '+ Text) catch (Ausnahme) Nachricht ('
'); $ ('# text'). val (""); function message (msg) $ ('# chatLog'). anhängen (msg + ')
'); $ ('# text'). Tastendruck (Funktion (Ereignis) if (event.keyCode == '13') send ();; $ ('# disconnect'). click (function () socket.close ();); // Verbindung beenden // Ende sonst); Wir benötigen einen Befehlszeilenzugriff. Zum Glück hat XAMPP eine praktische Shell-Option. Klicken Sie im XAMPP-Kontrollfeld auf "Shell" und geben Sie Folgendes ein:
php -q pfad \ zu \ server.php
Sie haben jetzt einen WebSocket-Server gestartet!
Beim Laden der Seite wird versucht, eine WebSocket-Verbindung herzustellen (versuchen Sie, den Code so zu bearbeiten, dass der Benutzer die Option zum Verbinden / Trennen hat). Anschließend kann der Benutzer Nachrichten eingeben und Nachrichten vom Server empfangen.
Danke fürs Lesen; Ich hoffe, dir hat dieses Tutorial gefallen! Denken Sie daran, dass sich die Dinge ändern können, so spannend WebSockets auch sein mögen. Sie können sich hier auf die W3C WebSocket-API beziehen.
Wenn Sie mehr mit HMTL5 machen möchten, werfen Sie einen Blick auf die große Auswahl an HTML5-Codeelementen auf Envato Market. Es gibt Audioplayer, responsive Videogalerien, interaktive Karten und vieles mehr.
HTML5-Codeelemente auf dem Envato-Markt
