{"id":3579,"date":"2018-10-10T15:30:42","date_gmt":"2018-10-10T13:30:42","guid":{"rendered":"https:\/\/moe.it.slotshaven.dk\/wp\/?p=3579"},"modified":"2018-10-10T15:30:42","modified_gmt":"2018-10-10T13:30:42","slug":"websockets-introduktion-til-node-med-p5-js","status":"publish","type":"post","link":"https:\/\/digitalteknik.slotshaven.it\/wordpress\/websockets-introduktion-til-node-med-p5-js\/","title":{"rendered":"1 node.js"},"content":{"rendered":"<p>Hvis du er kommet til dette indl\u00e6g, har du formentlig pr\u00f8vet at eksperimentere med p5.js og javascript kode i forskellige sammenh\u00e6nge. Det du skal l\u00e6re nu, er en metode som g\u00f8r det muligt<strong> for flere personer at bruge dine sketches samtidigt<\/strong>. Alts\u00e5 flere personer kunne i princippet sidde forskellige steder i verden og tegne p\u00e5 den samme tegning via deres browser.<\/p>\n<p>Det kunne for eksempel bruges til&#8230;<\/p>\n<ul>\n<li>At lave spil med samtidighed<\/li>\n<li>At skrive\/tegne\/spille musik sammen<\/li>\n<li>At styre devices\/lys\/robotter fra et andet sted<\/li>\n<\/ul>\n<p>Etc.. Samtidighed og kommunikation via Internettet er p\u00e5 mange m\u00e5der netop Internettets fineste egenskab.<\/p>\n<p>[otw_shortcode_info_box border_type=&#8221;bordered&#8221; border_style=&#8221;bordered&#8221; shadow=&#8221;shadow-outer&#8221;]<\/p>\n<p>Dette forl\u00f8b bygger p\u00e5 et video-baseret forl\u00f8b af Daniel Shiffman, professor ved NYU. Du kan f\u00f8lge min danske &#8211; tekstbaserede &#8211; udgave, eller den engelske ved at f\u00f8lge linket herunder. Your choice &#8211; men han er en fantastisk god formidler \ud83d\ude42<br \/>\n<a href=\"https:\/\/www.youtube.com\/watch?v=bjULmG8fqc8\">Se introvideo her <\/a><br \/>\nNode: <a class=\"yt-simple-endpoint style-scope yt-formatted-string\" spellcheck=\"false\" href=\"https:\/\/www.youtube.com\/redirect?v=bjULmG8fqc8&amp;redir_token=yRKQ-u65586Ax7gsYViPl4eD5918MTUzOTI1OTI0OEAxNTM5MTcyODQ4&amp;event=video_description&amp;q=https%3A%2F%2Fnodejs.org%2Fen%2F\" rel=\"nofollow\">https:\/\/nodejs.org\/en\/<\/a><br \/>\nSocket.io: <a class=\"yt-simple-endpoint style-scope yt-formatted-string\" spellcheck=\"false\" href=\"https:\/\/www.youtube.com\/redirect?v=bjULmG8fqc8&amp;redir_token=yRKQ-u65586Ax7gsYViPl4eD5918MTUzOTI1OTI0OEAxNTM5MTcyODQ4&amp;event=video_description&amp;q=http%3A%2F%2Fsocket.io%2F\" rel=\"nofollow\">http:\/\/socket.io\/<\/a><br \/>\nExpress: <a class=\"yt-simple-endpoint style-scope yt-formatted-string\" spellcheck=\"false\" href=\"https:\/\/www.youtube.com\/redirect?v=bjULmG8fqc8&amp;redir_token=yRKQ-u65586Ax7gsYViPl4eD5918MTUzOTI1OTI0OEAxNTM5MTcyODQ4&amp;event=video_description&amp;q=http%3A%2F%2Fexpressjs.com%2F\" rel=\"nofollow\">http:\/\/expressjs.com\/<\/a><\/p>\n<p>[\/otw_shortcode_info_box]<\/p>\n<h2>Sockets<\/h2>\n<p>Vi vil have to computere &#8211; eller flere &#8211; til at tale med hinanden. Og det kan lade sig g\u00f8re p\u00e5 grund af internettet. De g\u00f8r det gennem et m\u00f8depunkt &#8211; en server. P\u00e5 serveren k\u00f8rer der en service &#8211; her kaldet node.js &#8211; som s\u00f8rger for at computerne i netv\u00e6rket kan oprette forbindelser &#8211; sockets &#8211; til hinanden. Du l\u00e6rer faktisk at skrive koden til serveren selv &#8211; og at k\u00f8re den p\u00e5 din egen computer. N\u00e5r du er f\u00e6rdig med disse fire lektioner har du en webserver p\u00e5 din lokale maskine &#8211; som du kan tilg\u00e5 med flere forskellige browservinduer &#8211; som taler sammen via sockets. Det er da rimelig cool ikke? Lad os g\u00e5 i gang&#8230;<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/docs.google.com\/drawings\/d\/e\/2PACX-1vS74vv2o_ge_GUYqUCW83epaGtJTg7IA9Y0Y8Z72EooOcv3tZ0nlK3ia8u23mdGB71YwMUedbvvv-5M\/pub?w=960&amp;h=720\" \/><\/p>\n<h2>Kan jeg g\u00f8re det selv?<\/h2>\n<p>Du kan f\u00e5 din egen maskine til at agere webserver ved at installere node.js p\u00e5 den. Bagefter kan du skabe alle mulige programmer som taler til hinanden via sockets. Det f\u00f8rste du skal g\u00f8re, er at downloade node.js.<\/p>\n<p>I dette eksempel vil vi alts\u00e5 have vores egen maskine til B\u00c5DE at v\u00e6re to forskellige programmer der taler til hinanden vha sockets OG webserver. I virkelige applikationer, vil det typisk v\u00e6re sjovere at fordele programmerne p\u00e5 forskellige maskiner, men f\u00f8rst m\u00e5 vi have princippet til at virke.<\/p>\n<h2>Install\u00e9r node.js<\/h2>\n<p><a href=\"https:\/\/nodejs.org\/en\/\">Hent og installer node.js herfra\u00a0<\/a><\/p>\n<p><a href=\"https:\/\/flaviocopes.com\/page\/node-handbook\/\">Bliv meget klogere p\u00e5 node.js her<\/a><\/p>\n<p><strong>\u00c5bn Terminal (mac) eller Command (win)<\/strong><\/p>\n<p>Terminalvinduet eller kommandoprompten kan der siges meget om. Men lad os bare her sige, at det er et sted hvor du kan give din computer kommandoer direkte, en slags kontrolcenter. Som du kan se \u00e5bner terminalen i en eller anden hjemmemappe. Hvis du er p\u00e5 windows kunne den hedde noget med C:\/windos\/users\/dig og p\u00e5 en mac noget lignende. Det er ikke s\u00e5 vigtigt &#8211; men det er vigtigt at du lige holder \u00f8je med hvor du er henne i filsystemet, n\u00e5r du bruger terminalvinduet.<\/p>\n<p>Hvis du trykker ls [enter] ser du en filoversigt. Hvis du trykker open . [enter], \u00e5bner den mappe du st\u00e5r i. Hvis du trykker ctrl-c lukker du en proces, hvis du har \u00e5bnet en. Og meget mere.<\/p>\n<p>F\u00f8rst og fremmest vil vi gerne se om node er installeret. Skriv derfor node [enter]. Nu skal du se en lille pil ud for cursoren. Og m\u00e6rkeligt nok er terminalen nu, blevet til et sted hvor du kan skrive javascript. Du kan fx skrive&#8230;<\/p>\n<pre><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3610\" src=\"https:\/\/moe.it.slotshaven.dk\/wp\/wp-content\/uploads\/2018\/10\/terminal-1024x667.jpeg\" alt=\"\" width=\"1024\" height=\"667\" \/><\/pre>\n<p>etc.. Pointen er alts\u00e5 at du nu har startet programmet\u00a0<strong>node<\/strong>, og du kan se at den forst\u00e5r Javascript kommandoer.<\/p>\n<p>(Forresten tast ctrl-c for at komme ud af node igen og tilbage i terminalvinduet).<\/p>\n<p>Du er alts\u00e5 ude af node og tilbage i terminalen. Vi skal nu finde frem til den folder hvor vores projekt ligger. Tryk f\u00f8rst cd (det betyder change directory p\u00e5 terminalsprog) og drag&#8217;n&#8217;drop s\u00e5 selve mappen med eksempelfilerne i over p\u00e5 terminalvinduet [enter].<\/p>\n<p><a href=\"https:\/\/minhaskamal.github.io\/DownGit\/#\/home?url=https:\/\/github.com\/simmoe\/digidaktik\/tree\/master\/sockets\/sockets_1\">Hent eksempelfilerne her<\/a><\/p>\n<p>Du har nu navigeret dig frem til den mappe, hvori eksemplerne ligger. Vi kan\u00a0<strong>tjekke<\/strong> hvad der er i den mappe, ved at trykke kommandoen &#8220;ls&#8221;. S\u00e5 viser den, at de filer der ligger i mappen hedder index.hml og sketch.js.<\/p>\n<p>Vi skal nu skrive vores egen webserver(!)<\/p>\n<p>Opret en fil der hedder server.js og l\u00e6g den i mappen med de andre to filer. Skriv s\u00e6tningen..<\/p>\n<pre>console.log(\"Min socketserver er oppe og k\u00f8re\");\n<\/pre>\n<p>..i filen og gem den. Det er den nu ikke endnu (oppe at k\u00f8re alts\u00e5). Men vi kan teste at vi nu har node installeret og kan starte en proces, ved at g\u00e5 tilbage i terminalen og taste<\/p>\n<pre>node server.js<\/pre>\n<p>&#8211; nu vil <em>node<\/em> s\u00e5 k\u00f8re filen, og dermed printe &#8220;min socketserver er oppe og k\u00f8re&#8221;<\/p>\n<p>Dermed er f\u00f8rste skridt p\u00e5 vejen til at blive en webninja aktiveret. Du har faktisk lavet en lille webserver &#8211; og den svarer n\u00e5r du sp\u00f8rger. G\u00e5 videre til n\u00e6ste lektion for at f\u00e5 den til at opf\u00f8re sig lidt mere som en rigtig webserver &#8211; alts\u00e5 en computer som svarer p\u00e5 internettet, n\u00e5r en klient kommer og beder om at se et eller andet.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hvis du er kommet til dette indl\u00e6g, har du formentlig pr\u00f8vet at eksperimentere med p5.js og javascript kode i forskellige sammenh\u00e6nge. Det du skal l\u00e6re nu, er en metode som g\u00f8r det muligt for flere personer at bruge dine sketches samtidigt. Alts\u00e5 flere personer kunne i princippet sidde forskellige steder i verden og tegne p\u00e5 &#8230; <a title=\"1 node.js\" class=\"read-more\" href=\"https:\/\/digitalteknik.slotshaven.it\/wordpress\/websockets-introduktion-til-node-med-p5-js\/\" aria-label=\"Read more about 1 node.js\">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":[39],"class_list":["post-3579","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-den-fysiske-verden","tag-sockets"],"_links":{"self":[{"href":"https:\/\/digitalteknik.slotshaven.it\/wordpress\/wp-json\/wp\/v2\/posts\/3579","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=3579"}],"version-history":[{"count":0,"href":"https:\/\/digitalteknik.slotshaven.it\/wordpress\/wp-json\/wp\/v2\/posts\/3579\/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=3579"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/digitalteknik.slotshaven.it\/wordpress\/wp-json\/wp\/v2\/categories?post=3579"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/digitalteknik.slotshaven.it\/wordpress\/wp-json\/wp\/v2\/tags?post=3579"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}