Share
Een van de coolste nieuwe functies van HTML5 is WebSockets, waarmee we met de server kunnen praten zonder AJAX-verzoeken te gebruiken. In deze zelfstudie bespreken we het proces van het uitvoeren van een WebSocket-server in PHP en bouwen we vervolgens een client om berichten via het WebSocket-protocol te verzenden en ontvangen..
WebSockets is een techniek voor tweerichtingscommunicatie via één (TCP) socket, een type PUSH-technologie. Op dit moment wordt het nog steeds gestandaardiseerd door de W3C; de nieuwste versies van Chrome en Safari hebben echter ondersteuning voor WebSockets.
Websockets kunnen long polling vervangen. Dit is een interessant concept; de client verzendt een verzoek naar de server - nu, in plaats van dat de server reageert met gegevens die het misschien niet heeft, houdt het in feite de verbinding open totdat de nieuwe, actuele gegevens gereed zijn om te worden verzonden - de client ontvangt dit vervolgens en stuurt een ander verzoek. Dit heeft zijn voordelen: verminderde latentie is daar een van, omdat een reeds geopende verbinding geen nieuwe verbinding vereist. Long-polling is echter niet echt een stukje fancy technologie: het is ook mogelijk om een time-out aan te vragen, en dus is er toch een nieuwe verbinding nodig.
Veel Ajax-applicaties maken gebruik van het bovenstaande - dit kan vaak worden toegeschreven aan een slecht gebruik van hulpbronnen.
Zou het niet geweldig zijn als de server op een ochtend zou kunnen ontwaken en zijn gegevens zou kunnen verzenden naar klanten die bereid zijn te luisteren zonder een vooraf vastgestelde verbinding? Welkom in de wereld van PUSH-technologie!
Deze zelfstudie zal meer gericht zijn op het bouwen van de client in plaats van de implementatie van de server.
Ik gebruik XAMPP op Windows 7 om de PHP-server lokaal uit te voeren. Pak een kopie van phpwebsockets, een WebSocket-server in PHP. (Opmerking: ik ondervond enkele problemen met deze versie, ik heb er enkele wijzigingen in aangebracht en zal deze opnemen in de bronbestanden) Er zijn verschillende WebSocket-implementaties; als een niet werkt, kun je een andere proberen of gewoon doorgaan met de tutorial.
Verander de server volgens uw opstelling, bijvoorbeeld in setup.class.php:
openbare functie __construct ($ host = 'localhost', $ port = 8000, $ max = 100) $ this-> createSocket ($ host, $ port);
Blader door de bestanden en breng waar nodig wijzigingen aan.
Laten we een basissjabloon ophalen; dit is mijn client.php bestand:
WebSockets-client WebSockets-client
bijv. probeer 'hoi', 'naam', 'leeftijd', 'vandaag'
In deze code maken we dus een eenvoudige sjabloon: we hebben een vak voor het chatlogboek, een invoervak en een ontkoppelknop.
Niets bijzonders, gewoon ruimte wat elementen eruit.
lichaam font-family: Arial, Helvetica, sans-serif; #container border: 5px effen grijs; Breedte: 800 pixels; marge: 0 auto; padding: 10px; #chatLog opvulling: 5px; rand: 1px effen zwart; #chatLog p margin: 0; .event color: # 999; .waarschuwing font-weight: bold; kleur: #CCC;
Laten we eerst het idee van WebSocket-gebeurtenissen proberen te begrijpen.
We zullen drie evenementen gebruiken:
Maar hoe kunnen we dit implementeren??
Maak eerst een WebSocket-object
Accentsconagua
var socket = new WebSocket ("ws: // localhost: 8000 / socket / server / startDaemon.php"); En het controleren van gebeurtenissen is zo simpel als:
socket.onopen = function () alert ("socket is geopend!"); Maar hoe zit het wanneer we een bericht ontvangen?
socket.onmessage = function (msg) alert (msg); //Geweldig!
Laten we echter geen waarschuwingsvakken gebruiken en daadwerkelijk integreren wat we hebben geleerd op de clientpagina.
Ok, dus laten we beginnen. Eerst plaatsen we onze code in de document-ready-functie van jQuery en vervolgens controleren we of de gebruiker een WebSockets-browser heeft. Als dat niet het geval is, voegen we een koppeling naar Chrome toe aan de HTML.
$ (document) .ready (function () if (! ("WebSocket" in venster)) $ ('# chatLog, input, button, #examples'). fadeOut ("fast"); $ ('Oh nee, je hebt een browser nodig die WebSockets ondersteunt. Wat dacht je van Google Chrome?
) .AppendTo ( "# container"); else // De gebruiker heeft WebSockets connect (); function connect () // de verbindingsfunctiecode is onder); Zoals je kunt zien, als de gebruiker WebSockets heeft, noemen we een connect () -functie. Dit is de kern van de functionaliteit: we beginnen met het openen, sluiten en ontvangen van evenementen.
We zullen de URL van onze server definiëren
var socket; var host = "ws: // localhost: 8000 / socket / server / startDaemon.php";
Wacht, waar is de http in die URL? Oke, het is een WebSocket-URL, dus het gebruikt een ander protocol. Hier is een overzicht van de delen van onze URL:
Laten we doorgaan met onze connect () -functie. We zullen onze code in een try / catch-blok plaatsen; dus als er iets misgaat, kunnen we de gebruiker dit laten weten. We maken een nieuwe WebSocket en geven het bericht door aan een berichtfunctie die ik later zal uitleggen. We maken onze onopen, onmessage en onclose-functies. Merk op dat we de gebruiker ook de socketstatus laten zien; dit is niet nodig, maar ik neem het hier op omdat het nuttig kan zijn voor foutopsporing.
function connect () try var socket; var host = "ws: // localhost: 8000 / socket / server / startDaemon.php"; var socket = nieuwe WebSocket (host); bericht('Socket Status: '+ socket.readyState); socket.onopen = function () message ('
Socket Status: '+ socket.readyState +' (open) '); socket.onmessage = function (msg) bericht ('
Ontvangen: '+ msg.data); socket.onclose = function () message ('
Socket Status: '+ socket.readyState +' (Closed) '); catch (uitzondering) message ('
Error '+ uitzondering);
De message () -functie is vrij eenvoudig, er is wat tekst in nodig die we de gebruiker willen tonen en deze aan het chatLog toevoegen. We maken de juiste klasse voor alineatags in de socketgebeurtenisfuncties. Daarom is er maar één afsluitende alineatags in de berichtfunctie.
functiebericht (msg) $ ('# chatLog'). toevoegen (msg + ''); Als je dit tot nu toe hebt gevolgd, goed gedaan! We zijn erin geslaagd om een eenvoudige HTML / CSS-sjabloon te maken, een WebSocket-verbinding tot stand te brengen en vast te stellen en de gebruiker op de hoogte te houden als er vooruitgang is geboekt met de verbinding.
In plaats van een verzendknop, kunnen we detecteren wanneer de gebruiker op zijn toetsenbord drukt en de verzendfunctie uitvoeren. De '13' die u hieronder ziet, is de ASCII-toets voor de enter-knop.
$ ('# tekst'). toetsaanslag (functie (gebeurtenis) if (event.keyCode == '13') send ();); En hier is de send () functie:
function send () var text = $ ('# text'). val (); if (text == "") message ('Voer een bericht in '); terugkeren; probeer socket.send (tekst); bericht('
Verzonden: '+ tekst) catch (uitzondering) message ('
Fout: '+ uitzondering); $ ('# text'). val ("");
Onthoud dat wat je hierboven ziet misschien een flink stuk code is, maar in werkelijkheid is de code die we echt nodig hebben:
socket.send (); // Bedankt JavaScript
De extra code doet een aantal dingen: detecteren of de gebruiker niets heeft ingevoerd, maar nog steeds op Return drukken, het invoervak leegmaken en de berichtfuncties aanroepen.
Het sluiten van de socket is redelijk eenvoudig: voeg een klikhandler toe aan onze disconnect-knop en we zijn klaar!
$ ('# disconnect'). klik (function () socket.close ();); $ (document) .ready (function () if (! ("WebSocket" in venster)) $ ('# chatLog, input, button, #examples'). fadeOut ("fast"); $ ('Oh nee, je hebt een browser nodig die WebSockets ondersteunt. Wat dacht je van Google Chrome?
) .AppendTo ( "# container"); else // De gebruiker heeft WebSockets connect (); function connect () var socket; var host = "ws: // localhost: 8000 / socket / server / startDaemon.php"; probeer var socket = new WebSocket (host); bericht('Socket Status: '+ socket.readyState); socket.onopen = function () message ('
Socket Status: '+ socket.readyState +' (open) '); socket.onmessage = function (msg) bericht ('
Ontvangen: '+ msg.data); socket.onclose = function () message ('
Socket Status: '+ socket.readyState +' (Closed) '); catch (uitzondering) message ('
Error '+ uitzondering); function send () var text = $ ('# text'). val (); if (text == "") message ('
Voer een bericht in '); terugkeren; probeer socket.send (tekst); bericht('
Verzonden: '+ tekst) catch (uitzondering) message ('
'); $ ('# text'). val (""); functiemelding (msg) $ ('# chatLog'). toevoegen (msg + '
'); $ ('# tekst'). toetsaanslag (functie (gebeurtenis) if (event.keyCode == '13') send ();); $ ('# disconnect'). klik (function () socket.close ();); // End connect // End else); We hebben toegang tot de commandoregel nodig. Gelukkig heeft XAMPP een handige shell-optie. Klik op 'Shell' in het XAMPP-configuratiescherm en typ in:
php -q pad \ naar \ server.php
U bent nu een WebSocket-server gestart!
Wanneer de pagina wordt geladen, wordt geprobeerd een WebSocket-verbinding tot stand te brengen (probeer de code te bewerken zodat de gebruiker de optie voor verbinden / loskoppelen heeft). Vervolgens kan de gebruiker berichten invoeren en berichten van de server ontvangen.
Bedankt voor het lezen; Ik hoop dat je deze tutorial leuk vond! Onthoud dat, zo spannend als WebSockets kan zijn, er dingen kunnen veranderen. U kunt hier verwijzen om op de hoogte te blijven van de W3C WebSocket API.
Als u meer wilt doen met HMTL5, bekijk dan de uitgebreide selectie van HTML5-code-items op Envato Market. Er zijn audiospelers, responsieve videogalerijen, interactieve kaarten en nog veel meer.
HTML5-codepunten op Envato Market
