Šta su web soketi i kako rade

Uvod u WebSocket protokol

WebSocket je komunikacioni protokol koji omogućava dvosmjernu (full-duplex) komunikaciju između web pregledača i servera preko jedne TCP konekcije. Za razliku od klasičnog HTTP protokola gdje klijent mora da pošalje zahtjev da bi dobio odgovor, WebSocket omogućava serveru da šalje podatke klijentu kad god ima nešto novo za isporučiti, bez čekanja na zahtjev. Ovo je revolucionarno za web aplikacije koje zahtijevaju ažuriranja u realnom vremenu.

Pre WebSocket-a, programeri su koristili tehnike poput polling-a gdje pregledač periodično šalje zahtjeve serveru na primjer svake 2 sekunde pitajući ima li novih podataka, ili long polling gdje server drži konekciju otvorenom dok ne dobije nove podatke. Obe tehnike su neefikasne jer troše propusni opseg na HTTP zaglavlja i opterećuju server nepotrebnim zahtjevima. WebSocket rješava ove probleme uspostavljanjem trajne konekcije sa minimalnim overhead-om.

Kako WebSocket funkcionira

Handshake proces

WebSocket konekcija počinje kao obična HTTP konekcija kroz proces poznat kao handshake ili rukovanje. Klijent šalje HTTP zahtjev sa specijalnim zaglavljima Connection Upgrade i Upgrade websocket koji serveru signalizira želju za prelazak na WebSocket protokol. Server odgovara sa statusnim kodom 101 Switching Protocols ako podržava WebSocket, čime je HTTP konekcija nadograđena na WebSocket. Od tog trenutka, obe strane mogu slobodno slati podatke bez HTTP overhead-a.

Framing i prenos podataka

Nakon uspostavljanja konekcije, podaci se razmjenjuju kroz WebSocket frame-ove koji su znatno manji od HTTP paketa. Svaki frame sadrži samo 2 do 14 bajtova overhead-a u usporedbi sa stotinama bajtova u HTTP zaglavljima. WebSocket podržava tekstualne poruke u UTF-8 formatu i binarne podatke. Poruke se mogu fragmentirati u više frame-ova za prenos velikih podataka. Kontrolni frame-ovi poput ping i pong se koriste za provjeru da li je konekcija još uvek aktivna.

Zatvaranje konekcije

Bilo koja strana može inicirati zatvaranje WebSocket konekcije slanjem cloše frame-a. Proces zatvaranja uključuje razmjenu cloše frame-ova gdje strana koja prima cloše frame odgovara svojim cloše frame-om i nakon toga TCP konekcija se zatvara. Klijentska strana obično implementira automatsko ponovno povezivanje u slučaju neočekivanog prekida konekcije sa eksponencijalnim odlaganjem između pokušaja da se ne preoptereti server.

Primene WebSocket-a u praksi

Chat aplikacije

Chat je najočiglednija primjena WebSocket-a. Kada korisnik pošalje poruku, ona se trenutno pojavljuje kod svih sudionika u konverzaciji bez osvežavanja stranice. Moderne chat aplikacije poput Slack-a, Discord-a i Facebook Messenger-a koriste WebSocket za dostavljanje poruka u realnom vremenu. Pored teksta, WebSocket omogućava slanje indikatora kucanja, statusa pročitano, online i offline statusa korisnika i notifikacija o novim porukama. Implementacija chat-a sa polling-om zahtijevala bi hiljade HTTP zahtijeva u minuti dok WebSocket to radi sa jednom otvorenom konekcijom.

Notifikacije u realnom vremenu

Sistemi notifikacija na platformama poput GitHub-a, Trello-a ili projektnih alata koriste WebSocket da korisnicima isporuče obavještenja čim se dogodi relevantna aktivnost. Kada neko komentira vaš pull request, WebSocket trenutno dostavlja notifikaciju u pregledač bez potrebe da osvežavate stranicu. Ovo je posebno važno za kolaborativne alate gdje više korisnika istovremeno radi na istom projektu jer svaka promjena mora biti vidljiva svim sudionicima u realnom vremenu.

Live dashboard i monitoring

Dashboardi koji prikazuju metrike u realnom vremenu poput praćenja prometa na sajtu, monitoring servera, finansijskih podataka ili IoT senzora koriste WebSocket za kontinuirano ažuriranje grafova i vrijednosti. Umjesto da dashboard osvežava cijelu stranicu svakih 5 sekundi, WebSocket dostavlja samo promjenjene podatke što značajno smanjuje opterećenje servera i propusnog opsega. Alati poput Grafana-e i Kibana-e koriste WebSocket za live streaming metrika.

Kolaborativno editiranje

