Tutorial zur grundlegenden Verwendung von HTML5 WebSockets

Autor：Eve Cole Aktualisierungszeit：2010-10-07 18:43:37

Eine der coolen neuen Funktionen in HTML5 sind WebSockets, die es uns ermöglichen, ohne AJAX-Anfragen mit dem Server zu kommunizieren. Heute können Sie mit Bin Go WebSocket über die Serverseite der PHP-Umgebung ausführen, einen Client erstellen und serverseitige Informationen über das WebSockets-Protokoll senden und empfangen.

Was sind WebSockets?

WebSockets ist eine Technologie für die bidirektionale Kommunikation über eine (TCP-)Schnittstelle vom Typ PUSH-Technologie. Gleichzeitig basieren WebSockets weiterhin auf dem W3C-Standard. Bisher unterstützen die neuesten Versionen der Browser Chrome und Safari bereits WebSockets.

Was werden WebSockets ersetzen? WebSockets können Long Polling (PHP-Server-Push-Technologie) ersetzen, was ein interessantes Konzept ist. Der Client sendet eine Anfrage an den Server. Der Server antwortet nicht auf Daten, die nicht bereit sind. Danach empfängt der Client die Daten und sendet eine weitere Anfrage. . Dies hat seine Vorteile: Es reduziert die Latenz bei beiden Verbindungen und macht das Erstellen einer neuen Verbindung überflüssig, wenn eine bereits geöffnet ist. Aber Long-Polling ist keine ausgefallene Technologie. Es ist dennoch möglich, dass es zu einer Unterbrechung der Anfrage kommt, sodass eine neue Verbindung hergestellt werden muss.

Einige AJAX-Anwendungen verwenden die oben genannten Techniken – dies wird häufig auf eine geringe Ressourcenauslastung zurückgeführt.

Stellen Sie sich vor, was für eine tolle Sache es wäre, wenn der Server morgens selbst starten würde und Daten an Clients senden würde, die diese empfangen möchten, ohne vorher einige Verbindungsports einrichten zu müssen! Willkommen in der Welt der PUSH-Technologie!

Schritt 1: Holen Sie sich den WebSocket-Server

Dieses Tutorial konzentriert sich mehr auf die Clienterstellung als auf die serverseitige Ausführung und andere Vorgänge.

Ich verwende XAMPP unter Windows 7, um PHP lokal auszuführen. phpwebsockets ist ein PHP-WebSocket-Server. (Meiner Erfahrung nach weist diese Version einige kleinere Probleme auf. Ich habe einige Änderungen daran vorgenommen und die Quelldateien hochgeladen, um sie mit allen zu teilen.) Die verschiedenen Versionen unten können auch WebSocket implementieren. Wenn eine davon nicht funktioniert, können Sie andere Versionen ausprobieren. Oder fahren Sie mit dem Tutorial unten fort.

jWebSocket (Java)

Web-Socket-Ruby (Rubin)

Socket-IO-Knoten (node.js)

Starten Sie den Apache-Server

Schritt 2: URLs und Ports ändern

Ändern Sie den Server basierend auf Ihrer vorherigen Installation. Hier ist ein Beispiel aus setup.class.php:

öffentliche Funktion __construct($host='localhost',$port=8000,$max=100)
{
$this->createSocket($host,$port);
}

Durchsuchen Sie die Datei und nehmen Sie gegebenenfalls Änderungen vor.

Schritt 3: Beginnen Sie mit der Erstellung des Clients

Lassen Sie uns die Basisvorlage erstellen. Dies ist meine client.php-Datei:

WebSockets-Client

Versuchen Sie es beispielsweise mit „Hallo“, „Name“, „Alter“, „Heute“

Wir haben die Grundvorlage erstellt: einen Chat-Protokollcontainer, ein Eingabefeld und eine Schaltfläche zum Trennen.

Schritt 4: Fügen Sie etwas CSS hinzu

Es gibt keinen ausgefallenen Code, Sie müssen nur den Beschriftungsstil verwalten.

