Share
Una dintre cele mai noi caracteristici noi ale HTML5 este WebSockets, care ne permit să vorbim cu serverul fără a folosi AJAX. În acest tutorial, vom examina procesul de rulare a unui server WebSocket în PHP, apoi construirea unui client pentru a trimite și a primi mesaje către el prin protocolul WebSocket.
WebSockets este o tehnică pentru comunicarea bidirecțională printr-o priză (TCP), un tip de tehnologie PUSH. În prezent, este încă standardizată de W3C; cu toate acestea, cele mai recente versiuni ale Chrome și Safari au suport pentru WebSockets.
Websockets-ul poate înlocui sondajul de lungă durată. Acesta este un concept interesant; clientul trimite o cerere către server - acum, mai degrabă decât serverul care răspunde cu date pe care nu le are, acesta menține în mod esențial conexiunea deschisă până când datele proaspete și actualizate sunt pregătite pentru a fi trimise - clientul următor primește , și trimite o altă solicitare. Acest lucru are avantaje: diminuarea latenței fiind una dintre ele, deoarece o conexiune deja deschisă nu necesită o nouă conexiune. Cu toate acestea, sondajele de lungă durată nu sunt într-adevăr o bucată de tehnologie fantezie: este de asemenea posibilă o cerere de eliminare a timpului și, prin urmare, o nouă conexiune va fi necesară oricum.
Multe aplicații Ajax utilizează cele de mai sus - acest lucru poate fi adesea atribuit utilizării necorespunzătoare a resurselor.
Nu ar fi minunat ca serverul să se trezească într-o dimineață și să trimită datele sale clienților care sunt dispuși să asculte fără un fel de conexiune prestabilită? Bine ați venit în lumea tehnologiei PUSH!
Acest tutorial se va concentra mai degrabă pe construirea clientului decât pe implementarea serverului.
Folosesc XAMPP pe Windows 7 pentru a rula serverul PHP local. Luați o copie a phpwebsockets care este un server WebSocket în PHP. (Notă: Am avut unele probleme cu această versiune, am făcut unele modificări și l-am inclus în fișierele sursă) Există diferite implementări WebSocket; dacă nu funcționează, puteți încerca altul sau pur și simplu continuați cu tutorialul.
Schimbați serverul în funcție de configurația dvs., de exemplu în setup.class.php:
funcția publică __construct ($ host = 'localhost', $ port = 8000, $ max = 100) $ this-> createSocket ($ gazdă, $ port);
Navigați prin fișiere și efectuați modificări acolo unde este cazul.
Permite obținerea unui șablon de bază; acesta este fișierul meu client.php:
WebSockets Client WebSockets Client
de exemplu. încercați "hi", "nume", "vârstă", "astăzi"
Prin urmare, în acest cod creăm un șablon simplu: avem o casetă pentru jurnalul de chat, o casetă de introducere și un buton de deconectare.
Nimic fantezist, doar spațiu unele elemente afară.
corp font-family: Arial, Helvetica, sans-serif; #container border: 5px solid gray; lățime: 800px; marja: 0 auto; padding: 10px; #chatLog padding: 5px; frontieră: 1px solid negru; #chatLog p (margine: 0; . culoare culoare: # 999; . avertizare font-weight: bold; Culoare: #CCC;
În primul rând, să încercăm să înțelegem ideea evenimentelor WebSocket.
Vom folosi trei evenimente:
Dar cum putem implementa acest lucru?
Mai întâi creați un obiect WebSocket
Accentsconagua
var socket = nou WebSocket ("ws: // localhost: 8000 / socket / server / startDaemon.php"); Și verificarea evenimentelor este la fel de simplă:
socket.onopen = function () alert ("Socket a fost deschis!"); Dar atunci când primim un mesaj?
socket.onmessage = funcție (msg) alertă (msg); //Minunat!
Cu toate acestea, hai să evităm utilizarea cutiilor de alertă și, de fapt, să integrăm ceea ce am învățat în pagina clientului.
Ok, să începem. Mai intai ne punem codul in functia gata de document a lui jQuery, apoi verificam daca utilizatorul are un browser compatibil cu WebSockets. Dacă nu, adăugăm un link către Chrome în HTML.
$ (()) (functie () if (! ("WebSocket" in fereastra)) $ ('Nu, aveți nevoie de un browser care să accepte WebSockets. Ce zici de Google Chrome?
') .AppendTo (' # container "); altceva // Utilizatorul are WebSockets connect (); funcția connect () // codul funcției de conectare este mai jos); După cum puteți vedea, dacă utilizatorul are WebSockets, atunci apelăm o funcție connect (). Acesta este nucleul funcționalității: vom începe cu evenimentele deschise, închise și recepționate.
Vom defini adresa URL a serverului nostru
var socket; var gazdă = "ws: // localhost: 8000 / socket / server / startDaemon.php";
Stai, unde este http în acea adresă URL? Corect, este un URL WebSocket, deci foloseste un protocol diferit. Iată o detaliere a fragmentelor adresei noastre URL:
Să continuăm cu funcția connect (). Vom pune codul nostru într-un bloc de încercare / captură; astfel încât, dacă ceva nu merge bine, putem permite utilizatorului să știe. Creați un WebSocket nou și trimiteți mesajul la o funcție de mesaj pe care o voi explica mai târziu. Noi cream funcțiile noastre onopess, onmessage și onclose. Rețineți că, de asemenea, indicăm utilizatorului starea socketului; acest lucru nu este necesar, dar îl includ aici, deoarece poate fi util pentru depanare.
funcția connect () try var socket; var gazdă = "ws: // localhost: 8000 / socket / server / startDaemon.php"; var socket = WebSocket nou (gazdă); mesaj('Starea soclului: '+ socket.readyState); socket.onopen = funcția () message ('
Starea soclului: '+ socket.readyState +' (deschis) '); socket.onmessage = funcție (msg) message ('
Primit: '+ msg.data); socket.onclose = funcția () message ('
Starea soclului: '+ socket.readyState +' (închis) '); captură (excepție) message ('
Eroare "+ excepție);
Funcția mesaj () este destul de simplă, este nevoie de un anumit text pe care dorim să îl afișăm utilizatorului și îl adăugăm la chatLog. Creăm clasa corespunzătoare pentru etichetele de paragraf în funcțiile evenimentului socket, motiv pentru care există o singură etichetă de paragraf de închidere în funcția de mesaj.
(msg) $ ('# chatLog') adăugați (msg + '„); Dacă ați urmărit până acum acest lucru, bine făcut! Am reușit să creăm un șablon HTML / CSS de bază, să creăm și să stabilim o conexiune WebSocket și să ținem utilizatorul actualizat pe măsură ce sa realizat progresul în legătură.
Acum, mai degrabă decât având un buton de trimitere, putem detecta când utilizatorul apasă revenirea pe tastatură și execută funcția de trimitere. "13" pe care o vedeți mai jos este cheia ASCII pentru butonul enter.
$ ('# text'), apăsare de taste (funcție (eveniment) if (event.keyCode == '13') send ();); Și iată funcția send ():
funcția trimite () var text = $ ('# text') val (); dacă (text == "") message ('Introduceți un mesaj "); întoarcere ; încercați socket.send (text); mesaj('
Trimise: '+ text) captură (excepție) message ('
Eroare: "+ excepție); $ ('# text') val ("");
Amintiți-vă ce vedeți mai sus poate fi un fragment ciudat de cod, dar în realitate, codul de care avem nevoie este:
socket.send (); // Multumesc JavaScript
Codul suplimentar face o serie de lucruri: detectarea dacă utilizatorul nu a introdus nimic, dar a lovit în continuare returnarea, ștergerea casetei de intrare și a apelarea funcțiilor mesajului.
Închiderea soclului este destul de simplă: atașați un handler pentru clic pe butonul de deconectare și am terminat!
$ ('# deconectați'). faceți clic pe (funcția () socket.close ();); $ (()) (functie () if (! ("WebSocket" in fereastra)) $ ('Nu, aveți nevoie de un browser care să accepte WebSockets. Ce zici de Google Chrome?
') .AppendTo (' # container "); altceva // Utilizatorul are WebSockets connect (); funcția connect () var socket; var gazdă = "ws: // localhost: 8000 / socket / server / startDaemon.php"; încercați var socket = nou WebSocket (gazdă); mesaj('Starea soclului: '+ socket.readyState); socket.onopen = funcția () message ('
Starea soclului: '+ socket.readyState +' (deschis) '); socket.onmessage = funcție (msg) message ('
Primit: '+ msg.data); socket.onclose = funcția () message ('
Starea soclului: '+ socket.readyState +' (închis) '); captură (excepție) message ('
Eroare "+ excepție); funcția trimite () var text = $ ('# text') val (); dacă (text == "") message ('
Introduceți un mesaj "); întoarcere ; încercați socket.send (text); mesaj('
Trimise: '+ text) captură (excepție) message ('
„); $ ('# text') val (""); mesaj functie (msg) $ ('# chatLog') apend (msg + '
„); $ ('# text') Apăsați tasta (funcție (eveniment) if (event.keyCode == '13') send ();); $ ('# deconectați'). faceți clic pe (funcția () socket.close ();); // Încheiați conectarea / Închideți altceva); Vom avea nevoie de acces la linia de comandă. Din fericire, XAMPP are o opțiune de coajă la îndemână. Faceți clic pe "Shell" pe panoul de control XAMPP și tastați:
calea php -q \ a \ server.php
Ați început acum un server WebSocket!
Când se încarcă pagina, se va încerca să se stabilească o conexiune WebSocket (încercați să editați codul astfel încât utilizatorul să aibă opțiunea de conectare / deconectare). Apoi, utilizatorul poate introduce mesaje și primi mesaje de la server.
Vă mulțumim pentru lectură; Sper că vă place acest tutorial! Amintiți-vă, la fel de interesant ca WebSockets, lucrurile s-ar putea schimba. Puteți consulta aici pentru a fi la curent cu API-ul WebSocket W3C.
Dacă doriți să faceți mai mult cu HMTL5, aruncați o privire la o gamă largă de elemente de cod HTML5 de pe Envato Market. Există playere audio, galerii video receptive, hărți interactive și multe altele.
Articole HTML5 pe Envato Market
