Share
En av de kuleste nye funksjonene til HTML5 er WebSockets, som lar oss snakke med serveren uten å bruke AJAX-forespørsler. I denne veiledningen vurderer vi prosessen med å kjøre en WebSocket-server i PHP, og deretter bygge en klient for å sende og motta meldinger til den over WebSocket-protokollen.
WebSockets er en teknikk for toveiskommunikasjon over en (TCP) kontakt, en type PUSH-teknologi. I øyeblikket er det fortsatt standardisert av W3C; De nyeste versjonene av Chrome og Safari har imidlertid støtte for WebSockets.
Websockets kan erstatte lang polling. Dette er et interessant konsept; klienten sender en forespørsel til serveren - nå, i stedet for at serveren svarer med data det ikke kan ha, holder det i hovedsak tilkoblingen åpen til de ferske, oppdaterte dataene er klare til å bli sendt - klienten neste mottar dette , og sender en annen forespørsel. Dette har sine fordeler: redusert ventetid er en av dem, da en forbindelse som allerede er åpnet ikke krever at en ny forbindelse etableres. Men lange polling er egentlig ikke en del av fabelaktig teknologi: det er også mulig for en forespørsel om tidsavbrudd, og derfor vil det være nødvendig med en ny tilkobling uansett.
Mange Ajax-applikasjoner gjør bruk av det ovennevnte - dette kan ofte tilskrives dårlig ressursutnyttelse.
Ville det ikke vært bra hvis serveren kunne våkne en morgen og sende sine data til klienter som er villige til å lytte uten noen form for forhåndsbestemt forbindelse? Velkommen til verden av PUSH-teknologi!
Denne opplæringen vil fokusere mer på klientbygningen i stedet for serverimplementering.
Jeg bruker XAMPP på Windows 7 for å kjøre PHP-serveren lokalt. Ta en kopi av phpwebsockets som er en WebSocket-server i PHP. (Merk: Jeg har opplevd noen problemer med denne versjonen, jeg har gjort noen endringer i den og vil inkludere den i kildefilene) Det finnes ulike WebSocket-implementeringer; Hvis en ikke virker, kan du prøve en annen eller bare fortsette med opplæringen.
Endre serveren i henhold til oppsettet ditt, for eksempel i setup.class.php:
offentlig funksjon __construct ($ host = 'localhost', $ port = 8000, $ max = 100) $ this-> createSocket ($ host, $ port);
Bla gjennom filene og gjør endringer der det er hensiktsmessig.
Lar deg få en grunnleggende mal opp; dette er min client.php-fil:
WebSockets Client WebSockets Client
f.eks prøv 'hei', 'navn', 'alder', 'i dag'
Så i denne koden oppretter vi en enkel mal: Vi har en boks for chat-loggen, en innmatingsboks og en frakoblingsknapp.
Ingenting fancy, bare plass noen elementer ut.
kropp font-family: Arial, Helvetica, sans-serif; #container border: 5px solid gray; bredde: 800 ganger; margin: 0 auto; padding: 10px; #chatLog polstring: 5px; grense: 1 px solid svart; #chatLog p margin: 0; .event color: # 999; .Varsel font-weight: bold; farge: #CCC;
Først, la oss prøve å forstå ideen om WebSocket-hendelser.
Vi bruker tre hendelser:
Men hvordan kan vi implementere dette?
Først opprett en WebSocket-objekt
Accentsconagua
var socket = ny WebSocket ("ws: // localhost: 8000 / socket / server / startDaemon.php"); Og sjekke etter hendelser er like enkelt som:
socket.onopen = function () alert ("Socket har blitt åpnet!"); Men hva med når vi mottar en melding?
socket.onmessage = funksjon (msg) alert (msg); //Rått!
La oss imidlertid unngå å bruke varselbokser og faktisk integrere det vi har lært på klientsiden.
Ok, så la oss komme i gang. Først setter vi vår kode i jQuerys dokumentklare funksjon, og vi kontrollerer om brukeren har en WebSockets-aktivert nettleser. Hvis de ikke gjør det, legger vi til en kobling til Chrome i HTML-koden.
$ ('# chatLog, input, button, #examples'). fadeOut ("fast"); $ ('Å nei, du trenger en nettleser som støtter WebSockets. Hva med Google Chrome?
') .AppendTo (' # beholder '); else // Brukeren har WebSockets connect (); funksjonstilkobling () // koblingsfunksjonskoden er under); Som du kan se, hvis brukeren har WebSockets, kaller vi en connect () -funksjon. Dette er kjernen i funksjonaliteten: Vi starter med å åpne, lukke og motta hendelser.
Vi definerer nettadressen til serveren vår
var socket; var host = "ws: // localhost: 8000 / socket / server / startDaemon.php";
Vent, hvor er det? http i den nettadressen? Åh, det er en WebSocket-URL, så det bruker en annen protokoll. Her er en oversikt over brikkene av nettadressen vår:
La oss fortsette med vår connect () -funksjon. Vi vil sette vår kode i en prøve / fangst blokk; så hvis noe går galt, kan vi la brukeren få vite det. Vi lager en ny WebSocket, og sender meldingen til en meldingsfunksjon som jeg vil forklare senere. Vi lager våre onopen, onmessage og onclose funksjoner. Legg merke til at vi også viser brukerens stikkontaktstatus; Dette er ikke nødvendig, men jeg inkluderer det her, da det kan være nyttig for feilsøking.
funksjonstilkobling () prøv var socket; var host = "ws: // localhost: 8000 / socket / server / startDaemon.php"; var socket = ny WebSocket (vert); budskap('Sokkelstatus: '+ socket.readyState); socket.onopen = function () message ('
Sokkelstatus: '+ socket.readyState +' (open) '); socket.onmessage = funksjon (msg) message ('
Mottatt: '+ msg.data); socket.onclose = function () message ('
Sokkelstatus: '+ socket.readyState +' (Closed) '); fangst (unntak) message ('
Error '+ unntak);
Meldingen () -funksjonen er ganske enkel, det tar litt tekst inn som vi vil vise brukeren og legger den til chatLog. Vi lager den aktuelle klassen for avsnittetiketter i hendelsesbegivenhetsfunksjonene, og derfor er det bare ett lukkende avsnittetikett i meldingsfunksjonen.
funksjonsmelding (msg) $ ('# chatLog'). append (msg + ''); Hvis du har fulgt opp til dette punktet, bra gjort! Vi har klart å opprette en grunnleggende HTML / CSS-mal, opprette og etablere en WebSocket-tilkobling og holde brukeren oppdatert ettersom det ble gjort fremgang med forbindelsen.
Nå, i stedet for å ha en sende-knapp, kan vi oppdage når brukeren trykker på retur på tastaturet, og kjører sendfunksjonen. '13' du ser nedenfor er ASCII-tasten for enter-knappen.
$ ('# text'). tastetrykk (funksjon (hendelse) hvis (event.keyCode == '13') send ();); Og her er send () -funksjonen:
funksjon send () var text = $ ('# text') .val (); hvis (tekst == "") melding ('Vennligst skriv inn en melding '); komme tilbake ; prøv socket.send (tekst); budskap('
Sendt: '+ tekst) fangst (unntak) melding ('
Feil: '+ unntak); $ ('# text'). val ("");
Husk hva du ser over, kan være en liten bit kode, men i virkeligheten er koden vi virkelig trenger:
socket.send (); // Takk JavaScript
Den ekstra koden gjør en rekke ting: Det oppdages om brukeren ikke skrev inn noe, men likevel slått tilbake, slettet innboksen og ringer meldingsfunksjonene.
Å stenge kontakten er ganske enkel: Fest en klikkbehandler til koblingsknappen vår, og vi er ferdige!
$ ('# koble fra'). klikk (funksjon () socket.close ();); $ ('# chatLog, input, button, #examples'). fadeOut ("fast"); $ ('Å nei, du trenger en nettleser som støtter WebSockets. Hva med Google Chrome?
') .AppendTo (' # beholder '); else // Brukeren har WebSockets connect (); funksjonstilkobling () var socket; var host = "ws: // localhost: 8000 / socket / server / startDaemon.php"; prøv var socket = ny WebSocket (vert); budskap('Sokkelstatus: '+ socket.readyState); socket.onopen = function () message ('
Sokkelstatus: '+ socket.readyState +' (open) '); socket.onmessage = funksjon (msg) message ('
Mottatt: '+ msg.data); socket.onclose = function () message ('
Sokkelstatus: '+ socket.readyState +' (Closed) '); fangst (unntak) message ('
Error '+ unntak); funksjon send () var text = $ ('# text') .val (); hvis (tekst == "") melding ('
Vennligst skriv inn en melding '); komme tilbake ; prøv socket.send (tekst); budskap('
Sendt: '+ tekst) fangst (unntak) melding ('
'); $ ('# text'). val (""); funksjonsmelding (msg) $ ('# chatLog'). append (msg + '
'); $ ('# text'). tastetrykk (funksjon (hendelse) hvis (event.keyCode == '13') send ();); $ ('# koble fra'). klikk (funksjon () socket.close ();); // Sluttforbindelsen // Slutt annet); Vi trenger kommandolinjens tilgang. Heldigvis har XAMPP et praktisk shell alternativ. Klikk på "Shell" på XAMPP-kontrollpanelet, og skriv inn:
php -q path \ to \ server.php
Du har nå startet en WebSocket-server!
Når siden lastes, forsøker en WebSocket-tilkobling å bli etablert (prøv å redigere koden slik at brukeren har tilkoblings- / frakoblingsalternativ). Deretter kan brukeren legge inn meldinger og motta meldinger fra serveren.
Takk for at du leste; Jeg håper du likte denne opplæringen! Husk, så spennende som WebSockets kan være, kan ting endres. Du kan henvise her for å holde deg oppdatert på W3C WebSocket API.
Hvis du vil gjøre mer med HMTL5, kan du se på det brede utvalget av HTML5-kodeposter på Envato Market. Det er lydspillere, lydhør videogallerier, interaktive kart og mye mer.
HTML5-kodeposter på Envato Market