Google Docs, Figma i slični alati omogućavaju više korisnika da istovremeno editiraju isti dokument zahvaljujući WebSocket-u. Svaka promjena jednog korisnika se trenutno propagira svim ostalim korisnicima. Ovo zahtijeva sofisticirane algoritme za rješavanje konflikata poput Operational Transformation ili CRDT algoritama koji osiguravaju konzistentnost dokumenta čak i kada dva korisnika istovremeno editiraju isti dio teksta.

WebSocket u različitim programskim jezicima

JavaScript i Node.js

U pregledaču, WebSocket API je ugrađen i koristi se direktno bez dodatnih biblioteka. Kreiranje konekcije je jednostavno sa new WebSocket konstrukcijom kojoj se prosledi URL servera. Na serverskoj strani, popularne Node.js biblioteke uključuju ws koja je minimalistička i brza, Socket.IO koja dodaje automatski fallback na polling ako WebSocket nije dostupan plus sobu za grupno slanje poruka i automatsko ponovno povezivanje. Socket.IO je najpopularniji izbor za JavaScript projekte jer apstrahira kompleksnost i radi pouzdano čak i na mrežama sa restriktivnim firewall-ovima.

Python i PHP

Python programeri koriste biblioteke poput websockets za async pristup ili Django Channels koji dodaje WebSocket podršku u Django framework. Flask-SocketIO je popularna opcija za Flask aplikacije. PHP tradicionalno nije idealan za WebSocket jer je dizajniran za request-response model, ali Ratchet biblioteka i Swoole ekstenzija omogućavaju WebSocket servere u PHP-u. Laravel koristi Laravel Echo sa Pusher-om ili Socket.IO za real-time funkcionalnosti uz Laravel Reverb kao self-hosted rješenje.

Hosting zahtjevi za WebSocket aplikacije

Server konfiguracija

WebSocket aplikacije imaju specifične zahtjeve za hosting. Deljeni hosting obično ne podržava WebSocket jer zahtijeva dugotrajne konekcije koje shared okruženje ne može efikasno upravljati. hosting na virtuelnom serveru ili namenski server je minimum za produkciju. Web server mora biti konfiguriran za WebSocket proxy - Nginx koristi proxy_pass sa upgrade zaglavljima, Apache koristi mod_proxy_wstunnel. Firewall mora dozvoliti WebSocket promet koji tipično koristi portove 80 za ws i 443 za wss protokol.

Skaliranje WebSocket aplikacija

Skaliranje WebSocket-a je kompleksnije od skaliranja HTTP aplikacija jer svaka konekcija zauzima memoriju na serveru. Jedan server može održavati od 10000 do 100000 istovremenih WebSocket konekcija ovisno od hardvera i aplikacije. Za veći broj korisnika, koristi se horizontalno skaliranje sa Redis pub/sub ili sličnim message broker-om za sinhronizaciju poruka između instanci servera. Load balancer mora podržavati sticky sessions ili IP hash da bi WebSocket konekcija ostala na istom backend serveru.

Sigurnost WebSocket-a

WSS enkripcija

Baš kao što HTTP ima HTTPS, WebSocket ima WSS (WebSocket Secure) koji koristi TLS enkripciju. Uvek koristite WSS u produkciji jer nekriptovane WebSocket konekcije mogu biti presretnute. Većina modernih pregledača blokira ws konekcije sa stranica učitanih preko HTTPS-a, tako da je WSS praktično obavezan. SSL certifikat koji koristite za HTTPS automatski pokriva i WSS konekcije na istom domenu.

Autentifikacija i autorizacija

WebSocket ne podržava HTTP zaglavlja nakon inicijalnog handshake-a, pa se autentifikacija obično rješava slanjem tokena kao query parametra pri uspostavljanju konekcije ili slanjem autentifikacione poruke odmah nakon povezivanja. JWT tokeni su popularan izbor jer server može verifikirati identitet korisnika bez upita u bazu podataka. Autorizacija određuje koje kanale ili sobe korisnik može da sluša i koje poruke može da šalje. Na BeoHosting VPS planovima imate punu kontrolu nad server konfiguracijom što omogućava optimalno podešavanje WebSocket aplikacija sa pravilnom sigurnošću i performansama.

Zaključak

WebSocket protokol je fundamentalna tehnologija za moderne web aplikacije koje zahtijevaju komunikaciju u realnom vremenu. Od chat sistema i notifikacija do kolaborativnih alata i live dashboarda, WebSocket omogućava iskustva koja klasičan HTTP jednostavno ne može da pruži. Razumijevanje kako WebSocket funkcionira, kada ga koristiti i kako ga pravilno implementirati je ključna vještina za svakog web developera koji želi da gradi dinamične i interaktivne aplikacije.