På förmiddagen så gick vi igenom den underliga bugg gällande ObjectId i Mongoose/MongoDB, och vi kollade även på hur Regular Expressions (brukar förkortas RegEx eller RegExp) fungerar och hur man kan använda dem både för att lösa buggen med ObjectId men även för att implementera en sök-funktion i vårt LMDB API.

Kan varmt rekommendera RegEx101 för att felsöka/testa regular expressions. The Net Ninja har också en väldigt bra videoserie om RegExp’s, se länk nedan.

På eftermiddagen dök vi in i WebSockets och lite hur de fungerar ”behind-the-scenes” för att se några av fördelarna jämfört med att göra frekventa requests till en server hela tiden.

Några av fördelarna är

  • Klienten slipper fråga servern för ny data, bara för att få som svar att det inte finns någon.
  • Servern kan nå ut till klienten så fort den har ny data, och behöver inte vänta på att klienten ”hör av sig” och frågar efter ny data.
  • Servern slipper tjatiga klienter som hela tiden frågar om det finns ny data när ingen ny data har inkommit.

Allt detta frigör server-resurser så att servern kan hantera otroligt många fler requests och svara på dem mycket snabbare än den hade kunnat göra med ”vanliga” http-requests.

Kortfattat så gör WebSockets att vi får dubbelriktad kommunikation mellan en klient och servern, där både klienten kan skicka meddelanden (events) till servern och servern kan skicka meddelanden (events) till klienten.

Lite som plåtburkar med ett snöre emellan, meddelanden kan flyta åt båda hållen. Och servern har en plåtburk för varje klient och kan skicka vidare meddelanden som den ”hör” från en klient till alla andra.

Därefter implementerade vi en enkel första version av en realtids-chatt med hjälp av Socket.io’s Getting Started-guide. Dock så moderniserade vi den lite och gjorde den ”snyggare” (ehm, jag försökte iallafall).

Kika gärna på Shaun’s korta video-serie om WebSockets med Socket.io (se nedan) för en repetition av vad vi gick igenom, och katalogen 09-chat i kursens repo på GitHub.


Skisser

Request-baserat flöde

”Traditionell” approach med HTTP-requests och responses som avslutas efter varje gång.

Request-baserat flöde

WebSocket-baserat flöde

Dubbelriktad kommunikation med hjälp av en ständigt öppen socket mellan servern och varje ansluten klient.

WebSocket-baserat flöde

WebSocket-metafor

Man kan lika sockets lite vid plåtburkar med ett snöre mellan, där servern har en plåtburk till varje användare och kan ”prata” ner till varje klient men klienterna kan också prata ”upp” till servern.

Plåtburksflöde! 📢

Länkar

Socket.io

https://socket.io/

Socket.io Getting Started-guide

https://socket.io/get-started/chat/


Videos

The Net Ninja – WebSockets Tutorial (Node & Socket.io Chat App)

WebSockets Tutorial (Node & Socket.io Chat App)

The Net Ninja – Regular Expressions (RegEx) Tutorial

Regular Expressions (RegEx) Tutorial

Workshop

Här är några förslag på förbättringar till vår lilla enkla chatt-app:

  • Skicka ut ett event när en användare kopplar upp/ner sig (och visa detta i chatten hos alla anslutna användare).
  • Lägg till stöd för användarnamn/”nicknames” (tänk enkelt input-fält där man bara fyller i sitt namn).
  • När en användare skickar ett meddelande så lägg till det bums i hens egna lista, och låt servern skicka ut meddelandet till alla utom den användaren som skickade det (kommer du ihåg det jag nämnde kort om broadcast?)
  • Lägg till ”{user} is typing..” funktionalitet.
  • Visa vem som är online för tillfället (och lägg till/ta bort användare från listan när någon kopplar upp/ner sig, detta är dock beroende av att punkt 1 ovan redan är på plats)

Och säkert en massa annan rolig funktionalitet som du kommer på!