Körper {
Schriftfamilie:Arial, Helvetica, serifenlos;
}
#Container{
Grenze:5px einfarbig grau;
Breite:800px;
Rand:0 automatisch;
Polsterung:10px;
}
#chatLog{
Polsterung:5px;
Rand: 1 Pixel einfarbig schwarz;
}
#chatLog p {
Rand:0;
}
.Ereignis{
Farbe:#999;
}
.Warnung{
Schriftstärke:fett;
Farbe: #CCC;
}

Schritt 5: WebSocket

Ereignisse Lassen Sie uns zunächst versuchen, das Konzept von WebSocket-Ereignissen zu verstehen:

WebSocket-Ereignisse:

Wir werden drei WebSocket-Ereignisse 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 zunächst das WebSocket-Objekt

var socket = new WebSocket("ws://localhost:8000/socket/server/startDaemon.php");

Erkennen Sie das Ereignis dann wie folgt

socket.onopen = function(){
alarm("Socket wurde geöffnet!");
}

Gehen Sie wie folgt vor, wenn wir Informationen erhalten:

socket.onmessage = function(msg){
alarm(msg); //Super!
}

Aber wir versuchen immer noch, die Verwendung von Warnungen zu vermeiden, und können jetzt das Gelernte in die Kundenseite integrieren.

Schritt 6: JavaScript

Zuerst fügen wir den Code in die Funktion document.ready von jQuery ein und prüfen dann auch, ob der Browser des Benutzers WebSocket unterstützt. Wenn dies nicht unterstützt wird, fügen wir einen Link zur Chrome-Seite hinzu.

