Infi Technights: WebSockets

WebSockets, hoe gebruik je het? Tijdens een Technight staken een paar waarmakers de koppen bij elkaar en zochten het uit. 

De technologie achter WebSockets bestaat al een tijdje. Vroeger waren er echter ook nog bezwaren wegens de veiligheid en omdat het niet in alle browsers ondersteund werd. Het is niet een gereedschap dat je dagelijks gebruikt wanneer je voor klanten aan het werk bent.
 
Het ligt uiteraard aan de use case voor je, maar wanneer je je gebruiker zo snel mogelijk van informatie wilt voorzien of wanneer jouw systeem realtime input nodig heeft is er weinig andere keuze dan het gebruik van WebSockets.
 
Bij informatievoorziening kan je denken aan het implementeren van een chat of een notificatiewidget, waarbij het nodig is om berichten te kunnen pushen vanuit een server of waarbij meerdere mensen hetzelfde bericht moeten ontvangen.

Technight

Samen met Erik en Michael organiseerde ik een Technight voor mijn collega’s. Het doel: met elkaar een voorbereide case implementeren in de taal en library naar keuze. Er is genoeg geschreven over WebSockets en het gebruik er van, in deze blog vertel ik je vooral over onze ervaringen met de verschillende libraries of het niet gebruiken hiervan.
 
In de laatste Coding Dojo van 2016 hebben we Elm gebruikt om een quiz web applicatie te bouwen. Hierbij maakten we gebruik van een API die quizvragen en antwoorden via verschillende calls opleverde.
 
Omdat deze API een terugkerende factor lijkt te zijn in onze kennisdelingsactiviteiten besloten we zo ook deze keer de opdracht te formuleren rondom de quizvragen. 
 
De opdracht bestond uit twee delen: 

  • Bouw een backend die via WebSockets een quizspel kan faciliteren. 
  • Bouw een frontend die via deze backend als speler mee kan doen.

Aan de slag

Na het nuttigen van een paar pizza’s ontstonden er een paar groepjes die onderling weer frontend -en backendverantwoordelijkheden verdeelden. Na twee uur knutselen waren dit de verschillende gebruikte technologieën: Elm/Clojure(script), SignalR, SuperSockets en socket.io.
 
De resultaten werden door elke groepje afzonderlijk gepresenteerd. Waarbij de één iets verder dan de ander was gekomen in de implementatie van verschillende quizfunctionaliteiten, waaronder het realtime updaten van een timer, het tonen van de scores en het aanmelden van spelers.

Elm/Clojure

Elm is een frontend taal die aan populariteit aan het winnen is vanwege zijn type systeem en de functionele stijl van programmeren. Clojure (een script) bestaat al langer en kan aan de backend en frontend gebruikt worden. Bij deze groep werd geen gebruik gemaakt van een library.

Het managen van de verbinding werd wel opgelost. Dit zorgt ervoor dat backend en frontend een eigen protocol of berichten structuur moeten afspreken, dit is wat extra werk maar levert wel veel flexibiliteit op.

Socket.io

Socket.io is Javascript gebaseerd aan de frontend, aan de backend heb je keuze uit Javascript, Java, C++ en Swift. De communicatie via socket.io is eventgebaseerd. Het voordeel hiervan is dat er al vrij snel een basis gelegd is om verschillende use cases te implementeren.
 
Als developer zit je echter wel vast aan het protocol dat socket.io ‘onderwater’ gebruikt en zal je socket.io aan de front en backend moeten gebruiken.

SuperSocket

SuperSocket is een framework geschreven voor .NET/Mono applicaties. Net als Elm en Clojure handelt SuperSocket details rondom de communicatie af, waardoor je kunt concentreren op de businesslogica.

SignalR

Een framework geschreven voor wederom .NET/C# applicaties. Net als socket.io regelt SignalR veel voor je, waardoor je sneller van start kunt. SignalR kenmerkt zich onder ander door de manier waarop met Remote Procedure Calls code op de frontend aangeroepen kan worden.

Een aantal van de gebruikte technologieën ondersteund met verschillende fallback methoden ook oudere browsers, mocht dit belangrijk zijn voor de keuze die je moet maken.

Mijn ervaring

Tijdens de Technight heb ik zelf gewerkt met Elm en de module WebSockets die 1-op-1 gebaseerd is op de in de browser aanwezige WebSockets ondersteuning. Het gebruik hiervan was vrij simpel, je luistert naar berichten op een socket en kunt ook meteen berichten verzenden zonder de verbinding met de WebSocket te verbreken. 

Dat wil niet zeggen dat Elm en bijvoorbeeld socket.io niet goed te combineren valt als je dat niet wilt. Ik ga waarschijnlijk voor een hobbyproject nog wat meer spelen met de mogelijkheden.

Wij hebben veel plezier gehad in het implementeren van een realtime component in de quizapplicatie, het is toch iets magisch om te zien dat het berichten zo snel heen en weer kunnen gaan en je applicatie realtime reageert. 

--

[Matthijs is ontwikkelaar bij Infi]

Wil je iets waarmaken met Infi?

Wil jij een eigen webapplicatie of mobiele app waarmee jij het bij anderen maakt?

Waargemaakt door de nerds van Infi.
Nerds met liefde voor softwareontwikkeling en die kunnen communiceren. En heel belangrijk: wat we doen, doen we met veel lol!

Wij willen het fixen. Laat jij van je horen?

Voor wie heb je een vraag?