1. díl - Návštěvní kniha přes WebSocket - Úvod a instalace nástrojů

PHP Návštěvní kniha přes WebSocket 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:

Technologie Node.js
  1. Uživatel přes AJAX odešle formulář
  2. 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.
  3. Kromě uložení dat do databáze pošle PHP data i na server, kde běží Node.js.
  4. Node.js data přepošle socketem zpět k uživatelům, kteří mají stránku otevřenou.
  5. 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.

Instalace XAMPPu na Windows

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 "RealtimeKniha­Navstev", 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ím dílu začneme s implementací serveru, máte se na co těšit :)


 

  Aktivity (3)

Článek pro vás napsal Patrik Smělý (SogoCZE)
Avatar
Autor se věnuje front-end i back-end vývoji webových stránek, nejvíce pracuje s jazykem PHP a Javascript. Rád se učí nové věci a někdy strčí nos i do 3D / 2D grafiky.

Jak se ti líbí článek?
Celkem (6 hlasů) :
4.833334.833334.833334.833334.83333


 



 

 

Komentáře
Zobrazit starší komentáře (10)

Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:

Nepíše se NPM, ale npm, viz https://www.npmjs.com.

Nyní musíme adresář node_modules přesunout z C:\Users\<user>\no­de_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

Proč by měl kdokoli cokoli přesouvat? Nebylo by lepší naučit lidi jak to udělat lépe, tedy přejít konzolí do místa, kde chci instalovat (pravděpodobně nějaká src/ složka), pak projet npm instalace balíčků (případně přidat --save-dev flag), zálohovat jen a pouze package.json a tedy přidat node_modules do (.git)ignore?

Přeci nebudeš zálohovat všechno z node_modules - docela šílenství, nemyslíš? Využívat něco jiného než git, či obdobné systémy, pro primární zálohu není zrovna nejlepší cesta. :-)

Editováno 17.11.2015 11:49
Odpovědět 17.11.2015 11:49
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Lukáš Tesař:

Jak je to s webhostingama? Jsou nějaké, které podporují PHP i Node.js?

 
Odpovědět  +1 17.11.2015 12:26
Avatar
Patrik Smělý (SogoCZE)
Tým ITnetwork
Avatar
Odpovídá na Honza Bittner
Patrik Smělý (SogoCZE):

Ahoj, slovo npm jsem opravil a taktéž chybu ve slově install :P, dále jsem přidal postup při kterém uvedeme cestu kam se mají baličky nainstalovat :) děkuji za upozornění :).

Odpovědět 17.11.2015 12:29
PHP můj oblíbený jazyk......
Avatar
Patrik Smělý (SogoCZE)
Tým ITnetwork
Avatar
Odpovídá na Lukáš Tesař
Patrik Smělý (SogoCZE):

Ahoj, obojetný webhosting asi nenajdeš, vzhledem k tomu že je k Nodejs obvykle potřeba přístup k SSH(Konzoli, příkazovému řádku) tak je to celkem obtíž :). Já k Nodejs využívám VPS(https://cs.wikipedia.org/…C3%AD_server) postavené na linuxu, kde mi jede PHP i Nodejs :). Třeba zde na ITnetworku je pro chat speciální VPS server a samotné PHP jede na webhostingu.

Odpovědět 17.11.2015 12:37
PHP můj oblíbený jazyk......
Avatar
hitzoR
Člen
Avatar
hitzoR:

Jinak ještě pro začátek by se slušelo dodat, že WebSockety nepodporuje IE 9 a nižší, což dost často může být problém a není úplně dobré je používat pro kritický use-case.

 
Odpovědět 17.11.2015 13:27
Avatar
Patrik Smělý (SogoCZE)
Tým ITnetwork
Avatar
Odpovídá na hitzoR
Patrik Smělý (SogoCZE):

Ano to je pravda, já ale volím metodu že real-time je pouze takový doplněk, protože php to vypíše tak i tak a ten kdo má podporu websocketů bude mít real-time a kdo né tak bude mít normální webovou aplikaci :).

Odpovědět  +2 17.11.2015 13:42
PHP můj oblíbený jazyk......
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Patrik Smělý (SogoCZE)
Honza Bittner:

--prefix pro určení cesty se moc nepoužívá (je to redundantní u vícero příkazů), lepší je si prostě otevřít danou složku v terminálu. :-`

Odpovědět 17.11.2015 16:18
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Patrik Smělý (SogoCZE)
Tým ITnetwork
Avatar
Odpovídá na Honza Bittner
Patrik Smělý (SogoCZE):

Takhle to nefunguje teda aspoň na windows :), otevřel jsem si v cmd přes cd svojí složku a dal jsem npm install <balíček> a stejně mi to nainstalovalo do složky.

C:\Users\<user>\no­de_modules

Odpovědět  ±0 17.11.2015 16:40
PHP můj oblíbený jazyk......
Avatar
Artas
Redaktor
Avatar
Artas:

Asi mas neco spatne nastavene. Podle oficialni dokumentace https://docs.npmjs.com/cli/install npm install bez argumentu vzdy instaluje do slozky node_modules v aktualnim adresari

 
Odpovědět  +1 17.11.2015 17:20
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Patrik Smělý (SogoCZE)
Honza Bittner:

Používám konzoli z gitu, ale co vím, mělo by se to instalovat do složky, kde "stojíš".

Odpovědět  +1 17.11.2015 21:42
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 20. Zobrazit vše