Genvejsmenu:
S - Indhold
1 - Forside
2 - Aktuelt
3 - Oversigt
4 - Søg

Sorter efter emne

23.09.10   |   kl. 16:15   |   Aktuelt, Prosabladet, HTML5

Sæt Ajax på porten med websockets

Websockets er en ny HTML5-teknologi, som sætter browser og server til at kommunikere uhindret og tovejs, uden hacks eller plugins.

Hvis udviklere ønsker at skabe webapplikationer, der kan opdateres i realtid fra serveren, er de henvist til enten at bruge plugin-teknologier som Flash, Java eller Silverlight eller teknologier som Comet og 'Long polling', hvor HTTP-forbindelsen holdes åben i længere tid.

Men på længere sigt kan disse hacks erstattes af en helt ny teknologi, som går under betegnelsen websockets. Teknologien er en del af viften af HTML5-specifikationer, dog uden direkte at være en del af den egentlige HTML5-specifikation, men er i stedet hjemmehørende i en række andre standarder.

Ofte omtales websockets som noget nær en TCP-forbindelse til web. Men websockets er en helt ny kommunikationsprotokol, der kombinerer HTTP med en mere effektiv overførsel af tekst og data i begge retninger.

Websockets består af to dele: En protokol, der i øjeblikket er under udvikling af organisationen IETF (Internet Engineering Task Force), samt et Javascript-API, som benyttes på browsersiden, i 3WC-konsortiets regi. Protokollen har en del arbejde foran sig, og arbejdsgruppen skal lægge et endeligt forslag på bordet senest april 2011, mens Javascript-API'et begynder at stabilisere sig. For begge dele af standarderne gælder, at tingene kan ændres løbende, så for øjeblikket er teknologien kun til eksperimenter, i hvert fald indtil foråret. Ligesom med andre webteknologier er websockets underlagt kravet om 'same origin' – Javascriptet på browsersiden kan kun kommunikere med samme server, som HTML-dokumentet kom fra.

På browsersiden er websockets i skrivende stund understøttet i de seneste udgaver af Chrome, Safari og Firefox 4 beta. På serversiden findes efterhånden en lang række implementeringer i Java, .Net, PHP, Python og Ruby, og sikkert flere til.

Websockets med PHP og begrænset rækkevidde

Men nok snak – lad os få noget kode under neglene. Til dette eksempel benytter vi et meget simpelt PHP-script fra projektet PHPWebsockets, som i skrivende stund dog kun virker sammen med Chrome. Vi har alligevel valgt PHP-scriptet til eksemplet, da der er meget få implementeringer i den simple ende af skalaen. I den tungere ende kan Java-serveren Jetty, hvis udviklere deltager i IETF's arbejdsgruppe, byde på en stærkere implementering. En anden Java-server, Jwebsocket, benytter en implementering, der også virker i gamle browsere, ved at bruge et Flash-lag til at udføre kommunikationen med serveren.

Download eksempelfilerne fra prosa.dk/link/436. Eksemplet her kræver PHP, og serverscriptet startes ved at afvikle scriptet websocket.demo.php fra kommandolinjen (og altså ikke via webserveren), som vist i eksemplets batch-fil start_server.bat.

Lad os se på klientkoden i browseren (client.html i den medfølgende pakke). I kodeeksemplet vist andetsteds her i artiklen kaldes funktionen 'init', når siden loades. Init-funktionen opretter et nyt websockets-objekt i fjerde linje. Dernæst knyttes en række funktioner til socket-objektets onopen-, onmessage- og onclose-events, der kaldes, når forbindelsen åbnes, når der modtages meddelelser, og når forbindelsen lukkes. Log-funktionen, der anvendes i funktionerne, er blot en simpel funktion, som udskriver argumentet til et tekstfelt.

I funktionen send(), som ikke vises her, men findes i eksemplet, sendes data fra klienten til serveren via funktionen socket.send(), hvor socket altså er en instans af websockets-objektet.

I dette eksempel kunne vi i og for sig have implementeret samme funktionalitet via Ajax, men humlen er, at med websockets kan applikationen sende data i realtid fra server til browser. Firmaet Kaazing har en mængde eksempler, som kan ses på adressen Kaazing.me, der i øvrigt benytter Flash som fallback for ikke-kompatible browsere, så teknologien virker i alle browsere.

  • Kodeeksempel

    function init(){

      var host = "ws://localhost:12345"; 

      try{

        socket = new WebSocket(host);

        log('WebSocket - status '+socket.readyState);

        socket.onopen    = function(msg){

          log("Welcome - status "+this.readyState);

        };

        socket.onmessage = function(msg){

          log("Received: "+msg.data);

        };

        socket.onclose   = function(msg){

          log("Disconnected - status "+this.readyState);

        };

      }

      catch(ex){ log(ex); }

      $("msg").focus();

    }

  • Download eksempel

    Eksemplet kan downloades fra prosa.dk/link/436. Det kræver en lokal PHP-server. Vi benyttede Wampserver 2.0 og testede i Chrome 5.0.

PRINT

Kommentarer

1

29.09.10   |   kl.21:10   |   Daniel Due

Det lyder rigtig spændende, så må vi se om det forbedre hastigheden på effekter ol. :)

2

14.03.11   |   kl.13:13   |   Billy Sørendrn

det lyder ganske spænende, glæder mig til at kunne lege med det

men er lidt skuffet over prosa.dk ikke har en share funktion, så man lige kunne have smidt det op på facebook

3

14.03.11   |   kl.13:26   |   Jesper Svarre

Hej Billy
Tak for dit indlæg. Vi har i sidste uge bestilt den omtalte share-funktion hos vores udviklere. Det skulle altså være lige på trapperne.
I mellemtiden håber jeg du vil dele ved at benytte copy-paste i stedet :-)
Mvh.
Jesper
Webmaster i PROSA

God tone i debatten

Deltag i debatten

CAPTCHA billede for SPAM beskyttelse

Relevante links