Share
En av de coolaste nya funktionerna i HTML5 är WebSockets, vilket låter oss prata med servern utan att använda AJAX-förfrågningar. I denna handledning granskar vi processen med att köra en WebSocket-server i PHP och sedan bygga en klient för att skicka och ta emot meddelanden till det via WebSocket-protokollet.
WebSockets är en teknik för dubbelriktad kommunikation över ett (TCP) uttag, en typ av PUSH-teknik. För närvarande är det fortfarande standardiserat av W3C; De senaste versionerna av Chrome och Safari har dock stöd för WebSockets.
Websockets kan ersätta lång polling. Detta är ett intressant begrepp; klienten skickar en förfrågan till servern - nu, i stället för att servern svarar med data som den kanske inte har, håller den i huvudsak anslutningen öppen tills den färska, aktuella data är klar att skickas - kunden får nästa , och skickar en annan begäran. Detta har sina fördelar: minskad latens är en av dem, eftersom en anslutning som redan har öppnats inte kräver att en ny anslutning etableras. Långtestning är dock inte riktigt en snygg teknik: det är också möjligt att begära tidsavbrott, och sålunda krävs en ny anslutning ändå.
Många Ajax-applikationer använder sig av ovanstående - detta kan ofta hänföras till dåligt resursutnyttjande.
Skulle det inte vara bra om servern kan vakna en morgon och skicka data till kunder som är villiga att lyssna utan någon form av förinstallerad anslutning? Välkommen till PUSH-världen!
Denna handledning kommer att fokusera mer på klientbyggnaden i stället för serverimplementering.
Jag använder XAMPP på Windows 7 för att köra PHP-servern lokalt. Ta en kopia av phpwebsockets som är en WebSocket-server i PHP. (Obs! Jag har upplevt några problem med den här versionen, jag har gjort vissa ändringar i den och kommer att inkludera den i källfilerna) Det finns olika WebSocket-implementeringar; om man inte arbetar kan du prova en annan eller fortsätta med handledningen.
Ändra servern enligt din inställning, till exempel i setup.class.php:
allmän funktion __construct ($ host = 'localhost', $ port = 8000, $ max = 100) $ this-> createSocket ($ värd, $ port);
Bläddra igenom filerna och gör ändringar där det är lämpligt.
Låt oss få en grundläggande mall upp; det här är min client.php-fil:
WebSockets Client WebSockets Client
t.ex. försök "hej", "namn", "ålder", "idag"
Så i denna kod skapar vi en enkel mall: vi har en ruta för chattloggen, en inmatningsfält och en avbrytningsknapp.
Ingenting fancy, bara utrymme några element ut.
kropp font-family: Arial, Helvetica, sans-serif; #container border: 5px solid gray; bredd: 800px; marginal: 0 auto; padding: 10px; #chatLog padding: 5px; gräns: 1px solid svart; #chatLog p margin: 0; .event color: # 999; . varning font-weight: bold; färg: #CCC;
Låt oss först försöka förstå idén om WebSocket-händelser.
Vi använder tre händelser:
Men hur kan vi genomföra detta??
Skapa först ett WebSocket-objekt
Accentsconagua
var socket = nytt WebSocket ("ws: // localhost: 8000 / socket / server / startDaemon.php"); Och att leta efter händelser är så enkelt som:
socket.onopen = function () alert ("Socket har öppnats!"); Men vad sägs om när vi får ett meddelande?
socket.onmessage = function (msg) alert (msg); //Grymt bra!
Låt oss dock undvika att använda varningsrutor och faktiskt integrera det vi har lärt oss på kundsidan.
Ok, så låt oss börja. Först lägger vi vår kod i jQuerys dokument redo funktion, och vi kontrollerar om användaren har en webSockets-aktiverad webbläsare. Om de inte gör det, lägger vi till en länk till Chrome i HTML.
$ (dokument) .ready (funktion () if (! ("WebSocket" i fönstret)) $ ('# chatLog, input, button, #examples'). fadeOut ("snabb"); $Åh nej, du behöver en webbläsare som stöder WebSockets. Vad sägs om Google Chrome?
') .AppendTo (' # behållaren '); else // Användaren har WebSockets connect (); funktionskontakt () // anslutningsfunktionskoden är under); Som du kan se, om användaren har WebSockets kallar vi en connect () -funktion. Det här är kärnan i funktionaliteten: vi börjar med det öppna, stänga och ta emot händelser.
Vi definierar webbadressen till vår server
var socket; var värd = "ws: // localhost: 8000 / socket / server / startDaemon.php";
Vänta, var är http i den webbadressen? Åh, det är en WebSocket-URL, så det använder ett annat protokoll. Här är en sammanfattning av bitarna av vår URL:
Låt oss fortsätta med vår connect () -funktion. Vi lägger in vår kod inom ett försök / fångstblock; så om något går fel kan vi låta användaren veta. Vi skapar ett nytt WebSocket och skickar meddelandet till en meddelandefunktion som jag kommer att förklara senare. Vi skapar våra onopen, onmessage och onclose funktioner. Observera att vi också visar användaren socket status Det här är inte nödvändigt, men jag inkluderar det här eftersom det kan vara till hjälp för felsökning.
funktionskoppling () försök var socket; var värd = "ws: // localhost: 8000 / socket / server / startDaemon.php"; var socket = nytt WebSocket (värd); meddelande('Socket Status: '+ socket.readyState); socket.onopen = function () message ('
Socket Status: '+ socket.readyState +' (open) '); socket.onmessage = function (msg) message ('
Mottagen: '+ msg.data); socket.onclose = function () message ('
Socket Status: '+ socket.readyState +' (Closed) '); fångst (undantag) meddelande ('
Error '+ undantag);
Funktionen Meddelande () är ganska enkelt, det tar lite text in som vi vill visa användaren och lägger den till chatLog. Vi skapar den lämpliga klassen för stycke-taggar i fackhändelsesfunktionerna, varför det finns bara en stängande stycke-tagg i meddelandefunktionen.
funktionsmeddelande (msg) $ ('# chatLog'). append (msg + ''); Om du har följt upp till den här punkten, bra gjort! Vi har lyckats skapa en grundläggande HTML / CSS-mall, skapa och upprätta en WebSocket-anslutning och hålla användaren uppdaterad eftersom det gjordes framsteg med anslutningen.
Nu, snarare än att ha en inlämningsknapp, kan vi upptäcka när användaren trycker tillbaka på tangentbordet och kör sändningsfunktionen. Den '13' som du ser nedan är ASCII-tangenten för enter-knappen.
$ ('# text'). tangenttryck (funktion (händelse) om (event.keyCode == '13') send ();); Och här är funktionen send ():
funktion send () var text = $ ('# text') .val (); om (text == "") meddelande ('Vänligen skriv ett meddelande "); lämna tillbaka ; försök socket.send (text); meddelande('
Skickat: '+ text) fångst (undantag) meddelande ('
Fel: '+ undantag); $ ('# text') .val ("");
Kom ihåg vad du ser ovan kan vara en bit bit kod, men i själva verket är koden vi verkligen behöver:
socket.send (); // Tack JavaScript
Den extra koden gör ett antal saker: detekterar om användaren inte angav något men ändå slår tillbaka, rensar inmatningsrutan och ringer meddelandets funktioner.
Att stänga kontakten är ganska enkelt: fäst en klickhanterare på vår avbrytningsknapp och vi är klara!
$ ('# avbryta'). klicka (funktion () socket.close ();); $ (dokument) .ready (funktion () if (! ("WebSocket" i fönstret)) $ ('# chatLog, input, button, #examples'). fadeOut ("snabb"); $Åh nej, du behöver en webbläsare som stöder WebSockets. Vad sägs om Google Chrome?
') .AppendTo (' # behållaren '); else // Användaren har WebSockets connect (); funktionskontakt () var socket; var värd = "ws: // localhost: 8000 / socket / server / startDaemon.php"; försök var socket = nytt WebSocket (värd); meddelande('Socket Status: '+ socket.readyState); socket.onopen = function () message ('
Socket Status: '+ socket.readyState +' (open) '); socket.onmessage = function (msg) message ('
Mottagen: '+ msg.data); socket.onclose = function () message ('
Socket Status: '+ socket.readyState +' (Closed) '); fångst (undantag) meddelande ('
Error '+ undantag); funktion send () var text = $ ('# text') .val (); om (text == "") meddelande ('
Vänligen skriv ett meddelande "); lämna tillbaka ; försök socket.send (text); meddelande('
Skickat: '+ text) fångst (undantag) meddelande ('
'); $ ('# text') .val (""); funktionsmeddelande (msg) $ ('# chatLog'). append (msg + '
'); $ ('# text'). tangenttryck (funktion (händelse) om (event.keyCode == '13') send ();); $ ('# avbryta'). klicka (funktion () socket.close ();); // Avsluta anslutning // Avsluta annat); Vi behöver kommandoradsåtkomst. Lyckligtvis har XAMPP ett praktiskt skalalternativ. Klicka på "Shell" på XAMPP-kontrollpanelen och skriv in:
php -q-sökvägen \ till \ server.php
Du har nu startat en WebSocket-server!
När sidan laddas, försöker en WebSocket-anslutning att etableras (försök att redigera koden så att användaren har anslutnings / kopplingsalternativ). Därefter kan användaren skriva in meddelanden och ta emot meddelanden från servern.
Tack för att du läser; Jag hoppas att du haft denna handledning! Kom ihåg, så spännande som WebSockets kan vara, saker kan förändras. Du kan referera här för att hålla dig uppdaterad på W3C WebSocket API.
Om du vill göra mer med HMTL5, kolla på det brett urvalet av HTML5-kodobjekt på Envato Market. Det finns ljudspelare, lyhörda videogallerier, interaktiva kartor och mycket mer.
HTML5-kodposter på Envato Market
