Ok. S\u00e5 nu har vi en webserver der k\u00f8rer node og som \u00e5bner vores egen server.js fil og hoster vores skitse i p5 lokalt p\u00e5 port 3000. Nu skal vi tilf\u00f8je det kode som g\u00f8r det muligt for klienter p\u00e5 serveren, at sende beskeder frem og tilbage til hinanden i realtid. Og dermed er vi n\u00e5et til forl\u00f8bets emne: sockets!<\/p>\n
For at lave sockets skal vi tilf\u00f8je en pakke – socket.io – til vores projekt. Vi husker at vi \u00e5bner terminalen, finder den rodmappe hvor de andre filer ligger, og skriver s\u00e5:<\/p>\n
npm install socket.io --save<\/pre>\nHvormed du m\u00e5ske kan regne ud, at vi installerer pakken “socket.io” p\u00e5 computeren, og samtidig opdaterer packets.json filen, s\u00e5 den indeholder en dependency til pakken socket.io. Det kan vi selvf\u00f8lgelig tjekke, ved at \u00e5bne package.json og se efter.<\/p>\n
Lad os s\u00e5 g\u00e5 tilbage til server.js filen og tilf\u00f8je f\u00f8lgende:<\/p>\n
\/\/ Importer pakken socket ind i variablen socket\nvar socket = require('socket.io'); \n\n\/\/ Lav en instans af socket objektet, som bruger den server vi lavede tidligere \nvar io = socket(server);<\/pre>\nF\u00f8rst 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\u00e5 port 3000) med som argument.<\/p>\n
Forbindelse p\u00e5 serveren<\/h3>\n
Nu har vi et io (input-output) object, der k\u00f8rer p\u00e5 vores server. Med det kan klienter skabe forbindelse – kontakt – sockets.<\/p>\n
Sockets er “event-baserede”. Det vil sige at det f\u00f8rste vi vil g\u00f8re, er at oprette en funktion som hele tiden venter p\u00e5 at der kommer en klient og vil forbinde sig:<\/p>\n
\/\/ N\u00e5r eventet connection sker, kald funktionen newConnection\nio.sockets.on('connection', newConnection);<\/pre>\n\/\/Implement\u00e9r funktionen newConnection \nfunction newConnection(socket){\n console.log('Ny forbindelse!!');\n}<\/pre>\nOg det betyder alts\u00e5 – n\u00e5r io f\u00e5r en henvendelse om en ny forbindelse “Hey, jeg vil gerne forbinde mig til serveren” – s\u00e5 siger den ok – og kalder funktionen newConnection. Som vi s\u00e5 i f\u00f8rste omgang bare f\u00e5r til at skrive en besked i konsollen.<\/p>\n
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\u00e5 meget vi vil p\u00e5 at klienter forbinder sig – men vi er jo ogs\u00e5 n\u00f8dt til at skrive det javascript p\u00e5 klienten, som g\u00f8r at klienten faktisk pr\u00f8ver at oprette forbindelse.<\/p>\n
Forbindelse fra klienten<\/h3>\n
S\u00e5 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\u00e6re. Og der er ganske rigtigt ingenting, der bare pr\u00f8ver en lille smule p\u00e5 at oprette forbindelse til serveren.<\/p>\n
Pakke\u00a0 socket.io giver os mulighed for at oprette sockets. Men det vi lige skal forst\u00e5 er, at der b\u00e5de er en socket.io server<\/strong> og en socket.io klient<\/strong>. Klient computeren skal have en socket.io klient pakke for at snakke med serveren.<\/p>\n
Det er ikke s\u00e5 m\u00e6rkeligt egentlig. Det er det samme n\u00e5r vi skriver p5.js skitser – s\u00e5 m\u00e5 vi have biblioteket p5.js.<\/p>\n
S\u00e5 lad os se p\u00e5 socket.io’s webside. Der er ganske rigtigt et link til at inkludere socket.io p\u00e5 klientsiden. Copy paste f\u00f8lgende linje ind i index.html:<\/p>\n
<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/socket.io\/2.3.0\/socket.io.js\"><\/script><\/pre>\nBem\u00e6rk at javascriptet ligger p\u00e5 nettet p\u00e5 cdn (content delivery network) – vi kunne godt have downloadet filen og lagt den i vores egen projektmappe, men det her er nemmere.<\/p>\n
Og nu hvor vi har biblioteket importeret i vores javascript, kan vi oprette forbindelse fra sketch.js. Tilf\u00f8j f\u00f8lgende:<\/p>\n
\u00a0 \/\/ Start en socket til en server (HUSK hvis du vil g\u00f8re det over et netv\u00e6rk til en anden computer, skal du skive dens IP)\n socket = io.connect('http:\/\/localhost:3000');<\/pre>\nS\u00e5 vi laver alts\u00e5 en variabel “socket”, og bruger den til at oprette forbindelse til vores helt egen webserver.<\/p>\n
Genstart node med de nye \u00e6ndringer – og kig s\u00e5 i terminalvinduet: den skriver s\u00f8reme “Ny forbindelse”. Og vi kan m\u00e5ske udvide det udsagn lidt, fx ved at skrive lidt mere i server.js funktionen:<\/p>\n
console.log(\"Ny forbindelse: \" + socket.id);<\/pre>\nAlle nye forbindelser f\u00e5r automatisk et id – og det kan v\u00e6re vi skal bruge det senere, n\u00e5r vi vil g\u00f8re ting og sager.<\/p>\n
Det n\u00e6ste – og sidste – vi skal g\u00f8re i denne omgang er, at skrive noget kode som kan sende beskeder fra en klient til serveren – f\u00e5 serveren til at modtage beskeden – og sende den videre til alle de andre klienter. S\u00e5 er vi i m\u00e5l. S\u00e5dan da. Med det f\u00f8rste i hvert fald.<\/p>\n","protected":false},"excerpt":{"rendered":"
Ok. S\u00e5 nu har vi en webserver der k\u00f8rer node og som \u00e5bner vores egen server.js fil og hoster vores skitse i p5 lokalt p\u00e5 port 3000. Nu skal vi tilf\u00f8je det kode som g\u00f8r det muligt for klienter p\u00e5 serveren, at sende beskeder frem og tilbage til hinanden i realtid. Og dermed er vi … L\u00e6s mere <\/a><\/p>\n","protected":false},"author":3,"featured_media":3600,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[36,39],"class_list":["post-3601","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-den-fysiske-verden","tag-p5","tag-sockets"],"_links":{"self":[{"href":"https:\/\/digitalteknik.slotshaven.it\/wordpress\/wp-json\/wp\/v2\/posts\/3601","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digitalteknik.slotshaven.it\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/digitalteknik.slotshaven.it\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/digitalteknik.slotshaven.it\/wordpress\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/digitalteknik.slotshaven.it\/wordpress\/wp-json\/wp\/v2\/comments?post=3601"}],"version-history":[{"count":0,"href":"https:\/\/digitalteknik.slotshaven.it\/wordpress\/wp-json\/wp\/v2\/posts\/3601\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/digitalteknik.slotshaven.it\/wordpress\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/digitalteknik.slotshaven.it\/wordpress\/wp-json\/wp\/v2\/media?parent=3601"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/digitalteknik.slotshaven.it\/wordpress\/wp-json\/wp\/v2\/categories?post=3601"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/digitalteknik.slotshaven.it\/wordpress\/wp-json\/wp\/v2\/tags?post=3601"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}