WebSocket - Real-time návštěvní kniha v PHP - Online kurz

Přemýšlel jsi někdy nad tím, jak je možné, že moderní internetové chaty jako Messenger, WhatsApp nebo Discord zobrazí příchozí zprávu prakticky ihned poté, co je odeslána? A to bez toho, aby se serveru neustále ptaly požadavky AJAX, zda nepřišlo něco nového? Jak je možné, že server dokáže ovlivnit stránku zobrazenou v prohlížeči, aniž by uživatelův počítač žádal nová data? V tomto seriálu se naučíš, jak funguje systém WebSocket, který toto umožňuje. Rovnou si naprogramuješ menší projekt, který bude jeho výhod využívat.

6 lekcí

1 vědomostních testů

Co tě kurz WebSocket naučí?

Nejprve se seznámíš s tím, jak vlastně WebSocket funguje, kudy přesně putuje nová zpráva od odesílatele do prohlížečů všech uživatelů a seznámíš se s prostředím Node.js, které WebSocket dokáže využívat. S naší pomocí si do nově založeného projektu nainstaluješ skrze příkazový řádek všechny potřebné moduly.

Následně ti ukážeme a podrobně vysvětlíme JavaScriptový kód, podle kterého poběží náš server Node.js. Ta část infrastruktury, která bude přijímat nově příchozí data od PHP serveru a přeposílat je všem uživatelům, kteří si naši stránku prohlížejí. Nezapomeneme ani na zabezpečení. Nebude tedy možné, že by ti někdo posílal uměle vytvořené požadavky, které neprošly validací, přímo na tvůj Node.js server. Všem uživatelům se tak třeba nebudou vypisovat neslušná slovíčka

Po nastartování Node.js serveru se přesuneme k PHP části. Ukážeme a vysvětlíme ti objektový kód, který bude pomocí technologie curl odesílat požadavky na náš Node.js server, které budou obsahovat zprávu odeslanou z HTML formuláře a heslo, které bude sloužit k ověření legitimnosti.

Poté se vrhneme na frontend část, čili to, co vidí uživatel v prohlížeči. V několika řádcích JavaScriptového kódu tě naučíme navázat připojení s Node.js serverem a reagovat na zprávy, které nám skrz vytvořený WebSocket bude posílat. Nakonec převlečeš svou aplikaci do hezčího kabátu pomocí několika předpřipravených CSS stylů.

Zdá se, že máme už hotovo? No skoro. V zápalu seznamování se s technologií WebSocket a s Node.js jsme skoro zapomněli na to, co bychom u jiných PHP aplikací udělali asi jako první, a to odesílání nových zpráv, jejich validace a jejich ukládání do databáze. S trochou více JavaScriptu se naučíme odesílat požadavky AJAX, tedy takové požadavky, které nás nebudou nutit aktualizovat naší webovou stránku v prohlížeči uživatele. K tomuto účelu využijeme asi nejznámější JavaScriptovou knihovnu jQuery.

No a tím svůj projekt dokončíš. Pokud si budeš chtít všechny nabyté znalosti ověřit, jistě oceníš možnost závěrečného testu, po jehož splnění získáš certifikát sloužící jako osvědčení, že jsi tento kurz absolvoval

Lekce