#16 - Implement real-time data with socket.io

Socket.io maakt real-time communicatie mogelijk, door middel van code aan de server-side en de client-side van je applicatie. Beide stukken code praten met elkaar om ervoor te zorgen dat jouw berichten aankomen bij degene waar je mee praat.

Socket.io is te installeren door deze "Getting started" tutorial te volgen. Voor nieuwe gebruikers, zoals ikzelf, kan dit nog best lastig worden.

Allereerst installeert u socket.io als node module met de command npm install socket.io. Hierna zet u de volgende code in uw index.js:

const app = require('express')();
const http = require('http').Server(app);
const io = require('socket.io')(http);

io.on('connection', (socket) => {
  console.log('a user connected');
});

Het vervolgens verbinden met de socket client, een client library die aan de client-side wordt ingeladen, wordt gemakkelijk beschreven door een script tag neer te zetten die het bestand "socket.io.js" ophaalt. Bij mij kreeg ik hier het eerste probleem, de file kon niet gevonden worden.

Na zoeken en meerdere bronnen geraadpleegd te hebben ben ik op de volgende afspeellijst geattendeerd die u hier kan vinden. In deze tutorial, waarvan ik video 3 en 4 heb gebruikt, wordt haarfijn uitgelegd waarom er gekozen is voor deze specifieke code is in vergelijking met wat socket.io zelf in hun eigen tutorial en hoe deze code zijn werk doet.

Hierna heeft u een werkende socket.io implementatie in uw applicatie.

Naast het kiezen voor hoe de data weergegeven wordt in tegenstelling tot de video's, namelijk zonder handle/nickname bij een bericht omdat het een 1 op 1 gesprek is, heb ik ook de keuze gemaakt om toch het concept van de chatroom te pakken in plaats van een chatgesprek.

In de tijd die ik had nadat ik tegen het probleem aangelopen ben dat ik de connectie maar niet voor elkaar kreeg, heb ik gekozen voor de chatroom omdat dit in de video's al uitgelegd werd. Hierdoor was de drempel laag voor mij in te stappen en kon ik dit makkelijker in mijn tijd kwijt. Als ik gekozen had voor een chatgesprek voor 2 personen alleen, had ik dit naar mijn mening niet op tijd afgekregen. Als ik dit toch af gekregen had durfde ik ook niet met zekerheid te zeggen of ik dit ook goed uit kon leggen.

Ik ben erg tevreden met het eindresultaat. Echter had het altijd natuurlijk beter gekund. Ik had graag gezien dat ik, in plaats van een chatroom, wel het 1 op 1 gesprek werkend had kunnen krijgen. Daarnaast had ik het ook tof gevonden als ik ervoor had kunnen zorgen dat het eruitziet alsof een ander een bericht stuurt in plaats van jijzelf. Momenteel is de styling hetzelfde voor alle verstuurde berichten dus daar had ik graag zelf nog een verschil in gezien.

Socket.io ziet er als volgt uit als code:

Server-side

var io = socket(server);
io.on('connection', function(socket) {
  console.log('made the socket connection');

  //luistert naar de client side of daar een chat bericht van verstuurd wordt
  socket.on('chat', function(data){
    //stuurt het bericht door naar alle clients die gekoppeld zijn aan dezelfde room
    io.sockets.emit('chat', data);
  });
});

Client-side

//Maak connectie met server-side socket.io
var socket = io.connect('http://localhost:3000');

// Query DOM
var bericht = document.getElementById('bericht');
var knop = document.getElementById('submitText');
var output = document.getElementById('output');

//verstuur event naar serverside js
knop.addEventListener('click', function(){
    socket.emit('chat', {
        message: bericht.value
    })
});

//luister naar events van serverside js
socket.on('chat', function(data){
    //zet het bericht in een p en beeld deze af op de pagina
    output.innerHTML += '<section class="chat_msg nieuwBericht"><p>' + data.message + '</p></section>';
});

Design