S\u00e5 er vi n\u00e6sten i m\u00e5l. Vi har skrevet koden til en lille webserver vi kan starte og k\u00f8re, og vi har oprettet forbindelse med en klient – som har f\u00e5et sit helt eget id. Vi kan \u00e5bne to forskellige browservinduer og forbinde til serveren – og i terminalvinduet kan vi de f\u00e5r forbindelse begge to. Men hvis vi tegner noget p\u00e5 dene, vil vi kunne se det p\u00e5 den anden. Det er det vi skal frem til.<\/p>\n
Vi starter med klienten – og g\u00e5r alts\u00e5 ind i sketch.js. Her implementerer vi funktionen mouseDragged, s\u00e5 vi kan sende beskeder n\u00e5r brugeren klikker for at tegne. Flyt koden som tegner ellipser ind i funktionen mouseDragged():<\/p>\n
function mouseDragged(){\n ellipse(mouseX, mouseY, 40,40);\n \/\/Og send s\u00e5 besked til serveren om hvor musen var henne...\n}<\/pre>\nVi skal alts\u00e5 sende beskeder til serveren. Og det g\u00f8r vi i to trin: f\u00f8rst laver vi de data vi vil sende om til en variabel. Bagefter sender vi de data. Udvid funktionen med f\u00f8lgende:<\/p>\n
function mouseDragged(){\n ellipse(mouseX, mouseY, 40,40);\n \/\/Og send s\u00e5 besked til serveren om hvor musen var henne...\n var data = {\n x: mouseX,\n y: mouseY\n }\n \/\/Send skidtet afsted med navnet \"mus\" (valgfrit, men beskeden skal have et navn)\n socket.emit('mus', data);\n console.log(\"Sender besked: \" + mouseX + \", \" + mouseY);\n}<\/pre>\nS\u00e5 nu kan vi se – og vi kan tjekke i browserens konsol – at klienten sender beskeder n\u00e5r musen tr\u00e6kkes. Men p\u00e5 serveren sker der ikke noget endnu, for vi har ikke skrevet den kode der skal modtage beskederne.<\/p>\n
Modtag beskederne p\u00e5 serveren<\/h2>\n
Lad os g\u00e5 tilbage til server.js, og funktionen newConnection<\/strong>, som vi var ved at skrive. Tilf\u00f8j f\u00f8lgende linjer:<\/p>\n\/\/ N\u00e5r der kommer beskeder ved navn 'mus', kald en funktion, mouseMsg()\nsocket.on('mus', mouseMsg);<\/pre>\nfunction mouseMsg(data){\n console.log(data);\n}<\/pre>\nDet vi fort\u00e6ller serveren er, at den skal vente p\u00e5 beskeder ved navn “mus”, og n\u00e5r den f\u00e5r dem skal den kalde funktionen mouseMsg. Den laver vi s\u00e5 (OBS lav funktionen inde i newConnection, direkte under socket.on):<\/p>\n
Alts\u00e5 har vi nu en klient som sender beskeder – og en server som modtager dem. Genstart node. \u00c5bn terminalvinduet og browserens konsol samtidig – s\u00e5 kan du selv se. S\u00e5: beskederne kommer hen til serven – men nu skal de tilbage igen til de andre klienter! Og s\u00e5 skal vi lige huske at det kun skal v\u00e6re til de andre klienter – ikke den klient der tegner selv – det ville give et uendeligt loop.<\/p>\n
Udvid funktionen mouseMsg, s\u00e5 den indeholder f\u00f8lgende:<\/p>\n
function mouseMsg(data){\n console.log(data);\n \/\/sockets.emit('mus', data); \/\/hvis du vil sende til alle, ogs\u00e5 den klient der sendte selv\n \/\/Eller n\u00e5r du kun vil sende til \"de andre\":\n socket.broadcast.emit('mus', data); \n}\n\n<\/pre>\nModtag beskeder p\u00e5 klienter<\/h2>\n
S\u00e5 nu sender vi beskeden videre til alle andre. Det SIDSTE vi\u00a0 mangler at g\u00f8re er nu, at modtage beskederne p\u00e5 klienten igen og g\u00f8re noget med dem – aka tegne de andres tegninger. Okay tilbage til sketch.js og funktionen setup().<\/strong> Udvid den med linjen:<\/p>\n\n\u00a0 \/\/ N\u00e5r der kommer beskeder p\u00e5 din socket, ved navn 'mus': kald funktionen newDrawing()\n socket.on('mus', newDrawing);\n \/\/ Og brug funktionen til at tegne nye cirkler\n function newDrawing(data) {\n console.log(\"Fik: \" + data.x + \" \" + data.y);\n \/\/ Fx bl\u00e5\n fill(0, 140, 255);\n ellipse(data.x, data.y, 40, 40);\n }<\/pre>\n<\/div>\nS\u00e5 vi siger alts\u00e5 nu at klienten skal lytte efter beskeder med emnet “mus” og s\u00e5 kalde en funktion der hedder newDrawing, hvis der kommer noget.<\/p>\n
That’s it folks.<\/p>\n
Hent f\u00e6rdigt projekt her\u00a0<\/a><\/p>\n
\nHent f\u00e6rdig kode (engelsk, oprindelig) her\u00a0<\/a><\/p>\nEller se p\u00e5 github:\u00a0https:\/\/github.com\/simmoe\/digidaktik\/tree\/master\/sockets\/sockets_done<\/p>\n","protected":false},"excerpt":{"rendered":"
S\u00e5 er vi n\u00e6sten i m\u00e5l. Vi har skrevet koden til en lille webserver vi kan starte og k\u00f8re, og vi har oprettet forbindelse med en klient – som har f\u00e5et sit helt eget id. Vi kan \u00e5bne to forskellige browservinduer og forbinde til serveren – og i terminalvinduet kan vi de f\u00e5r forbindelse begge … 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-3603","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\/3603","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=3603"}],"version-history":[{"count":0,"href":"https:\/\/digitalteknik.slotshaven.it\/wordpress\/wp-json\/wp\/v2\/posts\/3603\/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=3603"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/digitalteknik.slotshaven.it\/wordpress\/wp-json\/wp\/v2\/categories?post=3603"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/digitalteknik.slotshaven.it\/wordpress\/wp-json\/wp\/v2\/tags?post=3603"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}