Wat is een webserver?

Een webserver is een programma dat luistert naar inkomende verzoeken via het netwerk en antwoorden terugstuurt.

• Luistert op een poortnummer (bijv. 3000 of 80)
• Gebruikt het HTTP-protocol om te communiceren
• Ontvangt verzoeken van clients (bijv. browsers)
• Stuurt antwoorden terug: tekst, HTML, JSON, afbeeldingen, ...

Webserver en browser

Een browser is een client die een verzoek stuurt naar de server.

Voorbeeld:

1. Je typt http://localhost:3000 in je browser.
2. De browser stuurt een HTTP-verzoek naar je server.
3. De server ontvangt dit verzoek, verwerkt het en stuurt een antwoord terug.
4. De browser toont het antwoord op het scherm.

Wat doet Node.js hier?

• Node.js kan een webserver draaien zonder extra software.
• We gebruiken de ingebouwde http-module.
• Node zorgt ervoor dat we luisteren op een poort en antwoorden sturen.

import http from "http";

HTTP in het kort

HTTP staat voor HyperText Transfer Protocol.

• De taal waarmee clients en servers praten.
• Bestaat uit verzoeken (requests) en antwoorden (responses).

HTTP-verzoek

Een HTTP-verzoek is wat de browser naar de server stuurt.

GET /about HTTP/1.1 Host: localhost:3000 User-Agent: Mozilla/5.0 Accept: text/html

• GET: de methode (bijv. GET, POST)
• /about: het pad (route)
• Headers: extra info over het verzoek
• Body: optioneel, vooral bij POST- en PUT-verzoeken

HTTP-respons

Een HTTP-respons is wat de server terugstuurt naar de client.

HTTP/1.1 200 OK Content-Type: text/html; charset=utf-8

Welkom
Dit is mijn website

• Statusregel: 200 OK betekent dat alles goed ging
• Headers: info over de respons, zoals Content-Type
• Body: de echte inhoud (HTML, JSON, …)

HTTP-methoden

Belangrijkste HTTP-methoden:

• GET — vraag data op
• POST — stuur data naar de server
• PUT — vervang bestaande data
• DELETE — verwijder data

Wij gaan voorlopig vooral werken met GET en POST.

HTTP-statuscodes

Statuscodes vertellen de browser wat er gebeurde:

• 200 OK — alles is goed gegaan
• 301 Moved Permanently — doorverwijzing
• 404 Not Found — pagina niet gevonden
• 500 Internal Server Error — serverfout

Samenvatting HTTP

• HTTP = de manier waarop browsers en servers praten
• Verzoek → methode, pad, headers, optionele body
• Respons → status, headers, body
• Wij gaan dit zelf op laag niveau bouwen met Node.js

Aller-eerste server

We gaan onze eerste webserver maken met Node.js.

• We gebruiken de ingebouwde http-module
• We maken een server die altijd hetzelfde antwoord terugstuurt
• We starten de server op poort 3000

Stap 1 — http importeren

Node heeft een ingebouwde http-module voor het maken van servers.

import http from "http"

Dit is alles wat je nodig hebt — geen extra installatie nodig!

Stap 2 — Server aanmaken

We gebruiken http.createServer() om een serverobject te maken.

const server = http.createServer((req, res) => {
    // Hier reageren we op het verzoek
  });

• req = request object: info over het verzoek
• res = response object: hiermee sturen we antwoord terug

Stap 3 — Statuscode en headers

Een respons heeft een statuscode en headers. Hier stellen we ze in:

  const server = http.createServer((req, res) => {
    res.statusCode = 200; // 200 = OK
    res.setHeader('Content-Type', 'text/plain; charset=utf-8');
  });

• Statuscode: vertelt of de aanvraag goed ging (200)
• Content-Type: vertelt de browser welk soort inhoud we sturen

Stap 4 — Inhoud terugsturen

Met res.end() sturen we de body van het antwoord terug.

  const server = http.createServer((req, res) => {
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/plain; charset=utf-8');
    res.end('Hallo, wereld!');
  });

res.end() sluit de verbinding en stuurt het antwoord naar de client.

Stap 5 — Server starten

Gebruik server.listen() om te bepalen op welke poort je server luistert.

    server.listen(3000, () => {
      console.log('Server luistert op http://localhost:3000');
    });

De callback wordt uitgevoerd zodra de server gestart is.

Volledige code

import http from "http"

const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain; charset=utf-8');
res.end('Hallo, wereld!');
});

server.listen(3000, () => {
console.log('Server luistert op http://localhost:3000
');
});

Stap 6 — Server testen

1. Sla je bestand op als server.js.
2. Start de server:

   node server.js

3. Open in je browser:

   http://localhost:3000

4. Je zou Hallo, wereld! moeten zien.

Hoe werkt dit?

• createServer() maakt een server die elke aanvraag opvangt
• req bevat info over het inkomende verzoek
• res gebruik je om te antwoorden
• listen() start de server op een specifieke poort

Extra tip: poortnummer kiezen

• Poort 80 = standaard HTTP (adminrechten nodig)
• Poort 3000 of 8080 zijn populair voor development
• Gebruik ctrl + c om de server te stoppen

Verkennen: request object

• req.method → HTTP-methode (GET, POST)
• req.url → pad + querystring
• req.headers → verzoekheaders

console.log(req.method, req.url, req.headers);

Routes (handmatig)

Basis: if/else op req.url en req.method.

if (req.method === 'GET' && req.url === '/') {
  // home
} else if (req.method === 'GET' && req.url === '/about') {
  // about
} else {
  // 404
}

Statuscodes en headers

• 200 OK, 404 Niet gevonden, 500 Serverfout
• Content-Type bepaalt type respons

res.statusCode = 404;
res.setHeader('Content-Type', 'text/plain; charset=utf-8');
res.end('Pagina niet gevonden');

HTML terugsturen

res.statusCode = 200;
res.setHeader('Content-Type', 'text/html; charset=utf-8');
res.end('<h1>Welkom</h1><p>Dit is HTML</p>');