3 Sockets

Ok. Så nu har vi en webserver der kører node og som åbner vores egen server.js fil og hoster vores skitse i p5 lokalt på port 3000. Nu skal vi tilføje det kode som gør det muligt for klienter på serveren, at sende beskeder frem og tilbage til hinanden i realtid. Og dermed er vi nået til forløbets emne: sockets!

Socket.io

For at lave sockets skal vi tilføje en pakke – socket.io – til vores projekt. Vi husker at vi åbner terminalen, finder den rodmappe hvor de andre filer ligger, og skriver så:

npm install socket.io --save

Hvormed du måske kan regne ud, at vi installerer pakken “socket.io” på computeren, og samtidig opdaterer packets.json filen, så den indeholder en dependency til pakken socket.io. Det kan vi selvfølgelig tjekke, ved at åbne package.json og se efter.

Lad os så gå tilbage til server.js filen og tilføje følgende:

// Importer pakken socket ind i variablen socket
var socket = require('socket.io'); 

// Lav en instans af socket objektet, som bruger den server vi lavede tidligere 
var io = socket(server);

Først opretter vi en variabel – socket – som indeholder pakken (eller i praksis: funktionen/objektet) socket.io. Derefter laver vi en ny variabel – io – som er en instans af socket objektet. Vi giver desuden funktionen/instansen den server vi har oprettet tidligere (den som lytter på port 3000) med som argument.

Forbindelse på serveren

Nu har vi et io (input-output) object, der kører på vores server. Med det kan klienter skabe forbindelse – kontakt – sockets.

Sockets er “event-baserede”. Det vil sige at det første vi vil gøre, er at oprette en funktion som hele tiden venter på at der kommer en klient og vil forbinde sig:

// Når eventet connection sker, kald funktionen newConnection
io.sockets.on('connection', newConnection);
//Implementér funktionen newConnection  
function newConnection(socket){
    console.log('Ny forbindelse!!');
}

Og det betyder altså – når io får en henvendelse om en ny forbindelse “Hey, jeg vil gerne forbinde mig til serveren” – så siger den ok – og kalder funktionen newConnection. Som vi så i første omgang bare får til at skrive en besked i konsollen.

Lad os da bare kigge i browseren. Jo, det virker – men den skriver ingenting i konsollen! Og det er jo klart. Vi kan vente så meget vi vil på at klienter forbinder sig – men vi er jo også nødt til at skrive det javascript på klienten, som gør at klienten faktisk prøver at oprette forbindelse.

Forbindelse fra klienten

Så lad os kigge i klientens kode. Og hvor er det nu det er? Jo, i mappen public, og i filen sketch.js. Det er jo der vi plejer at være. Og der er ganske rigtigt ingenting, der bare prøver en lille smule på at oprette forbindelse til serveren.

Pakke  socket.io giver os mulighed for at oprette sockets. Men det vi lige skal forstå er, at der både er en socket.io server og en socket.io klient. Klient computeren skal have en socket.io klient pakke for at snakke med serveren.

Det er ikke så mærkeligt egentlig. Det er det samme når vi skriver p5.js skitser – så må vi have biblioteket p5.js.

Så lad os se på socket.io’s webside. Der er ganske rigtigt et link til at inkludere socket.io på klientsiden. Copy paste følgende linje ind i index.html:

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js"></script>

Bemærk at javascriptet ligger på nettet på cdn (content delivery network) – vi kunne godt have downloadet filen og lagt den i vores egen projektmappe, men det her er nemmere.

Og nu hvor vi har biblioteket importeret i vores javascript, kan vi oprette forbindelse fra sketch.js. Tilføj følgende:

    // Start en socket til en server (HUSK hvis du vil gøre det over et netværk til en anden computer, skal du skive dens IP)
    socket = io.connect('http://localhost:3000');

Så vi laver altså en variabel “socket”, og bruger den til at oprette forbindelse til vores helt egen webserver.

Genstart node med de nye ændringer – og kig så i terminalvinduet: den skriver søreme “Ny forbindelse”. Og vi kan måske udvide det udsagn lidt, fx ved at skrive lidt mere i server.js funktionen:

console.log("Ny forbindelse: " + socket.id);

Alle nye forbindelser får automatisk et id – og det kan være vi skal bruge det senere, når vi vil gøre ting og sager.

Det næste – og sidste – vi skal gøre i denne omgang er, at skrive noget kode som kan sende beskeder fra en klient til serveren – få serveren til at modtage beskeden – og sende den videre til alle de andre klienter. Så er vi i mål. Sådan da. Med det første i hvert fald.

 

Leave a comment

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *