Lekce 1 - Návštěvní kniha přes WebSocket - Úvod a instalace nástrojů
Zajímalo vás někdy, jak Facebook zobrazí bublinu s událostí přesně v
moment, kdy nastane? Nebo přemýšleli jste jak funguje zdejší real-time
chat? V tomto seriálu se naučíme jak obnovit stránku v prohlížeči
uživatele z PHP, aniž bychom se z klienta neustále ptali AJAXem. Vytvoříme
tak moderní službu, kterou vaše konkurence nemá 
Vše si předvedeme na praktické a
jednoduché knize návštěv, která čtenářům zobrazuje nové příspěvky v
reálném čase.
Vítejte tedy u prvního dílu seriálu na téma PHP + Node.js(+Socket.io) – Kniha návštěv. V tomto pilotním díle si řekneme, jak to vlastně vše bude fungovat a také si nainstalujeme Node.js a XAMPP. Dále si vybereme vývojové prostředí, ve kterém budeme celou aplikaci vyvíjet. Do Node.js nainstalujeme knihovnu socket.io a připravíme si základní strukturu projektu.
Princip WebSockets
Než se do toho pustíme, ukažme si jak celý systém funguje:
- Uživatel přes AJAX odešle formulář
- PHP jej zpracuje a když vše projde, uloží data do databáze. Tím jsme doposud v našich aplikacích končili. Nyní však můžeme ještě pokračovat.
- Kromě uložení dat do databáze pošle PHP data i na server, kde běží Node.js.
- Node.js data přepošle socketem zpět k uživatelům, kteří mají stránku otevřenou.
- Javascript u uživatelů data vloží do stránky a změny se ihned projeví všem čtenářům.
Původní AJAX požadavek na server je posílán přes protokol HTTP. Požadavek z Node.js však již není posílán přes HTTP protokol (protokol typu request-response), ale právě přes WebSockets (protokol typu full-duplex), kde je možné odesílat nejen z klienta na server a čekat na odpověď, ale také ze serveru na klienty, i když se klienti vůbec na nic neptali. Ve výsledku máme aplikaci, která se vůbec neobnovuje a nové příspěvky se objevují okamžitě, bez zbytečného průběžného dotazování. Můžeme hovořit o 100% webové aplikaci, někdy také zvané jako single-page application.
Výběr vývojového prostředí
Z počátku je potřeba zvolit si vývojové prostředí. Já doporučuji PhpStorm nebo WebStorm, ale klidně nám postačí Sublime Text či atom.io. V seriálu použiji PhpStorm. Doporučuji jej hlavně z důvodu, že dokáže napovídat i Node.js syntaxi, ostatní by s tím sice neměly mít problém, ale nejspíše pouze za pomocí dalšího pluginu.
Zmíněná IDE naleznete na následujících odkazech:
Instalace XAMPPu a Node.js na Windows
Kromě IDE budeme samozřejmě potřebovat zprovoznit lokální Web Server (pro PHP). Pokud vyvíjíte v PHP, tento krok již budete mít pravděpodobně zajištěný. Pokud ne, stáhneme XAMPP z adresy https://www.apachefriends.org, a dále zvolíme nastavení jako je na obrázku níže. Instalaci již jen dokončíme klepáním na tlačítko "Další". Instalace je případně podrobněji popsána v článku Instalace Apache, MySQL a PHP na Windows a první PHP skript.
Dále tedy potřebujeme Node.js. Ten stáhneme z adresy https://nodejs.org a taktéž nainstalujeme. Na
instalaci není nic složitého, proto nepřiložím ani žádný obrázek .
Dalším krokem bude zapnutí XAMPPu. Možná budete mít problém se spuštěním XAMPPu, protože máte Skype a ten si zabírá port, který shodou náhod má i defaultně XAMPP. Nejlepším řeším této situace je přenastavit Skype. Půjdeme do nastavení Skype, dále do pod nastavení "spojení" a tam odškrtneme možnost "použít porty 80 a 443 jako alternativní pro příchozí spojení". Restartujeme Skype a máme hotovo. Nyní jen stačí v XAMPP Control Panel nastartovat Apache a MySQL.
Příprava projektu
Je na čase nainstalovat si knihovnu socket.io do Node.js,
která výrazně usnadňuje používání technologie WebSocket. Spustíme
příkazový řádek (například zmáčkneme windows klávesu a r,
což nám otevře okénko spustit, do kterého napíšeme cmd a
stiskneme enter). Až se nám otevře příkazový řádek, tak jej nejspíše
budete mít hodně malý. To spravíme pravým kliknutím na ikonku nahoře v
nadpisu příkazového řádku, zvolíme možnost vlastnosti, dále si
aktivujeme možnost písmo a velikost nastavíme na 12x16 a nebo na takovou,
která vám vyhovuje ,
potvrdíme tlačítkem OK.
Nyní si přes npm (jedná se o package manager pro různé platformy jako je Node.js nebo například JavaScript celkově) nainstalujeme potřebné moduly do Node.js, NPM je již součástí Node.js, takže jej nemusíte nijak instalovat.
Konečně se dostáváme k tomu, co vlastně musíte napsat do příkazového řádku pro instalaci socket.io knihovny a dalších modulů. Jako první si musíme vytvořit adresář pro náš projekt, například "RealtimeKnihaNavstev", klidně v Dropboxu, někde ve vašich dokumentech, zkrátka tam, kde máte projekty. V něm si vytvoříme další dva adresáře a to PHP a Nodejs. Až budeme mít vytvořeno, nainstalujeme socket.io příkazem
npm install socket.io --prefix <cestaDoNodejsSložky>
Ten nám socket.io nainstaluje do našeho Nodejs adresáře
<cestaDoNodejsSložky>, což
bude nějakou dobu trvat, prosím vyčkejte dokud nebude celý proces
dokončen (to poznáte tak, že již zase budete moci psát další
příkaz). Dále budeme potřebovat modul express. opět použijeme příkaz npm
install:
npm install express --prefix <cestaDoNodejsSložky>
Také bude potřeba modul body-parser:
npm install body-parser --prefix <cestaDoNodejsSložky>
Pokud nám vám řešení s prefixem nepůjde nainstalujeme dané moduly bez udání cesty:
npm install <balíček>
Takže pokud jsme využili možnost bez udání cesty tak
musíme adresář node_modules přesunout z
C:\Users\<user>\node_modules do našeho adresáře Nodejs,
který jsme si vytvořili.
Tím jsme dokončili instalaci všech potřebných doplňků do Node.js.
V příští lekci, Návštěvní kniha přes WebSocket - Server a hlavní PHP třída, budeme implementovat Node.js server.
