A backend egy (vagy több) szerver oldali program, ami frontendtől jövő kérésket megválaszolja. Ezekben a kérésekben lehet szinte bármi, de leggyakrabban adattárolás, módosítás, lekérdezés, törlés történik.

A teljes kommunikáció ilyen kérés / válasz üzenetekből áll. Amikor beírunk egy url-t a böngészőbe, akkor a böngésző is rögtön egy HTTP kérést küld a szervernek. A szerver pedig visszaküldi a frontend kódját.

A HTML kód értelmezése után a böngésző újabb kéréseket küldhet a szervernek, például a Css, képek, JavaScript kód letöltse. A JavaScript a böngésző API-ján keresztül, önmaga is tud kéréseket küldeni.

Mi az a “kérés” és “válasz”?

F r o n t e n d H á l ó z a K t é V r á é l s a s z B a c k e n d

A “kérés” és a “válasz” HTTP formátumban leírt üzenet, amit hálózaton keresztül küldünk a szervernek, a szerver pedig ugyan ilyen formában visszaküldi a választ. Ebbe van belekódolva milyen műveletet akarunk végrehajtani és a hozzá tartozó adatok is (ha vannak).

A HTTP formátum (protokoll más néven) részletes leírása itt található.

HTTP kommunikáció példa

(kérés) GET / HTTP/1.1
(kérés) Host: localhost:1323
(kérés) Accept: */*

(válasz) HTTP/1.1 200 OK
(válasz) Content-Type: text/plain; charset=UTF-8
(válasz) Content-Length: 13
(válasz) Hello, World!

Webszerver

A webszerver az a komponense a backend programnak, ami a HTTP kommunikációt elvégzi. Miután beérkezik egy HTTP kérés, a webszerver értelmezi a kérést, feldolgozza és visszaküldi a választ.

A “feldolgozás” sokmindent jelenthet, pl.:

Szinte mindig több webszerver van a rendszerben, van amelyiknek az a feladata hogy másik webszervereknek továbbítsa a kérést (reverse proxy).

A webszerver lehet teljesen különálló program (pl Nginx, Traefik) és lehet beépítve a backend programba is.

Backend program példa (HTTP kérés feldolgozása és válasz)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

// Keretrendszer betöltése
const express = require("express");
const app = express();

// Route-ok regisztrálása
// Kezdőlap
app.get("/", (req, res) => {
  res.send("Home page");
});

// Hello
app.get("/hello", (req, res) => {
  res.send("Hello World!");
});

// Webszerver indíátsa a 3000-es porton
app.listen(3000);

Ez példa egy NodeJS-en futó, JavaScript program, Express keretrendszerrel. Ezen a példa kódon nézzük meg, miként dolgozza fel és válaszolja meg egy webszerver a kérést.

A 2., 3. sorban betöltjük a keretrendszert, ez nekünk most nem fontos, az ExpressJS dokumentációjában benne van részletesen.

A “Route-ok regisztrálása” részben megmondjuk a keretrendszernek, hogy ha a kérés Method része “GET” és a Path rész egyezik a js kódban megadottal, akkor futassa le a beállított függvényt. A függvény pedig megkapja a kérést és választ reprezentáló objektumokat. A webes keretrendszerekben általában route-oknak hívják a a HTTP protokoll Path részét, de ugyan arról van szó.

A függvény a res objetumba beírja a választ, a keretrendszer pedig visszaküldi.

HTTP kérések formátuma

HTTP request Forrás (MDN)

Angolul, a keretrendszerekben és a HTTP protokollban a kérést request-nek, a választ response-nak hívják és általában res, req-nek rövidítik.

// Kezdőlap route példa

Kérés

GET / HTTP/1.1 Host: localhost:3000 Accept: */*
app.get("/", (req, res) => { res.send("Home page"); });

Válasz

HTTP/1.1200 OK Content-Type: text/html; charset=utf-8 Content-Length: 9

Home page

// Hello route példa

Kérés

GET /hello HTTP/1.1 Host: localhost:3000 Accept: */*
app.get("/hello", (req, res) => { res.send("Hello World!"); });

Válasz

HTTP/1.1200 OK Content-Type: text/html; charset=utf-8 Content-Length: 12

Hello World!

Hálózati kommunikáció

16
17

// Webszerver indíátsa a 3000-es porton
app.listen(3000);

A 17. sorban, indul el a webszerver komponens, ami kezeli a hálózati kommunikációt. A webszerver ezen része, alapvetően egy végtelen ciklus, ami folyamatosan figyeli hogy van-e új bejövő adat a hálózatról vagy kimenő a szerver programtól.

Hálózat működése

Ez kép a HTTP kérések megválaszolásának a folyamatát mutatja be, az 5 szín 5 külön kapcsolatot reprezentál.

  1. Hálózaton érkeznek folyamatosan a csomagok. Az adatok csomagokra vannak szétbontva és úgy továbbítódnak a hálózaton, ezek a színes négyzetek.
  2. Az operációs rendzser szétválogatja a csomagokat és minden klienshez (K1..K5) létrehoz egy adatszerkezetet, amiben többek között van egy buffer a bejövő és egy a kimenő adatoknak.
  3. A NodeJs figyeli a bejövő buffert, amikor van adat, akkor azt átmásolja a req objektumba.
  4. A NodeJs az áltálunk írt kódtól jövő adatokat is figyeli. Amikor a send függvénnyel a res objektumba írjuk az adatokat, akkor a NodeJs érzékeli és átmásolja a kapcsolathoz tartozó kimeneti bufferbe.
  5. Eztán az operációs rendszer elküldi a kimeneti buffer adatait a hálózaton, így kapja vissza az adatot a kliens (böngésző általában).