HTML5 Web Sockets muudab meie tuntud veebitehnoloogiad üksi. Selle postituse eesmärk on selgitada, milliseid tehnikaid on seni kasutatud serveri tõuke simuleerimiseks, defineerida HTML5 veebipesad ja seejärel tuua näide selle kohta, kuidas seda oma HTML5 rakenduses kasutada.
Mis on küsitlus?
Seni on veeb olnud üks suund. Teisisõnu said veebilehed saata päringu ainult veebiserverisse, mitte vastupidi. Kui AJAX 2005. aastal kasutusele tuli, võtsid veebiarendajad kiiresti kasutusele meetodid, et simuleerida serverilt kliendile päringut, mida nimetatakse küsitluseks. Küsitlusi on kahte tüüpi: lühike ja pikk küsitlus.
Lühiküsitlust rakendatakse nii, et iga paari sekundi järel esitatakse veebiserverile päring, et näha, kas andmed on muutunud. Kui on, vastab veebiserver uute andmetega. Vastasel juhul vastab see tühja sõnumiga. Selle tehnika puuduseks on aga nii serveripäringute ülejääk kui ka veebiserveri protsessori kasutamise ülekoormus, et pidevalt kontrollida, kas andmeid on värskendatud.
Pika küsitluse teostamiseks tehakse veebiserverile üks päring ja ühendus hoitakse avatud kuni andmete muutumiseni, mille järel saadab veebiserver vastuse tagasi. Selle tehnika, nagu ka lühiküsitluse, puuduseks on see, et veebiserver peab siiski kontrollima, kas andmed on iga paari sekundi järel muutunud, tekitades protsessori kasutuskulu.
Mis on HTML5 veebipesa?
Siin tulevad appi HTML5 veebipesad. HTML5 on esimene HTML-i spetsifikatsioon, mis toetab kliendipoolseid veebipesasid. Teisisõnu, kui andmed veebiserveris muutuvad, saab veebiserver saata kliendile päringu, välistades vajaduse pollimise järele.
HTML5 veebipesa näide
1. toiming: looge kehtiva URL-iga WebSocket
Looge uus WebSocketi ühendus WebSocketi serveriga aadressil finance.example.com.
var stockTickerWebSocket = new WebSocket(“ws://finance.example.com”);
Pange tähele, et eesliide ws:// ja wss:// tähistavad vastavalt WebSocketi ja turvalist WebSocketi ühendust. WebSocketsi vaikeport on 81 ja turvaliste WebSocketsi vaikeport 815.
2. samm: manustage JavaScripti tagasihelistamisfunktsioonid
Ühenduse elutsükli iga faasi käsitlemiseks ühendage sündmuste kuulajad.
stockTickerWebSocket.onopen = function(evt) {
alert(“Börsipileti ühendus avatud…”);
};
stockTickerWebSocket.onmessage = function(evt) {
alert( “Saadud tickeri värskendus: ” + evt.data);
};
stockTickerWebSocket.onclose = function(evt) {
alert(“Ühendus suletud.”);
};
3. samm: andmete saatmine ja vastuvõtmine
Sõnumi saatmiseks serverisse helistage lihtsalt postMessage meetodile veebisalves koos sisuga, mida soovite serverisse saata.
stockTickerWebSocket.postMessage(“OST: GOOG,100@200.25”);
See saadab serverisse teate OSTA. Kõik serverist tulevad sõnumid edastatakse sammus 2 registreeritud sõnumi tagasihelistamisse.
4. samm: katkestage ühendus, kui olete valmis
Kui olete lõpetanud, kutsuge WebSocketi ühenduse sulgemiseks meetod disconnect().
stockTickerWebSocket.disconnect();
Nagu ülaltoodud näites näidatud, ei esitata kliendi poolelt serverile andmete toomiseks HTTP-päringuid, selle asemel edastati andmed serverist kliendile – kui need kättesaadavaks muutuvad.
Kui luuakse uus WebSocket-ühendus, avab brauser esmalt HTTP-ühenduse serveriga ja peab seejärel serveriga läbirääkimisi ühenduse uuendamiseks spetsiaalseks ja püsivaks WebSocket-ühenduseks. See protsess loob automaatselt tunneli, mis viib serverisse – läbides keskel kõik võrguagendid (puhverserverid, ruuterid ja tulemüürid) (samamoodi nagu HTTPS, mis loob turvalise lõppühenduse), lahendades arvukalt probleeme, mida erinevad Cometi programmeerimistehnikad. kokku puutunud. Kui WebSocket on loodud, on see täisduplekskanal kliendi ja serveri vahel.
Näide esitatud http://www.indicthreads.com