1. diel - Návštevná kniha cez WebSocket - Úvod a inštalácia nástrojov
Zaujímalo vás niekedy, ako Facebook zobrazí bublinu s udalosťou presne v
moment, kedy nastane? Alebo premýšľali ste ako funguje tunajšia real-time
chat? V tomto seriáli sa naučíme ako obnoviť stránku v prehliadači
používateľa z PHP, bez toho aby sme sa z klienta neustále pýtali Ajaxu.
Vytvoríme tak moderné službu, ktorú vaša konkurencia nemá 
Všetko si predvedieme na
praktické a jednoduché knihe návštev, ktorá čitateľom zobrazuje nové
príspevky v reálnom čase.
Vitajte teda u prvého dielu seriálu na tému PHP + Node.js (+ Socket.io) - Kniha návštev. V tomto pilotnom diele si povieme, ako to vlastne všetko bude fungovať a tiež si nainštalujeme Node.js a XAMPP. Ďalej si vyberieme vývojové prostredie, v ktorom budeme celú aplikáciu vyvíjať. Do Node.js nainštalujeme knižnicu socket.io a pripravíme si základnú štruktúru projektu.
Princíp WebSockets
Než sa do toho pustíme, ukážme si ako celý systém funguje:
- Užívateľ cez AJAX odošle formulár
- PHP ho spracuje a keď všetko prejde, uloží dáta do databázy. Tým sme doteraz v našich aplikáciách končili. Teraz však môžeme ešte pokračovať.
- Okrem uloženia dát do databázy pošle PHP dáta aj na server, kde beží Node.js.
- Node.js dáta prepošle socketom späť k užívateľom, ktorí majú stránku otvorenú.
- Javascript u užívateľov dáta vloží do stránky a zmeny sa ihneď prejaví všetkým čitateľom.
Pôvodný AJAX požiadavka na server je posielaný cez protokol HTTP. Požiadavka z Node.js však už nie je posielaný cez HTTP protokol (protokol typu request-response), ale práve cez WebSockets (protokol typu full-duplex), kde je možné odosielať nielen z klienta na server a čakať na odpoveď, ale aj zo servera na klientov, aj keď sa klienti vôbec na nič nepýtali. Vo výsledku máme aplikáciu, ktorá sa vôbec neobnovuje a nové príspevky sa objavujú okamžite, bez zbytočného priebežného dopytovania. Môžeme hovoriť o 100% webovej aplikácii, niekedy tiež nazývané ako single-page application.
Výber vývojového prostredia
Z počiatku je potrebné zvoliť si vývojové prostredie. Ja doporučujem PhpStorm alebo webstore, ale pokojne nám postačí Sublime Text či atom.io. V seriáli použijem PhpStorm. Odporúčam ho hlavne z dôvodu, že dokáže napovedať aj Node.js syntax, ostatní by s tým síce nemali mať problém, ale pravdepodobne iba za pomocou ďalšieho pluginu.
Spomínaná IDE nájdete na nasledujúcich odkazoch:
Inštalácia XAMPP a Node.js na Windows
Okrem IDE budeme samozrejme potrebovať sprevádzkovať lokálne Web Server (pre PHP). Ak vyvíjate v PHP, tento krok už budete mať pravdepodobne zaistený. Ak nie, stiahneme XAMPP z adresy https://www.apachefriends.org, a ďalej zvolíme nastavenia ako je na obrázku nižšie. Inštaláciu už len dokončíme klopaním na tlačidlo "Ďalší". Inštalácia je prípadne podrobnejšie popísaná v článku Inštalácia Apache, MySQL a PHP na Windows a prvý PHP skript.
Ďalej teda potrebujeme Node.js. Ten stiahneme z adresy https://nodejs.org a taktiež nainštalujeme. Na
inštaláciu nie je nič zložité, preto nepriložíte ani žiadny obrázok
.
Ďalším krokom bude zapnutie XAMPP. Možno budete mať problém so spustením XAMPP, pretože máte Skype a ten si zaberá port, ktorý zhodou náhod má aj defaultne XAMPP. Najlepším riešim tejto situácie je prenastaviť Skype. Pôjdeme do nastavenia Skype, ďalej do pod nastavení "spojenia" a tam Odznačte možnosť "použiť porty 80 a 443 ako alternatívna pre prichádzajúce spojenia". Reštartujeme Skype a máme hotovo. Teraz len stačí v XAMPP Control Panel naštartovať Apache a MySQL.
Príprava projektu
Je na čase nainštalovať si knižnicu socket.io do
Node.js, ktorá výrazne uľahčuje používanie technológie
WebSocket. Spustíme príkazový riadok (napríklad stlačíme windows
kláves ar, čo nám otvorí okienko spustiť, do ktorého napíšeme
cmd a stlačíme enter). Až sa nám otvorí príkazový
riadok, tak ho pravdepodobne budete mať veľa malý. To spravíme pravým
kliknutím na ikonku hore v nadpise príkazového riadku, zvolíme možnosť
vlastnosti, ďalej si aktivujeme možnosť písmo a veľkosť nastavíme na
12x16 a alebo na takú, ktorá vám vyhovuje , Potvrdíme tlačidlom OK.
Teraz si cez NPM (jedná sa o package manager pre rôzne platformy ako je Node.js alebo napríklad JavaScript celkovo) nainštalujeme potrebné moduly do Node.js, NPM je už súčasťou Node.js, takže ho nemusíte nijako inštalovať.
Konečne sa dostávame k tomu, čo vlastne musíte napísať do príkazového riadka pre inštaláciu socket.io knižnice a ďalších modulov. Ako prvý si musíme vytvoriť adresár pre náš projekt, napríklad "RealtimeKnihaNavstev", pokojne v Dropboxu, niekde vo vašich dokumentoch, skrátka tam, kde máte projekty. V ňom si vytvoríme ďalšie dva adresáre a to PHP a Nodejs. Až budeme mať vytvorené, nainštalujeme socket.io príkazom
npm install socket.io --prefix <cestaDoNodejsSložky>
Ten nám socket.io nainštaluje do nášho Nodejs adresára
<cestaDoNodejsSložky>, čo bude nejaký čas trvať,
prosím čakajte pokiaľ nebude celý proces dokončený (to spoznáte
tak, že už zase budete môcť písať ďalší príkaz). Ďalej budeme
potrebovať modul express. opäť použijeme príkaz NPM install:
npm install express --prefix <cestaDoNodejsSložky>
Tiež bude potrebné modul body-parser:
npm install body-parser --prefix <cestaDoNodejsSložky>
Ak nám vám riešenie s prefixom nepôjde nainštalujeme danej moduly bez udania cesty:
npm install <balíček>
Takže ak sme využili možnosť bez udania cesty tak
musíme adresár node_modules presunúť z
C:\Users\<user>\node_modules do nášho adresára Nodejs,
ktorý sme si vytvorili.
Tým sme dokončili inštaláciu všetkých potrebných doplnkov do Node.js.
V budúcej lekcii, Návštevná kniha cez WebSocket - Server a hlavné PHP trieda , začneme s implementáciou servera. Máte sa na
čo tešiť
