Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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:

Technologie Node.js - WebSocket - Real-time návštěvní kniha v PHP
  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 - WebSocket - Real-time návštěvní kniha v PHP

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í lekci, Návštěvní kniha přes WebSocket - Server a hlavní PHP třída, budeme implementovat Node.js server.


 

Všechny články v sekci
WebSocket - Real-time návštěvní kniha v PHP
Přeskočit článek
(nedoporučujeme)
Návštěvní kniha přes WebSocket - Server a hlavní PHP třída
Článek pro vás napsal Patrik Smělý
Avatar
Uživatelské hodnocení:
25 hlasů
Autor miluje filosofii, sci-fi, technologie, hry a hlavně svobodu. Aktivně se věnuje programování, designu, 3D grafice, správě sítí a trochu méně hardwaru. Mimo technologické zaměření se velice zajímá o politiku a psychologii.
Aktivity