4 Kommunikation

Så er vi næsten i mål. Vi har skrevet koden til en lille webserver vi kan starte og køre, og vi har oprettet forbindelse med en klient – som har fået sit helt eget id. Vi kan åbne to forskellige browservinduer og forbinde til serveren – og i terminalvinduet kan vi de får forbindelse begge to. Men hvis vi tegner noget på dene, vil vi kunne se det på den anden. Det er det vi skal frem til.

Send beskeder fra klienten

Vi starter med klienten – og går altså ind i sketch.js. Her implementerer vi funktionen mouseDragged, så vi kan sende beskeder når brugeren klikker for at tegne. Flyt koden som tegner ellipser ind i funktionen mouseDragged():

function mouseDragged(){
      ellipse(mouseX, mouseY, 40,40);
      //Og send så besked til serveren om hvor musen var henne...
}

Vi skal altså sende beskeder til serveren. Og det gør vi i to trin: først laver vi de data vi vil sende om til en variabel. Bagefter sender vi de data. Udvid funktionen med følgende:

function mouseDragged(){
     ellipse(mouseX, mouseY, 40,40);
     //Og send så besked til serveren om hvor musen var henne...
     var data = {
         x: mouseX,
         y: mouseY
     }
     //Send skidtet afsted med navnet "mus" (valgfrit, men beskeden skal have et navn)
     socket.emit('mus', data);
     console.log("Sender besked: " + mouseX + ", " + mouseY);
}

Så nu kan vi se – og vi kan tjekke i browserens konsol – at klienten sender beskeder når musen trækkes. Men på serveren sker der ikke noget endnu, for vi har ikke skrevet den kode der skal modtage beskederne.

Modtag beskederne på serveren

Lad os gå tilbage til server.js, og funktionen newConnection, som vi var ved at skrive. Tilføj følgende linjer:

// Når der kommer beskeder ved navn 'mus', kald en funktion, mouseMsg()
socket.on('mus', mouseMsg);
function mouseMsg(data){
  console.log(data);
}

Det vi fortæller serveren er, at den skal vente på beskeder ved navn “mus”, og når den får dem skal den kalde funktionen mouseMsg. Den laver vi så (OBS lav funktionen inde i newConnection, direkte under socket.on):

Altså har vi nu en klient som sender beskeder – og en server som modtager dem. Genstart node. Åbn terminalvinduet og browserens konsol samtidig – så kan du selv se. Så: beskederne kommer hen til serven – men nu skal de tilbage igen til de andre klienter! Og så skal vi lige huske at det kun skal være til de andre klienter – ikke den klient der tegner selv – det ville give et uendeligt loop.

Udvid funktionen mouseMsg, så den indeholder følgende:

function mouseMsg(data){
  console.log(data);
  //sockets.emit('mus', data); //hvis du vil sende til alle, også den klient der sendte selv
  //Eller når du kun vil sende til "de andre":
  socket.broadcast.emit('mus', data); 
}

Modtag beskeder på klienter

Så nu sender vi beskeden videre til alle andre. Det SIDSTE vi  mangler at gøre er nu, at modtage beskederne på klienten igen og gøre noget med dem – aka tegne de andres tegninger. Okay tilbage til sketch.js og funktionen setup(). Udvid den med linjen:

    // Når der kommer beskeder på din socket, ved navn 'mus': kald funktionen newDrawing()
    socket.on('mus', newDrawing);
    // Og brug funktionen til at tegne nye cirkler
    function newDrawing(data) {
        console.log("Fik: " + data.x + " " + data.y);
        // Fx blå
        fill(0, 140, 255);
        ellipse(data.x, data.y, 40, 40);
    }

Så vi siger altså nu at klienten skal lytte efter beskeder med emnet “mus” og så kalde en funktion der hedder newDrawing, hvis der kommer noget.

That’s it folks.

Hent færdigt projekt her 


Hent færdig kode (engelsk, oprindelig) her 

Eller se på github: https://github.com/simmoe/digidaktik/tree/master/sockets/sockets_done

Leave a comment

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