Brontekst bekijken van Web-1/Client-server

{{Zijbalk Web1}}
== Het web: een client-server systeem ==

In deze module gaan we in op de werking van webservers, en op de interactie tussen de browser en de webserver. Deze interactie is een voorbeeld van een client-server systeem: de browser is de client, de webserver is de server. Deze interactie wordt ondersteund door het ''http''-protocol: dit is ''het'' web-protocol.

=== De bouwstenen van het web: html, http, en url ===

Het web heeft de volgende belangrijke bouwstenen:
* html (hypertext markup language): de taal waarin webpagina's beschreven worden. De browser geeft een html-document weer op het scherm.
** html wordt aangevuld met CSS, voor de opmaak van webpagina's, en met JavaScript, voor programma's die deel uitmaken van het html-document - bijvoorbeeld voor interactie met de gebruiker en interactie met de server;
** daarnaast zijn er veel andere bestanden voor bijvoorbeeld afbeeldingen, geluid en video.
* http (hypertext transfer protocol): het protocol waarmee de browser html-documenten ophaalt van de server; meer in het algemeen: het protocol voor de interactie tussen de browser en de server.
** https is de beveiligde (secure) versie van dit protocol
* url (universal resource locator): dit kun je beschouwen als het adres (locator) van een webpagina (html-document). Aan de hand het eerste deel van de URL vindt de browser de webserver; aan de hand van het pad-gedeelte bepaalt de webserver het (html)document.

De bovenstaande bouwstenen worden ook besproken in de inleidende module Web-0.

We zullen later nog een aantal bouwstenen van het web tegenkomen, onder andere AJAX, REST en JSON. We zullen ook zien dat URLs en documenten gegeneraliseerd kunnen worden.

=== Web als toepassing van het internet ===

Het web is een toepassing van het internet, en gebruikt onder meer de volgende internet-elementen:
* adressering: van domein-namen via DNS naar IP-adressen;
** een URL bevat meestal een domeinnaam; via een Domain Name Server vindt de browser het IP-adres van de bijbehorende server;
* protocollen: het http-protocol is gebaseerd op het TCP-protocol; voor elke client-server interactie, in de vorm van een request en response, wordt een TCP-verbinding opgebouwd. https gebruikt het beveiligde protocol TLS bovenop TCP.

Deze elementen worden behandeld in de modules Web0 en Internet0.

== Interactie tussen browser en server ==

De basis-interactie tussen de browser en de server heeft de volgende stappen:
* de browser bepaalt uit de url het ip-adres van de server;
* de browser stuurt een http-request (verzoek) naar de server;
* de server ontvangt dit request, zoekt of maakt het bijbehorende html-document, en stuurt dit in de http-response terug naar de browser
* de browser ontvangt het html-document, en geeft dit weer op het scherm.

Nadat de browser het request heeft ontvangen van de server, is deze interactie tussen de browser en de server afgelopen. Voor een volgende pagina wordt deze interactie opnieuw opgezet. Er is (in principe) geen continue verbinding tussen de browser en de server.

(Wat kan er bij deze stappen mis gaan?)

(Welke variaties op deze interactie komen we straks nog tegen?)

=== HTTP protocol ===

* tijdelijke TCP-verbinding: (in principe) voor de duur van één request-response-transactie.
** de tijd tussen een request en een response kan soms wel groot zijn - bijv. in het geval van ... polling.
* method (GET, POST, enz.)
* sommige van deze methods zijn idempotent (GET, DELETE) - andere niet (POST)
* URL

=== Statische en dynamische webpagina's ===

Sommige webpagina's zijn statisch: dit betekent dat deze kant-en-klaar op de server opgeslagen zijn, en dat de inhoud niet afhangt van de browser of van de gebruiker die deze pagina opvraagt, en ook niet van de toestand van de server (tijdstip, enzovoorts). Andere webpagina's zijn dynamisch: in dat geval moet de server de inhoud van de webpagina "uitrekenen" aan de hand van veranderelijke gegevens - zoals de gebruiker, of de toestand van de server.
* enkele voorbeelden van dergelijke veranderlijke gegevens:
** naam en voorkeur van de gebruiker;
** voorraad van de verschillende artikelen;
** inhoud van de winkelwagen;
** persoonlijke aanbiedingen voor de gebruiker;
** ...

