WebJX -Artikel Einführung: Eine coole neue Funktion in HTML5 ist WebSockets, mit der wir ohne AJAX -Anforderungen mit dem Server sprechen können. Heute ermöglicht Bingo jedem, WebSocket über die Serverseite der PHP-Umgebung auszuführen, Clients zu erstellen und serverseitige Informationen über das WebSockets-Protokoll zu senden und zu empfangen. Was sind Websockets? Websockets sind bidirektional in einer (TCP) Schnittstelle
Eine coole neue Funktion in HTML5 ist WebSockets, mit der wir ohne AJAX -Anforderungen mit dem Server sprechen können. Heute ermöglicht Bingo jedem, WebSocket über die Serverseite der PHP-Umgebung auszuführen, Clients zu erstellen und serverseitige Informationen über das WebSockets-Protokoll zu senden und zu empfangen.
Was sind Websockets?
WebSockets ist eine Technologie, die eine bidirektionale Kommunikation auf einer (TCP) Schnittstelle und einen Push -Technologie -Typ durchführt. Gleichzeitig basieren WebSockets weiterhin auf dem W3C -Standard. Bisher haben die neuesten Versionen von Chrome- und Safari -Browsern bereits Websockets unterstützt.
Was werden Websockets ersetzen?
WebSockets können lange Umfragen (PHP Server Push -Technologie) ersetzen, was ein interessantes Konzept ist. Der Client sendet eine Anfrage an den Server. Jetzt reagiert der Server nicht auf die Daten, die nicht erstellt wurden. Es wird die Verbindung offen halten, bis die neuesten Daten gesendet werden können. Danach erhält der Client die Daten und sendet dann eine andere Anfrage. Dies hat seine Vorteile: Reduzieren Sie die Latenz bei beiden Verbindung und müssen keine weitere neue Verbindung herstellen, wenn eine Verbindung bereits geöffnet ist. Langfreudes ist jedoch keine ausgefallene Technik, und es ist immer noch möglich, dass Anforderungen Pausen auftreten, sodass eine neue Verbindung erforderlich ist.
Einige AJAX -Anwendungen verwenden die oben genannte Technologie, die häufig auf eine geringe Ressourcenauslastung zurückzuführen ist.
Stellen Sie sich vor, wie großartig es wäre, wenn der Server starten würde, und Daten an Clients senden, die empfangen möchten, ohne einige Verbindungsports im Voraus einrichten zu müssen! Willkommen in der Welt der Push -Technologie!
Schritt 1: Holen Sie sich den WebSocket -Server
Dieses Tutorial konzentriert sich eher auf die Erstellung von Clients als auf die Serverausführung.
Ich benutze XAMPP basierend auf Windows 7, um das laufende PHP lokal zu implementieren. PHPWebSockets ist ein PHP WebSocket -Server. (Nach meiner Erfahrung gibt es einige geringfügige Probleme mit dieser Version. Ich habe einige Änderungen vorgenommen und die Quelldatei für Sie hochgeladen.) Die folgenden verschiedenen Versionen können auch WebSocket implementieren. Wenn man nicht verwendet werden kann, können Sie andere Versionen ausprobieren oder weiterhin das folgende Tutorial lesen.
JWebsocket (Java)
Websocket-Ruby (Ruby)
Socket IO-Node (Node.js)
Starten Sie den Apache -Server
Schritt 2: URLs und Ports ändern
Entsprechend Ihrer vorherigen Installation, ändern Sie den Server, folgendermaßen finden Sie ein Beispiel in Setup.class.php:
}
Durchsuchen Sie die Datei und nehmen Sie gegebenenfalls Änderungen vor.
Schritt 3: Erstellen Sie einen Kunden
Hier ist meine client.php -Datei:
> <>
>
>
>
> ZB versuchen Sie "Hallo", "Name", "Alter", "heute">
> Trennen Sie die Verbindung >>
</html>
Wir haben die grundlegende Vorlage erstellt: einen Chat -Protokal -Container, ein Eingangs -Eingangsfeld und eine getrennte Schaltfläche.
Schritt 4: Fügen Sie einige CSS hinzu
Es gibt keinen schicken Code, nur mit dem Stil des Tags zu tun.
Körper
grau
}
Schritt 5: Websocket -Event
Lassen Sie uns zunächst versuchen, das Konzept von Websocket -Ereignissen zu verstehen:
Websocket -Ereignisse:
Wir werden drei Websocket -Veranstaltungen verwenden:
ONOPEN: Wenn die Schnittstelle geöffnet wird
OnMessage: Wenn eine Nachricht empfangen wird
Onclose: Wenn die Schnittstelle geschlossen ist
Wie erreichen wir das?
Erstellen Sie zuerst ein WebSocket -Objekt
Erkennen Sie dann das Ereignis wie folgt
Buchse.
}
Tun Sie dies, wenn wir die Nachricht erhalten:
socket.msgmsg); //Eindrucksvoll!
}
Wir versuchen jedoch immer noch, die Verwendung von Warnungen zu vermeiden, und jetzt können wir das integrieren, was wir gelernt haben, in die Client -Seite.
Schritt 6: JavaScript
Zuerst setzen wir den Code in das Dokument ein. Ready -Funktion von JQuery und dann müssen wir auch überprüfen, ob der Browser des Benutzers WebSocket unterstützt. Wenn es nicht unterstützt wird, fügen wir einen Link zum Chrome Browser -Seite hinzu.
$
Fenster
$.
$.
Wie Sie sehen können, werden wir die Funktion Connect () ausführen, wenn der Browser des Benutzers WebSocket unterstützt. Hier ist die Kernfunktion. Wir werden Veranstaltungen offener, schließen und empfangen.
Wir werden die URL auf unserem Server definieren.
Sie können herausfinden, warum es in der URL kein HTTP gibt. Ja, dies ist eine Websocket -URL, die ein anderes Protokoll verwendet. Hier ist ein URL -Breakdown -Diagramm: