HTML5 on ollut kuuma hittisana web-kehityksessä jo pari vuotta. Osia standardin määrittelemistä ominaisuuksista on jo aktiivisesti käytössä, mutta ns. kaikki hauska on vasta tuloillaan. Monet uudet ominaisuudet eivät lähinnä selainyhteensopivuuksien vuoksi ole tehneet läpimurtoaan ja vastaavia toiminnallisuuksia toteutetaan nykyisillä resursseilla hankalammilla tavoilla. Eräs tälläinen kytevä ominaisuus on websoketit.

Niin että mitkä? Ominaisuutta käytännössä esittelemään kutsuttiin Aucorin meemityöryhmä ja lopputulos oli varsin värikäs. Siispä pelko pois ja video pyörimään! Sen jälkeen voikin pureskella videon alta löytyvän teknisen selityksen auki.

Sateenkaarikissan resepti

Perinteinen HTTP-siirtoprotokolla on luonteeltaan tilaton, eli selain tekee pyynnön ja palvelin vastaa vallitsevien muuttujien perusteella. Liikenne on siis tavallaan yksisuuntaista, sillä palvelin ei pysty työntämään selaimeen tietoa ilman selaimen pyyntöä. Käytännössä sivustojen dynaamisuus luodaankin tekemällä ajastettuja pyyntöjä käyttäjältä “piilossa”.

Esimerkiksi Facebookin uutissyöte ja chat päivittävät tietojaan vain selaimen tekemien pyyntöjen perusteella, uudet päivitykset ja viestit eivät siis ilmesty ruudulle välittömästi vastapuolen ne julkaistua.

Websoketit mahdollistavat pysyvän yhteyden luomisen palvelimen ja selaimen välille. Näin palvelin pystyy viestimään selaimelle ja toisaalta selaimen viestit palvelimellekin nopeutuvat, kun matkalta saadaan pudotettua muutama välikäsi. Yleisin esimerkki websoketeista tuntuu olevan chat-toiminto, jolla useampi käyttäjä kykenee viestimään toisilleen. Niinpä päätimme kokeilla jotain erilaista.

Suuri koejärjestely

Inspiraation lähteenä toimi eräs kissa, jonka ruumis muistuttaa paahtoleipää ja jälki myös internetin kulttuuriperinnössä tullee olemaan värikäs. Myöskin toimistolla vallitseva näyttöruutujen infrastruktuuri vaikutti lopputulokseen.

Teknisesti hommat hoidettiin ylistystä keränneellä node.js -alustalla sekä socket.io -kirjastolla, joka helpottaa websokettien ohjelmointia ja samalla laajentaa selainyhteensopivuutta. Tällä erinomaisella kombolla sekä palvelin että “käyttöliittymä” voitiin ohjelmoida samalla kielellä.

Käytännössä palvelimeen yhteyden ottavat sivut kerätään jonoon ja sivuille annetaan paluupostina järjestysnumero. Tasaisin väliajoin, videolla puolen sekunnin välein, lähettää palvelin sivuille tiedon “missä mennään” ja jokainen sivu päivittää oman näkymänsä sopimaan kokonaiskuvaan. Koska palvelimen on mahdoton tietää, missä järjestyksessä selaimet fyysisesti ovat, pitää sivut päivittää oikeassa järjestyksessä. Viimeisessä selaimessa on lisäksi kontrollit joilla syklin pituutta voi säädellä.

P.S. Ei ne ihan kaikki esimerkit chattejä ole, seuraavassa pari muutakin:

Lopuksi kiitämme tietysti itse päänyaania. Juokse paahtoleipäkissa, juokse.