=== Webformulieren ===



=== Interactie met de gebruiker: server-side en client-side scripting ===

== Andere voorbeelden van client-server model? ==

* een webserver kan zelf ook weer als client optreden, van een andere webserver. (Zie het voorbeeld van de weerdienst, verderop.)
* mail: gebruik van een mailserver (klassiek met POP3 en SMTP, tegenwoordig meestal met IMAP en SMTP).

Typisch voor deze interactie:
* initiatief (voor transactie) ligt bij de client
* server biedt een dienst aan; meestal een enkelvoudige transactie

Bij de dienst kan het gaan om data en om rekenen. In het bijzonder kan de taakverdeling voor het rekenen in de loop van de tijd verschuiven.

Door het gebruik van client-side scripting, zoals JavaScript, kan de server een deel van het rekenwerk verschuiven naar de client. (Ik ken dit voorbeeld niet van andere client-server opstellingen, alleen uit het web.)

=== Wat zijn belangrijke vragen bij het client-server model? ===

* hoe is het rekenwerk verdeeld: welke berekeningen vinden waar plaats?
* hoe is de data verdeeld: welke data is waar aanwezig; en wordt waar bewaard?
* hoe zit het met de geheimhouding? (en met de privacy)? veiligheid?
** bij de client
** bij de server
** bij de interactie (protocol, communicatie)
* hoe geef je informatie door van de client naar de server? (kan dat op elk moment?)
* hoe geef je informatie door van de server naar de client? (kan dat op elk moment?)
** hierbij spelen begrippen als "push" en "pull" - push vanuit de server, vs. pull vanuit de client.

NB: in de loop van de tijd verschuiven deze taken, bijvoorbeeld in het geval van het web: het rekenwerk (vooral voor het samenstellen van een webpagina) verschuift van de server naar de client.
* waarom? wat zijn de technische ontwikkelingen die dit mogelijk maken? Welke voordelen heeft deze verschuiving? Voor wie?

=== Wat zijn alternatieven voor het client-server model? ===

Het client-server model legt het initiatief bij de client; in het geval van http, bij de browser. Dat maakt het lastig als je op een willekeurig moment informatie van de server naar de client wilt doorgeven. In dat geval moet je een ander model gebruiken. Twee voorbeelden hiervan:
* bi-directionele ''verbinding'': websockets
** waar het http-protocol alleen een (TCP) verbinding maakt tijdens de request-response transactie, is in het geval van websockets sprake van een permanente verbinding. Zowel de server als de client kan via die verbinding op elk moment een bericht sturen; dit wordt met minimale overhead (en minimale latency) bezorgd bij de andere partij.
** websockets vormen een oplossing voor het "push"-probleem vanuit de server; dit gebruik je bijvoorbeeld bij web-toepassingen die met andere gebruikers gedeeld worden, zoals chat-toepassingen, of Google Docs.
* Publish-subscribe: MQTT
** het MQTT protocol is ontworpen voor "machine" communicatie: berichten van sensoren, of voor het aansturen van actuatoren. Het protocol wordt veel gebruikt voor IoT-toepassingen.

== Opdrachten en vragen ==

* geef voorbeelden van pagina's die waarschijnlijk statisch zijn/statisch kunnen zijn;
* geef voorbeelden van pagina's die dynamisch moeten zijn;
* volg het http-protocol in de browser (met de ontwikkeltools)
* statische en dynamische elementen
** ook in het geval van een dynamische webpagina zijn er veel statische elementen: elementen die voor alle gebruikers gelijk zijn, en die niet afhangen van de toestand van de server. Geef voorbeelden van dergelijke statische elementen
** in veel web-toepassingen probeer je deze veranderlijke elementen anders te behandelen dan de statische elementen.

== Toetsvragen ==
* kunnen de pagina's van wikipedia statische pagina's zijn?
** zo nee: wat zijn de dynamische elementen?