Share
Una delle nuove funzionalità più interessanti di HTML5 è WebSockets, che ci consente di parlare al server senza utilizzare le richieste AJAX. In questo tutorial, esamineremo il processo di esecuzione di un server WebSocket in PHP e quindi costruiamo un client per inviare e ricevere messaggi su di esso tramite il protocollo WebSocket.
WebSockets è una tecnica per la comunicazione a due vie su un socket (TCP), un tipo di tecnologia PUSH. Al momento, è ancora standardizzato dal W3C; tuttavia, le ultime versioni di Chrome e Safari supportano WebSockets.
Websockets può sostituire il polling lungo. Questo e 'un concetto interessante; il client invia una richiesta al server - ora, piuttosto che il server che risponde con i dati che potrebbe non avere, mantiene essenzialmente la connessione aperta fino a quando i dati nuovi e aggiornati sono pronti per essere inviati - il client riceve successivamente questo e invia un'altra richiesta. Ciò ha i suoi vantaggi: la latenza ridotta è una di queste, poiché una connessione che è già stata aperta non richiede la creazione di una nuova connessione. Tuttavia, il sondaggio a lungo termine non è davvero una tecnologia sofisticata: è anche possibile una richiesta di time-out, e quindi sarà necessaria una nuova connessione in ogni caso.
Molte applicazioni Ajax fanno uso di quanto sopra - questo può essere spesso attribuito al cattivo utilizzo delle risorse.
Non sarebbe bello se il server potesse svegliarsi una mattina e inviare i suoi dati ai clienti che sono disposti ad ascoltare senza una sorta di connessione prestabilita? Benvenuti nel mondo della tecnologia PUSH!
Questo tutorial si concentrerà maggiormente sulla costruzione del client piuttosto che sull'implementazione del server.
Sto usando XAMPP su Windows 7 per eseguire localmente il server PHP. Prendi una copia di phpwebsockets che è un server WebSocket in PHP. (Nota: ho riscontrato alcuni problemi con questa versione, ho apportato alcune modifiche ad esso e lo includerò nei file sorgente) Ci sono varie implementazioni WebSocket; se uno non funziona, puoi provarne un altro o continuare semplicemente con il tutorial.
Cambia il server in base alla tua configurazione, ad esempio in setup.class.php:
funzione pubblica __construct ($ host = 'localhost', $ port = 8000, $ max = 100) $ this-> createSocket ($ host, $ port);
Sfoglia i file e apporta le modifiche laddove appropriato.
Consente di ottenere un modello di base; questo è il mio file client.php:
Client WebSockets Client WebSockets
per esempio. prova "ciao", "nome", "età", "oggi"
Quindi in questo codice stiamo creando un modello semplice: abbiamo una casella per il registro della chat, una casella di input e un pulsante di disconnessione.
Niente di stravagante, basta spazio per alcuni elementi.
body font-family: Arial, Helvetica, sans-serif; #container border: 5px grigio fisso; larghezza: 800px; margine: 0 auto; padding: 10px; #chatLog padding: 5px; bordo: 1px solido nero; #chatLog p margin: 0; .event color: # 999; .warning font-weight: bold; colore: #ccc;
Per prima cosa, proviamo a capire l'idea degli eventi WebSocket.
Useremo tre eventi:
Ma come possiamo implementarlo?
Prima crea un oggetto WebSocket
Accentsconagua
var socket = new WebSocket ("ws: // localhost: 8000 / socket / server / startDaemon.php"); E il controllo degli eventi è semplice come:
socket.onopen = function () alert ("Socket è stato aperto!"); Ma cosa succede quando riceviamo un messaggio?
socket.onmessage = function (msg) alert (msg); //Eccezionale!
Tuttavia, evitiamo di utilizzare le caselle di avviso e in effetti integriamo ciò che abbiamo appreso nella pagina del client.
Ok, allora iniziamo. Per prima cosa inseriamo il nostro codice nella funzione Document Ready di jQuery, quindi controlliamo se l'utente ha un browser abilitato a WebSockets. Se non lo fanno, aggiungiamo un link a Chrome nel codice HTML.
$ (document) .ready (function () if (! ("WebSocket" nella finestra)) $ ('# chatLog, input, button, #examples'). fadeOut ("fast"); $ ('Oh no, hai bisogno di un browser che supporti WebSockets. Che ne dici di Google Chrome?
') .AppendTo (' # container '); else // L'utente ha WebSockets connect (); function connect () // il codice della funzione connect è inferiore a); Come puoi vedere, se l'utente ha WebSocket, chiamiamo una funzione connect (). Questo è il cuore della funzionalità: inizieremo con gli eventi di apertura, chiusura e ricezione.
Definiremo l'URL del nostro server
var socket; var host = "ws: // localhost: 8000 / socket / server / startDaemon.php";
Aspetta, dov'è il http in quell'URL? Oh, giusto, è un URL WebSocket, quindi sta usando un protocollo diverso. Ecco una ripartizione dei pezzi del nostro URL:
Continuiamo con la nostra funzione connect (). Inseriremo il nostro codice all'interno di un blocco try / catch; quindi se qualcosa va storto, possiamo far sapere all'utente. Creiamo un nuovo WebSocket e passiamo il messaggio a una funzione di messaggio che spiegherò più avanti. Creiamo le nostre funzioni onopen, onmessage e onclose. Si noti che mostriamo anche all'utente lo stato del socket; questo non è necessario, ma lo includo qui in quanto può essere utile per il debug.
function connect () try var socket; var host = "ws: // localhost: 8000 / socket / server / startDaemon.php"; var socket = new WebSocket (host); Messaggio('Stato socket: '+ socket.readyState); socket.onopen = function () message ('
Stato socket: '+ socket.readyState +' (aperto) '); socket.onmessage = function (msg) message ('
Ricevuto: '+ msg.data); socket.onclose = function () message ('
Stato socket: '+ socket.readyState +' (Closed) '); catch (exception) message ('
Errore '+ eccezione);
La funzione message () è abbastanza semplice, contiene del testo che vogliamo mostrare all'utente e lo aggiunge al chatLog. Creiamo la classe appropriata per i tag di paragrafo nelle funzioni degli eventi di socket, motivo per cui esiste una sola tag di paragrafo di chiusura nella funzione di messaggio.
messaggio funzione (msg) $ ('# chatLog'). append (msg + ''); Se hai seguito fino a questo punto, ben fatto! Siamo riusciti a creare un modello HTML / CSS di base, creare e stabilire una connessione WebSocket e mantenere l'utente aggiornato con l'avanzamento della connessione.
Ora invece di avere un pulsante di invio, possiamo rilevare quando l'utente preme il tasto Invio sulla tastiera ed eseguire la funzione di invio. Il "13" che vedi qui sotto è il tasto ASCII per il pulsante di invio.
$ ('# text'). keypress (function (event) if (event.keyCode == '13') send ();); Ed ecco la funzione send ():
function send () var text = $ ('# text'). val (); if (text == "") message ('Per favore inserisci un messaggio '); ritorno ; prova socket.send (testo); Messaggio('
Inviato: '+ testo) catch (eccezione) messaggio ('
Errore: '+ eccezione); $ ('# text'). val ("");
Ricorda ciò che vedi sopra potrebbe essere un grosso pezzo di codice, ma in realtà il codice di cui abbiamo veramente bisogno è:
socket.send (); // Grazie JavaScript
Il codice aggiuntivo sta facendo una serie di cose: rilevando se l'utente non ha inserito nulla, ma ha ancora premuto Invio, cancellando la casella di immissione e chiamando le funzioni del messaggio.
Chiudere il socket è abbastanza semplice: collegare un click handler al nostro pulsante di disconnessione e il gioco è fatto!
$ ('# disconnect'). click (function () socket.close ();); $ (document) .ready (function () if (! ("WebSocket" nella finestra)) $ ('# chatLog, input, button, #examples'). fadeOut ("fast"); $ ('Oh no, hai bisogno di un browser che supporti WebSockets. Che ne dici di Google Chrome?
') .AppendTo (' # container '); else // L'utente ha WebSockets connect (); function connect () var socket; var host = "ws: // localhost: 8000 / socket / server / startDaemon.php"; prova var socket = new WebSocket (host); Messaggio('Stato socket: '+ socket.readyState); socket.onopen = function () message ('
Stato socket: '+ socket.readyState +' (aperto) '); socket.onmessage = function (msg) message ('
Ricevuto: '+ msg.data); socket.onclose = function () message ('
Stato socket: '+ socket.readyState +' (Closed) '); catch (exception) message ('
Errore '+ eccezione); function send () var text = $ ('# text'). val (); if (text == "") message ('
Per favore inserisci un messaggio '); ritorno ; prova socket.send (testo); Messaggio('
Inviato: '+ testo) catch (eccezione) messaggio ('
'); $ ('# text'). val (""); messaggio funzione (msg) $ ('# chatLog'). append (msg + '
'); $ ('# text'). keypress (function (event) if (event.keyCode == '13') send ();); $ ('# disconnect'). click (function () socket.close ();); // Fine connessione // Fine altro); Avremo bisogno dell'accesso alla riga di comando. Fortunatamente, XAMPP ha una comoda opzione di shell. Fai clic su "Shell" sul pannello di controllo XAMPP e digita:
php -q percorso \ a \ server.php
Ora hai avviato un server WebSocket!
Quando viene caricata la pagina, si tenterà di stabilire una connessione WebSocket (provare a modificare il codice in modo che l'utente abbia l'opzione di connessione / disconnessione). Quindi, l'utente può inserire messaggi e ricevere messaggi dal server.
Grazie per aver letto; Spero che questo tutorial ti sia piaciuto! Ricorda, per quanto entusiasmanti possano essere i WebSocket, le cose potrebbero cambiare. È possibile fare riferimento qui per rimanere aggiornati sull'API WebSocket W3C.
Se vuoi fare di più con HMTL5, dai un'occhiata alla vasta selezione di elementi di codice HTML5 su Envato Market. Ci sono lettori audio, gallerie di video reattivi, mappe interattive e molto altro.
Elementi di codice HTML5 su Envato Market
