2 npm

Okay, så vi har installeret node – og vi har fundet ud af at vi kan køre en server via kommandoprompten – og starte en fil vi selv har lavet: server.js. Og det er jo super.

Men på en måde fik vi ikke helt afsluttet hvad en webserver er. Normalt – og også i dette tilfælde – er en webserver en computer (med en adresse på internettet), hvorpå man kan tilgå websider med en klient/browser. Udover at agere socket, er node altså også ansvarlig for – helt basic – at hoste og servere/vise javascript og html filer.

Det kaldes en server af samme grund, node kaldes en service. Servere har altså services – programmer som er klar til at svare på forespørgsler fra klienter. Helt konkret som fx i en browser: Brugeren udfylder en url, som peger direkte på 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å ofte i form af alle mulige andre data og filer.

[otw_shortcode_info_box border_type=”bordered” border_style=”bordered” shadow=”shadow-outer” ]

Node hedder faktisk node.js, men der er ikke tale om en javascript fil selvom navnet antyder det. Node er et såkaldt runtime miljø, en slags protokol på serveren, som hele tiden lytter efter klienters javascriptbaserede interaktion. Man kan også simpelthen kalde node en webserver. Men det er vigtigt at bemærke at node er en webserver, der kører og forstår javascript.

[/otw_shortcode_info_box]

Node er en webserver, og det særlige formål med node er følgende: Normalt kender vi javascript som koder der sendes fra server til klient, og som afvikles på den computer som bruger browseren. Det giver et ekstra led: når man vil kommunikere med serveren via javascript, må man hele tiden opdatere browsersiden for at sende data frem og tilbage. Fordi alt javascript afvikles på klienten. Når serveren kører node, afvikles javascript både på klienten og serveren, og dermed har man helt andre muligheder for at kommunikere i realtid.

Npm

Ligesom andre programmerings miljøer, har node (og i det hele taget javascript) en masse udvidelser og pakker der ikke følger med i core-versionen. Hvis man vil have tilgang til særlige funktioner (kaldet pakker eller biblioteker), downloades og køres de – ligesom node – via et terminalvindue.

Npm er en såkaldt pakkemanager for javascript. Et lille programmeringssprog hvis eneste formål er at hente og opdatere udvidelser til javascript projekter. Lad os prøve at bruge npm i praksis ved at gå ind i terminalen – i det projekt vi arbejder på – og skrive følgende:

npm init

Nu sker der en masse – kort fortalt bliver vi guidet igennem en slags opsætning af node webserveren. Npm init konfigurerer node projektet: Hvilke biblioteker og pakker skal kunne tilgås, hvilken version osv.

[otw_shortcode_info_box border_type=”bordered” border_style=”bordered” shadow=”shadow-outer”]

By the way, npm kommer normalt med node – men skulle du ikke have fået installeret npm (så virker npm init jo ikke), så læs og installer her.

[/otw_shortcode_info_box]

Det kan virke noget komplekst – det er komplekst – at vi skal lave en konfigurationsfil før vi overhovedet har skrevet en eneste linje kode. Men bær over med kompleksiteten og følg foreløbig bare med i dette indledende eksempel. Har du først forstået hvordan node.js sættes op og bruges med npm, er du i gang med at give dine webprojekter superkræfter, og mulighederne herefter er talrige.

Vi får i sidste linje at vide, at vores projekt har et navn: sockets_1 – fint. [enter]. Derefter:

version: 1.0.0 [enter]
description: Projekt der illustrerer opsætning af node sockets 
entry point: (sketch.js) server.js
test command: 
git repository: 
keywords: Javascript, Sockets, Node.js
author: Dig Svendsen
license: (ISC) 
About to write to /Users/simon/Git/digidaktik/sockets/sockets_1/package.json:

{
  "name": "sockets_1",
  "version": "1.0.0",
  "description": "Projekt der illustrerer opsætning af node sockets ",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "keywords": [
    "Javascript",
    "Sockets",
    "Node.js"
  ],
  "author": "Dig Svendsen",
  "license": "ISC"
}


Is this ok? (yes) yes
Simons-MacBook-Pro:sockets_1 sim$ 

OK -så det der skete her var – og det kan også se i filmappen til projektet – at der blev lavet en ny fil: package.json. Vi skal ikke dække json formatet her, lad os blot sige at det er en struktureret måde at sætte data op på. Hvis vi åbner filen, kan vi se at indholdet er nøjagtig 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.

Express package

Express er en pakke der udvider nodes funktionalitet. Vi skal bruge den i praksis om lidt – men først må vi importere pakken til projektet. Der skal altså stå et eller andet sted i package.json, at projektet er afhængigt (engelsk: dependencies) af pakken express. Så lad os se hvordan man bruger npm til at installere express og samidig skrive i package.json at projektet bruger pakken:

npm install express --save
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN sockets_1@1.0.0 No repository field.

+ express@4.16.4
added 48 packages in 2.878s
Simons-MacBook-Pro:sockets_1 sim$ 

-hvor –save kort sagt betyder, at vi udover at installere pakken på systemet, også 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.

Du vil også bemærke at selve mappen med projektet nu har en ny folder: node_modules. I denne mappe ligger express pakken  fysisk, det er her projektet finder sine udvidelser (ligesom vi kender det fra vores egne javascript projekter).

Tilbage til server.js

Godt! (og ja, det er indtil nu noget af det mest kedsommelige og drævne vi længe har foretaget os), nu er vi omsider klar til at skrive noget kode. Nærmere bestemt vil vi skrive den javascript kode, som skal ligge på vores server. Indtil nu er filen tom, bortset fra vores debug statement.

Vi skal nu skrive den kode, som gør det muligt for programmet at agere webserver for vores p5 projekt.
// Vi bruger pakken express: http://expressjs.com/
var express = require('express');
// Vi laver en variabel - app - som instantierer et express objekt:
var app = express();
// Vi laver en variabel - server - som lytter efter klienter på port 3000
var server = app.listen(3000);

Vi opretter først 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å port 3000.

Det kunne have været en mere interessant server end bare port 3000 på denne maskine – det kunne . have været på dr.dk, viaplay.com – you name it.. men vi har startet en webserver, og det er da noget.

Men okay serveren svarer stadig mærkeligt – kig i browseren:

Cannot GET /

Det som serveren siger, er egentlig bare at den ikke ved hvad den skal gøre. Der er ingen instruktioner, ingen filer eller kald den bliver bedt om at tage sig af, så den kaster en fejlmeddelelse.

Lad os hoste nogle filer

Så hvad er det vi vil have skal ske? Jo, den absolut vigtigste funktion for webserveren – i dette projekt – skal jo være 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:

Før

Efter…

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ære  tåbeligt – men vi vil netop have at webserveren skal køre og vise vores javascript projekt i p5. Tilføj derefter denne kodelinje til server.js:

// Vis de statiske filer i mappen public, når der kommer en klient 
app.use(express.static('public'));

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.

[otw_shortcode_info_box border_type=”bordered” border_style=”bordered” shadow=”shadow-outer”]Vi kan lynhurtigt gøre websiden mere interessant ved faktisk at skrive noget javascript i sketch.js. For eksempel noget standardkode, som får musen til at vise en cirkel..[/otw_shortcode_info_box]

Opsamling

Nu  ved du hvordan man starter en webserver på sin egen computer, og vi kan rent faktisk se at den kører ved at skrive localhost:3000 – i browseren. Den viser de filer vi har bedt den om, og det fungerer. Det næste vi skal gøre, er at lave sockets – som gør det muligt for klienter at sende beskeder frem og tilbage fra serveren.

Leave a comment

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