A web működésének a részletezését és megértését szerintem körülbelül az alábbi 3 csoportra lehet bontani.
- Átlag felhasználói szint: Nekik annyit körülbelül elég tudni, hogy egy internet cím esetén megjelenik egy weboldal.
- Webfejlesztői szint: Egy webfejlesztőnek már illik tudni, hogy általánosságban milyen folyamat megy végbe. A beírt internet címtől (domain név) odáig, hogy egy weboldal megjelenik adott szoftverben pl.: egy böngészőben. Valamint nem árt, ha tisztában van a szakkifejezésekkel is.
- Hálózati mérnök vagy DevOps: Amit az előző kettő kategóriában tudni lehet, az neki nem hogy alap, de kötelező. Ezenkívül mindent is tudnia kell. Továbbá nekik illik ismernie adott folyamatnak a részeit, mélységeit, mivel ezeket ők fogják beállítani, konfigurálni vagy fejleszteni. Nekik érteniük kell a hozzá kapcsolódó rétegeket, szoftvereket és ezekre épülő egyéb információkat is.
Miután ez egy elsősorban frontend fejlesztéssel foglalkozó blog, így természetesen a webfejlesztő szemszögéből vesszük végig az Internet vagy web alap működését.
Az internet működése egy webfejlesztő szemével (egyszerüsítve 😀).
A felhasználó megad egy URL-t, pl.: https://www.frontender.hu a kliensben (pl.: egy böngészőben). A böngésző küld egy GET kérést HTTPS protokolon keresztül, de előtte a DNS szolgáltató feloldja az URL-ben lévő domain névhez tartozó szerver címet. Vagyis esetünkben a frontender.hu címhez tartozó IP címet. Így eljut a kérés a megkeresett IP címen lévő szerverhez. Ezen a szerveren van tárolva a weboldal és annak részei, pl.: képek is. A szerveren elhelyezkedő webszerver vagy backend alkalmazás megnézi, hogy a keresett URL létezik-e és azon az URL van-e elérhető erőforrás. Míg a szerver egy számítógép, az erőforrás valamilyen file vagy adat azon a számítógépen. Ha ez létezik, akkor a szerver visszaküldi a kliensnek az adatot vagy fájlt. A böngésző feldolgozza, attól függően, hogy milyen adatról van szó. Majd rendereli vagyis megjeleníti a böngészőben a felhasználó számára.
Ez ugye így elég sűrű, úgyhogy talán nézük meg kicsit lebontva egy-egy kritikusabb részre.
A megadott URL, mi is az URL ?
Mint látjuk, az URL-nek (Unified Resource Locator) nagyon fontos szerepe van a folyamatban. Ez határozza meg, hogy az Interneten (vagyis az internet hálózatra kötött szervereken) adott erőforrás hol érhető el. Az erőforrás alatt értünk egy képet , HTML (HyperText Markup Language) dokumentumot vagy egyéb file-okat is. Egy ilyen URL sok információt hordoz a böngésző és a szerver számára is. Nézzük például a Frontender logó elérését:
A cím:
https://frontender.hu/imags/frontender.svg
Ez az URL jeleníti meg a logót, szétbontva a következő információkat hordozza:
https:// - azt mondja meg, hogy a böngésző a HTTPS protokollt (HyperText Transfer Protocol Secure) használja vagyis a böngésző és szerver között ez lesz a közös nyelv. Ebből fogják érteni egymást.
frontender.hu - ez a domain cím, ez alapján keresi vissza a szerver IP címét, vagyis azt a számítógépet, ahol a kép tárolva van.
/images/ - ha a szerveren megvan a tárolt weboldal, akkor az images könyvtárban keresem majd tovább.
frontender.svg - az images könyvtárban lévő, frontender.svg nevű file-t kéri a böngésző.
Ez egy viszonylag egyszerű URL, a tejes URL arzenál ennél sokkal bonyolultabb tud lenni. Ha érdekel, a Frontender Klub-ban ezt jóval részletesebben megfogjuk nézni.
DNS és az IP cím kapcsolata, mi is ez ?
A DNS (Domain Name System) az a rendszer, amely a domain címeket tartalmazza és kezeli. Lényegében ez az internet nagy telefonkönyve. Ha beírunk a böngészőbe egy internet címet, vagyis domain nevet pl.: frontender.hu, akkor az internet szolgáltató DNS szerverétől lekérdezi, hogy valójában milyen IP cím tartozik hozzá.
Az IP (Internet Protocol) cím, egy teljesen egyedi 4 számból álló számsor (IPv4 esetén, de van IPv6 is) . Minden, ami az internetre van kötve rendelkezik egy-egy ilyen címmel. Például a frontender.hu domain a cikk írás pillanatában a 75.2.60.5 címmel rendelkezik.
Most arra gondolhatsz mi a helyzet, ha a telefonodon vagy a számítógépeden elérhető az internet. Valójában, amikor egy eszközöd csatlakozik egy Wi-Fi-hez vagy az internetre, akkor a te eszközödnek is lesz egy IP címe. Ha kíváncsi vagy az IP címedre, akkor pl: https://www.whatismyip.com oldalon meg tudod nézni mi is a te címed.
Miért is fontos az IP cím ?
Anélkül, hogy nagyon belemennék hálózati ismeretekbe. Az IP cím lehetővé teszi, hogy közvetlenül elérjen egy program egy adott szervert és hálozati kommikációt folytasson egy alacsonyabb szinten.
Lényegében, ha a postás nem tudja a te lakcímedet, akkor nem tudja neked kiszállítani a csomagodat, vagyis ha a böngésző nem tudja a szerver IP címét, akkor nem tudja oda-vissza szállítani a csomagokat, amiben a weblap megjelenítéshez szükséges fájlok információi vannak.
Most már tudjuk, hogy az URL-ből, hogy fogja a böngésző beazonosítani a szervert, milyen nyelven fognak kommunikálni és hogy majd a szerver hogyan találja meg a kívánt erőforrást.
De egy kicsit még a közös nyelvről…
HTTP/HTTPS, mint a kommunikáció nyelve.
Amíg a HTML a weblapok nyelve, ami arra szolgál, hogy megjelenítsen adatokat a böngészőben a felhasználó számára. Addig a HTTPS a böngésző vagyis kliens és a szerver nyelve, hogy egyértelműen értsék egymást. Eredetileg beszélhetünk HTTP-ről is, az S csupán azt jelzi, hogy a HTTP nyelv egy titkosított csatornán fog történi, így biztonságosabb a kommunikáció.
Alapvetően, kliens és szerver alapú kommunikáció megy végbe, ami azt jelenti, hogy a kliens, esetünkben a böngésző leírja, hogy mit szeretne a szervertől, a szerver pedig visszaküld szintén egy leírást, hogy létezik-e az adat és mit kell róla tudni, milyen szabályok vannak és adott esetben magát az erőforrást is elküldi.
Egy weboldal esetén akár 10x -20x, de több százszor is kommunikálhatnak a böngésző és szerverek, attól függően, hogy a böngészőnek mennyi filera vagy adatra van szüksége a weblap megjelenítéséhez.
Lehet, hogy csak egy HTML fájlt tölt le, de lehet, hogy a weblaphoz képeket, CSS-t, JavaScript fájlokat és egyéb adatokat is csatolni kell. Ezt mind, mind körülbelül úgy fogja elkérni, ahogy mi is beírjuk a böngészőnek. De lássunk egy nagyon-nagyon egyszerű példát: A böngésző valami ilyesmit fog küldeni (persze ennél sokkal több mindent, de az alap ez) szöveges adatként.
GET /images/frontender.svg HTTP/1.1
Vagyis, kérem az images könyvtárból a frontender.svg fájlt és ehhez a HTTP/1.1 nyelvet fogom használni. Természetesen még sok sok egyéb információt is csatolni fog, számunkra most az nem fontos.
Amire a server válaszol:
HTTP/1.1 200 OK
….
Ide kerül a fájlnak a tartalma.
A szerver meg azt mondja, hogy én is a HTTP/1.1 nyelvet használom, megtaláltam a fájlt, amit keresel (200 OK, nyugtázza) és hozzá illeszt még egy csomó információt a szerverről és a fájlról, majd a végére beteszi a fájl tartalmát és elküldi a böngészőnek.
Innét már a böngésző, csak megvárja, hogy minden adat megérkezzen, összerakja a fájlt és a a típusának megfelelően megjelenítse azt a böngészőben.
Az, hogy ez után a böngésző mit, hogy jelenít meg, már egy másik sztori.
És mindez miért is fontos ?
Frontend fejlesztőként vagy szabadúszó webfejlesztőként, gyakran egy weboldalt nem csak létre kell hozni, megalkotni, hanem azt üzemeltetni is tudni kell. Ugyanakkor gyakran ezek a technológiai információk újra meg újra előjönnek és használatosak is lehetnek.
URL - A weboldalban url-eket és erőforrásokat fogunk használni, képeket, CSS fájlokat, JavaScript filokat. Tisztaba kell lenni vele, hogyan éri el a szerverről, az hogyan érkezik meg és úgy általában, mi folyik és merre.
Domain / IP - Ha weboldalt akarunk üzemeltetni vagy az ügyfélnek a weboldal tárhelyére akarunk weblapot beállítani, akkor gyakran előjön, hogy a domain-hez be kell állítani az IP-t, vagy akár, akkor is hasznos ezeket tudni, hogyha a tárhely szolgáltatóval akarunk kommunikálni érdemben.
HTTP/HTTPS - Előfordulhat, hogy valami nem érkezik meg a szerverről vagy hibásan jelenik meg, ekkor néha bele kell kukkantani, hogy mit is beszélget a böngésző a szerverrel.
Végezetül..
Kezdő webfejlesztőként nem ezek lesznek a legfontosabb dolgok (talán kivétel az URL), amit meg kell az elején tanulni, de ha már az elején hallunk róla, akkor később ismerős lesz a téma és könnyebb lesz részletesen megismerkedni ezekkel a folyamatokkal, ismeretekkel.