$(document).ready(function() {
if(!("WebSocket" im Fenster)){
$('#chatLog, input, button, #examples').fadeOut("fast");
$('

Oh nein, Sie benötigen einen Browser, der WebSockets unterstützt. Wie wäre es mit Google Chrome?

').appendTo('#container');
}anders{
//Der Benutzer verfügt über WebSockets
verbinden();
Funktion connect(){
//Der Verbindungsfunktionscode ist unten
}
});

Wie Sie sehen können, führen wir die Funktion connect() aus, wenn der Browser des Benutzers WebSocket unterstützt. Hier ist die Kernfunktionalität: Wir beginnen mit der Erstellung von Öffnungs-, Schließ- und Empfangsereignissen.

Wir definieren die URL auf unserem Server.

Var-Sockel;
var host = "ws://localhost:8000/socket/server/startDaemon.php";

Sie stellen möglicherweise fest, dass die URL kein http enthält? Ja, das ist eine WebSocket-URL, die ein anderes Protokoll verwendet.

Fahren wir mit der Funktion connect() fort. Wir fügen den Code in einen Try/Catch-Block ein, damit wir den Benutzer informieren können, wenn es ein Problem mit dem Code gibt. Wir erstellen einen WebSocket und übergeben die Informationen an die Funktion message(), die später erläutert wird. Wir erstellen unsere Funktionen onopen, onmessage und onclose. Es ist zu beachten, dass wir den Portstatus für den Benutzer bereitstellen. Dies ist nicht erforderlich, wir geben ihn jedoch hauptsächlich ein, um das Debuggen zu erleichtern.

VERBINDUNG = 0
OFFEN = 1
GESCHLOSSEN = 2
Funktion connect(){
versuchen{
Var-Sockel;
var host = "ws://localhost:8000/socket/server/startDaemon.php";
var socket = new WebSocket(host);
message('

Socket Status: '+socket.readyState);
socket.onopen = function(){
message('

Socket-Status: '+socket.readyState+' (offen)');
}
socket.onmessage = function(msg){
message('

Received: '+msg.data);
}
socket.onclose = function(){
message('

Socket-Status: '+socket.readyState+' (Geschlossen)');
}
} Catch(Ausnahme){
message('

Fehler'+Ausnahme);
}
}

Die Funktion message() ist sehr einfach, sie füllt den Chat-Log-Container mit dem Text, den wir dem Benutzer anzeigen möchten. Wir erstellen die entsprechende Klasse für das Absatz-Tag (

) in der Socket-Ereignisfunktion und haben nur ein Absatz-Abschluss-Tag in der Nachrichtenfunktion.

Funktion message(msg){
$('#chatLog').append(msg+'

');
}

Aktuelle Ergebnisse

Wenn Sie der obigen Anleitung Schritt für Schritt gefolgt sind, ist das großartig. Wir haben die HTML/CSS- Vorlage erstellt, die Websocket-Verbindung erstellt und eingerichtet und den Fortschritt des Benutzers durch die Erstellung der Verbindung auf dem Laufenden gehalten.

Schritt 7: Daten senden

Jetzt haben wir eine Schaltfläche zum Senden, aber wir müssen auch das Ereignis überwachen, wenn der Benutzer die Tastatur drückt, und die Sendefunktion ausführen. Die „13“ unten ist der ASCII-Code, der der Eingabetaste entspricht.

$('#text').keypress(function(event) {
if (event.keyCode == '13') {
schicken();
}
});

Hier ist die send()-Funktion:

Funktion send(){
var text = $('#text').val();
if(text==""){
message('

Bitte geben Sie eine Nachricht ein');
zurückkehren ;
}
versuchen{
socket.send(text);
message('

Gesendet: '+text)
} Catch(Ausnahme){
message('

Fehler:' + Ausnahme);
}
$('#text').val("");
}

Nachfolgend benötigen wir:

socket.send();

Der zusätzliche Code bewirkt Folgendes: Er erkennt, ob der Benutzer auf die Eingabetaste klickt, nachdem er nichts eingegeben hat, löscht den Inhalt des Eingabefelds und führt die Funktion message() aus.

Schritt 8: Socket schließen

Das Schließen des Sockets ist recht einfach. Fügen Sie einfach einen Click-Event-Listener für die Schaltfläche „Trennen“ hinzu.

$('#disconnect').click(function(){
socket.close();
});

Vollständiger JavaScript-Code

$(document).ready(function() {
if(!("WebSocket" im Fenster)){
$('#chatLog, input, button, #examples').fadeOut("fast");
$('

Oh nein, Sie benötigen einen Browser, der WebSockets unterstützt. Wie wäre es mit Google Chrome?

').appendTo('#container');
}anders{
//Der Benutzer verfügt über WebSockets
verbinden();
Funktion connect(){
Var-Sockel;
var host = "ws://localhost:8000/socket/server/startDaemon.php";
versuchen{
var socket = new WebSocket(host);
message('

Socket Status: '+socket.readyState);
socket.onopen = function(){
message('

Socket-Status: '+socket.readyState+' (offen)');
}
socket.onmessage = function(msg){
message('

Received: '+msg.data);
}
socket.onclose = function(){
message('

Socket-Status: '+socket.readyState+' (Geschlossen)');
}
} Catch(Ausnahme){
message('

Fehler'+Ausnahme);
}
Funktion send(){
var text = $('#text').val();

if(text==""){
message('

Bitte geben Sie eine Nachricht ein');
zurückkehren ;
}
versuchen{
socket.send(text);
message('

Gesendet: '+text)
} Catch(Ausnahme){
message('

');
}
$('#text').val("");
}
Funktion message(msg){
$('#chatLog').append(msg+'

');
}
$('#text').keypress(function(event) {
if (event.keyCode == '13') {
schicken();
}
});
$('#disconnect').click(function(){
socket.close();
});
}//Verbindung beenden
}//End else
});

Schritt 9: Wir müssen einige Befehlszeilen eingeben, um den WebSocket-Server auszuführen, der bequemere Shell-Optionen bietet. Klicken Sie auf die Schaltfläche „Shell“ im XAMPP-Kontrollfeld und geben Sie Folgendes ein:

php -q Pfadzuserver.php

Jetzt läuft ein WebSocket-Server!

Du bist fertig!

Beim Lesen der Seite wird versucht, eine WebSocket-Verbindung herzustellen, und der Benutzer kann dann Informationen eingeben und Informationen vom Server erhalten. Vielen Dank für Ihre Geduld beim Lesen dieses Tutorials. Ich hoffe, dass Sie daraus nützliches Wissen über HTML5 WebSocket gewonnen haben. Über die WebSocket-API können Sie sich über die neuesten Entwicklungen von HTML5 WebSocket informieren.