Det kaldes en server af samme grund, node<\/em> kaldes en service.\u00a0Servere har alts\u00e5 services – programmer som er klar til at svare p\u00e5 foresp\u00f8rgsler fra klienter. Helt konkret som fx i en browser: Brugeren udfylder en url, som peger direkte p\u00e5 den server man vil have svar fra, og (via en eller anden protokol) giver serveren data tilbage. Ofte i form af html, javascript og css filer som vi kender det, men i virkeligheden lige s\u00e5 ofte i form af alle mulige andre data og filer.<\/p>\n [otw_shortcode_info_box border_type=”bordered” border_style=”bordered” shadow=”shadow-outer” ]<\/p>\n Node hedder faktisk node.js, men der er ikke tale om en javascript fil selvom navnet antyder det. Node er et s\u00e5kaldt\u00a0runtime<\/em> milj\u00f8, en slags protokol p\u00e5 serveren, som hele tiden lytter efter klienters javascriptbaserede interaktion. Man kan ogs\u00e5 simpelthen kalde node en webserver<\/strong>. Men det er vigtigt at bem\u00e6rke at node er en webserver, der k\u00f8rer og forst\u00e5r javascript.<\/p>\n [\/otw_shortcode_info_box]<\/p>\n Node er en webserver, og det s\u00e6rlige form\u00e5l med node er f\u00f8lgende: Normalt kender vi javascript som koder der sendes fra server til klient, og som afvikles p\u00e5 den computer som bruger browseren. Det giver et ekstra led: n\u00e5r man vil kommunikere med serveren via javascript, m\u00e5 man hele tiden opdatere browsersiden for at sende data frem og tilbage. Fordi alt javascript afvikles p\u00e5 klienten.<\/strong> N\u00e5r serveren k\u00f8rer node, <\/em>afvikles javascript\u00a0b\u00e5de<\/em> p\u00e5 klienten og serveren, og dermed har man helt andre muligheder for at kommunikere i realtid.<\/p>\n Ligesom andre programmerings milj\u00f8er, har node (og i det hele taget javascript) en masse udvidelser og pakker der ikke f\u00f8lger med i core-versionen. Hvis man vil have tilgang til s\u00e6rlige funktioner (kaldet pakker eller biblioteker), downloades og k\u00f8res de – ligesom node – via et terminalvindue.<\/p>\n Npm er en s\u00e5kaldt pakkemanager<\/em> for javascript. Et lille programmeringssprog hvis eneste form\u00e5l er at hente og opdatere udvidelser til javascript projekter. Lad os pr\u00f8ve at bruge npm i praksis ved at g\u00e5 ind i terminalen – i det projekt vi arbejder p\u00e5 – og skrive f\u00f8lgende:<\/p>\n Nu sker der en masse – kort fortalt bliver vi guidet igennem en slags ops\u00e6tning af node webserveren. Npm init konfigurerer node projektet: Hvilke biblioteker og pakker skal kunne tilg\u00e5s, hvilken version osv.<\/p>\n [otw_shortcode_info_box border_type=”bordered” border_style=”bordered” shadow=”shadow-outer”]<\/p>\n By the way, npm kommer normalt med node – men skulle du ikke have f\u00e5et installeret npm (s\u00e5 virker npm init jo ikke), s\u00e5 l\u00e6s og installer her<\/a>.<\/p>\n [\/otw_shortcode_info_box]<\/p>\n Det kan virke\u00a0noget\u00a0<\/em>komplekst – det\u00a0er\u00a0<\/strong>komplekst – at vi skal lave en konfigurationsfil f\u00f8r vi overhovedet har skrevet en eneste linje kode. Men b\u00e6r over med kompleksiteten og f\u00f8lg forel\u00f8big bare med i dette indledende eksempel. Har du f\u00f8rst forst\u00e5et hvordan node.js<\/strong> s\u00e6ttes op og bruges med npm<\/strong>, er du i gang med at give dine webprojekter superkr\u00e6fter, og mulighederne herefter er talrige.<\/p>\n Vi f\u00e5r i sidste linje at vide, at vores projekt har et navn: sockets_1 – fint. [enter]. Derefter:<\/p>\n OK -s\u00e5 det der skete her var – og det kan ogs\u00e5 se i filmappen til projektet – at der blev lavet en ny fil: package.json. Vi skal ikke d\u00e6kke json formatet her, lad os blot sige at det er en struktureret m\u00e5de at s\u00e6tte data op p\u00e5. Hvis vi \u00e5bner filen, kan vi se at indholdet er n\u00f8jagtig det som npm foreslog til sidst. Projektet har nu en konfigurationsfil – package.json – der indeholder en masse metaoplysninger om det: hvem har lavet det, hvilken version er det osv – og ikke mindst: hvilke eksterne pakker skal projektet have adgang til.<\/p>\n Express er en pakke der udvider nodes funktionalitet. Vi skal bruge den i praksis om lidt – men f\u00f8rst m\u00e5 vi importere pakken til projektet. Der skal alts\u00e5 st\u00e5 et eller andet sted i package.json, at projektet er afh\u00e6ngigt (engelsk: dependencies) af pakken express. S\u00e5 lad os se hvordan man bruger npm til at installere\u00a0express\u00a0<\/em>og samidig skrive i package.json at projektet bruger pakken:<\/p>\n -hvor –save kort sagt betyder, at vi udover at installere pakken p\u00e5 systemet, ogs\u00e5 vil bruge den i det specifikke projekt. Og se engang i filen package.json. Der er nu kommet en pind ved navn dependencies – og her ser vi at express pakken er taget med.<\/p>\n Du vil ogs\u00e5 bem\u00e6rke at selve mappen med projektet nu har en ny folder: node_modules. I denne mappe ligger express pakken\u00a0 fysisk, det er her projektet finder sine udvidelser (ligesom vi kender det fra vores egne javascript projekter).<\/p>\n Godt! (og ja, det er indtil nu noget af det mest kedsommelige og dr\u00e6vne vi l\u00e6nge har foretaget os), nu er vi omsider klar til at skrive noget kode. N\u00e6rmere bestemt vil vi skrive den javascript kode, som skal ligge p\u00e5 vores server. Indtil nu er filen tom, bortset fra vores debug statement.<\/p>\n Vi opretter f\u00f8rst en variabel (express) som importerer express-pakken. Bagefter laver vi en instans af dette objekt i variable “app”. Endelig laver vi et konkret server objekt som lytter p\u00e5 port 3000.<\/p>\n Det kunne<\/em> have v\u00e6ret en mere interessant server end bare port 3000 p\u00e5 denne maskine – det kunne . have v\u00e6ret p\u00e5 dr.dk, viaplay.com – you name it.. men vi har startet en webserver, og det er da noget.<\/p>\n Men okay serveren svarer stadig m\u00e6rkeligt – kig i browseren:<\/p>\n Det som serveren siger, er egentlig bare at den ikke ved hvad den skal g\u00f8re. Der er ingen instruktioner, ingen filer eller kald den bliver bedt om at tage sig af, s\u00e5 den kaster en fejlmeddelelse.<\/p>\n S\u00e5 hvad er det vi vil have skal ske? Jo, den absolut vigtigste funktion for webserveren – i dette projekt – skal jo v\u00e6re at vise vores p5.js sketch. Lad os lige omrokere filerne i projektmappen lidt – vi laver en folder der hedder “public”, og flytter alle de p5 relaterede filer over i den mappe:<\/p>\n Mappen “public” indeholder de filer vi vil have webserveren til at vise udadtil. Vi vil ikke vise alle og enhver vores serverside scripts – det ville v\u00e6re\u00a0 t\u00e5beligt – men vi vil netop have at webserveren skal k\u00f8re og vise vores javascript projekt i p5. Tilf\u00f8j derefter denne kodelinje til server.js:<\/p>\n Det som den linje betyder er, at app’en skal bruge filerne i “public” mappen som statiske filer der fremvises til klienter. Og hvis vi nu gemmer server.js og genstarter den med node, kan vi se at browservinduet holder op med at give en fejl. I stedet kan vi se javascriptet fra sketch.js. Jep.<\/p>\n [otw_shortcode_info_box border_type=”bordered” border_style=”bordered” shadow=”shadow-outer”]Vi kan lynhurtigt g\u00f8re websiden mere interessant ved faktisk at skrive noget javascript i sketch.js. For eksempel noget standardkode, som f\u00e5r musen til at vise en cirkel..[\/otw_shortcode_info_box]<\/p>\n Nu\u00a0 ved du hvordan man starter en webserver p\u00e5 sin egen computer, og vi kan rent faktisk se at den k\u00f8rer ved at skrive localhost:3000 – i browseren. Den viser de filer vi har bedt den om, og det fungerer. Det n\u00e6ste vi skal g\u00f8re, er at lave sockets – som g\u00f8r det muligt for klienter at sende beskeder frem og tilbage fra serveren.<\/p>\n","protected":false},"excerpt":{"rendered":" Okay, s\u00e5 vi har installeret node – og vi har fundet ud af at vi kan k\u00f8re en server via kommandoprompten – og starte en fil vi selv har lavet: server.js. Og det er jo super. Men p\u00e5 en m\u00e5de fik vi ikke helt afsluttet hvad en webserver er. Normalt – og ogs\u00e5 i dette … 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-3586","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\/3586","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=3586"}],"version-history":[{"count":0,"href":"https:\/\/digitalteknik.slotshaven.it\/wordpress\/wp-json\/wp\/v2\/posts\/3586\/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=3586"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/digitalteknik.slotshaven.it\/wordpress\/wp-json\/wp\/v2\/categories?post=3586"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/digitalteknik.slotshaven.it\/wordpress\/wp-json\/wp\/v2\/tags?post=3586"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Npm<\/h2>\n
npm init\n<\/pre>\n
version: 1.0.0 [enter]\ndescription: Projekt der illustrerer ops\u00e6tning af node sockets \nentry point: (sketch.js) server.js\ntest command: \ngit repository: \nkeywords: Javascript, Sockets, Node.js\nauthor: Dig Svendsen\nlicense: (ISC) \nAbout to write to \/Users\/simon\/Git\/digidaktik\/sockets\/sockets_1\/package.json:\n\n{\n \"name\": \"sockets_1\",\n \"version\": \"1.0.0\",\n \"description\": \"Projekt der illustrerer ops\u00e6tning af node sockets \",\n \"main\": \"server.js\",\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\",\n \"start\": \"node server.js\"\n },\n \"keywords\": [\n \"Javascript\",\n \"Sockets\",\n \"Node.js\"\n ],\n \"author\": \"Dig Svendsen\",\n \"license\": \"ISC\"\n}\n\n\nIs this ok? (yes) yes\nSimons-MacBook-Pro:sockets_1 sim$ \n<\/pre>\nExpress package<\/h2>\n
npm install express --save\nnpm notice created a lockfile as package-lock.json. You should commit this file.\nnpm WARN sockets_1@1.0.0 No repository field.\n\n+ express@4.16.4\nadded 48 packages in 2.878s\nSimons-MacBook-Pro:sockets_1 sim$ \n<\/pre>\n
Tilbage til server.js<\/h2>\n
\/\/ Vi bruger pakken express: http:\/\/expressjs.com\/\nvar express = require('express');<\/pre>\n\/\/ Vi laver en variabel - app - som instantierer et express objekt:\nvar app = express();<\/pre>\n
\/\/ Vi laver en variabel - server - som lytter efter klienter p\u00e5 port 3000\nvar server = app.listen(3000);<\/pre>\n
Cannot GET \/<\/pre>\n
Lad os hoste nogle filer<\/h2>\n
F\u00f8r<\/h3>\n
![\"\"](\"https:\/\/moe.it.slotshaven.dk\/wp\/wp-content\/uploads\/2018\/10\/1.jpeg\")
<\/p>\nEfter…<\/h3>\n
![\"\"](\"https:\/\/moe.it.slotshaven.dk\/wp\/wp-content\/uploads\/2018\/10\/2.jpeg\")
<\/p>\n\/\/ Vis de statiske filer i mappen public, n\u00e5r der kommer en klient \napp.use(express.static('public'));<\/pre>\n<\/div>\nOpsamling<\/h2>\n