HTTP Protokoll #

• Textbasiertes Protokoll
• Übermittlung verwendet TCP
• ... und SSL / TLS für HTTPS
• Beliebiger Inhalt kann übermittelt werden
• Limitierung besteht durch Webbrowserstandards

Debugging #

• Im Webbrowser mit Debug Tools unter Network Tab
• Mit curl um requests aus dem Terminal abzusetzen (super mächtiges Tool!)
• In VS Code mit Extension Thunder Client oder REST Client

Server / Client Applikation #

• Client oft der Webbrowser
  • ... Ausnahme sind APIs
  • sendet den Request
• Server wartet auf HTTP Requests
  • ... praktisch jede Programmiersprache hat im Minimum einen HTTP Webserver
  • sendet die Response

Struktur #

• Header
  • Request Path
  • Host
  • Statuscodes
  • Methoden
• Payload / Request Body

Header #

• Der Header besteht aus Key-Value Pairs

Date: Wed, 02 Nov 2022 14:54:04 GMT
Server: Apache
Location: https://nexus-computing.ch/hello?
Content-Length: 241
Content-Type: text/html; charset=iso-8859-1

Methoden #

• Jeder Request hat eine Methode assoziert
• ... defaultmässig im Browser GET
• Wird vom Server interpretiert und entsprechend evaluiert
• Methoden: POST, PUT, DELETE
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods
• GET Request haben typischerweise keinen Body

Client kann Nutzdaten senden #

• Entweder via URL encoding encode()
  • URL Parameter werden so übergeben
• ... oder bei POST als Payload im Body
  • wird meistens für grössere Payloads verwendet, die in der URL keinen Platz haben

URL Parameter #

• Bei einem GET Request können URL Parameter mitgegeben werden. Es handelt sich hierbei lediglich um eine Konvention, der Server parst dabei der Path im GET Request.
• URL Parameter sind key/value pairs, welche folgendermassen codiert werden

https://www.helloworld.org/api?hello=world&foo=bar

• Teil nach ? wird als Request Parameters interpretiert.
• Paramter müssen urlEncoded werden.

Server sendet Nutzdaten mit MIME #

• Server sendet Response Header
  • Content-Type erklärt, wie die Daten zu interpretieren sind
    • text/html, text/javascript, image/png, application/json ...
  • Content-Length wie lange die Payload sein wird
• Nutzdaten sind im body der Response zu finden.

Es gibt zwei unterschiedliche Arten von Webserver Diensten

• Statisches Webhosting
  • einfache Files werden auf HTTP Requests geliefert
  • AWS S3 auf static Files optimiert, sehr performant und deshalb Transfer kostengünstig!
• API
  • Dynamische Antworten anhand der Requests
  • Serverseitige Webapp im Hintergrund,
  • ... verbindet sich z.B. mit DB
  • ... checkt Permissions
  • ... bearbeitet Daten bevor diese zurückgehen

Moderne Web Apps #

• Bei modernen Web Applikationen wird der statische Teil häufig von der API getrennt. Statisches Filehosting liefert also alle notwendigen Resourcen mit dafür optimierten Diensten.
• API ist dafür zuständig Nutzdaten vom User zu interpretieren und Resultate zurückzuliefern.
  • ... Server wird häufig via Cloud realisiert (Ubuntu / Debian Server)
  • ... um Unabhängig zu bleiben werden Docker Container eingesetzt (App Container unabhängig von Server)
  • ... serverless Dienste von Cloud Providern sind wesentlich Kostengünstiger, aber anspruchsvoller im Coding und zum Teil bindend an den Provider.

Wo wird gehostet? #

• Shared Webhosting mit PHP sehr kostengünstig (Bindung an PHP)
• Zuhause: Portforward und Raspi mit DynDNS
• Cloud Service Provider
  • Linode (sehr günstige Angebote, gratis DNS)
  • Amazon AWS (guter Loadbalancer mit HTTPS und WAF)
  • Microsoft Azure
  • Heroku (schneller Einstieg, z.T. aber teuerer als andere)

Server müssen gewartet werden #

• Ubuntu / Debian Updates
• Firewall Settings
• SSL
  • certbot

HTTP Client #

• Der Browser ist ein HTTP Client
• Gibt man eine URL ein, wird ein GET Request ausgelöst
• JavaScript erlaubt on-the-fly HTTP Requests
  • mit window.fetch API
  • Aufpassen mit CORS, der Browser verhindert einen Aufruf mit fetch, falls der Webserver nicht explizit erlaubt von der window.location Domain her einen Request auszuführen.
  • Gerade im Fall, dass wir einach ein "File" im Browser öffnen, setzt das Grenzen

CORS #

• Cross Origin Resource Sharing
• Sicherheitsfeature
• Origin wird geprüft, damit ein Server nicht von einem Client "gespamt" werden kann, ohne dass der Server dies explizit erlaubt.
  • Schutz für Server gegen DDoS

HTTP Requests mit JavaScript #

• fetch() führt einen HTTP Request aus
• returnt ein Promise
• ... mit .then(() => {}) kann ein Callback registriert werden
• alternativ und besser: async, await.

Beispiel #

windon.onload = async () => {
    const res = await fetch(
        'https://dog.ceo/api/breeds/image/random');
    const jsonData = await res.json();
    
    console.log("data", jsonData);
}

.json() Methode #

• .json() liefert ein Promise und versucht die Antwort des Servers als JSON zu parsen.
• Je nach Response .text() oder .blob().

Long Polling #

• HTTP besteht aus einem Request und anschliessend aus einer Response.
• ... in der Regel keine offene, bleibende TCP Verbindung.
• Server Side Events: Response hört nicht einfach auf, sonder sendet immer wieder etwas
• ... aber unidirektional von Server zu Client.

Websockets #

• Bidirektional
• Verbindung bleibt offen (bis jemand schliesst).
• Notifications, Chats, Gaming, etc.