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 - Real-time kniha návštěv - Příprava prostředí pro projekt

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 a to pouze za použití JavaScriptu, jak na serveru (Node.js), tak i na klientovi (Vanilla JavaScript). 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 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. 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. Pokud je vám Node.js novinkou, doporučuji nejdříve projít zdejší Node.js kurz.

Princip Aplikace

Než se do toho pustíme, ukažme si jak celý systém funguje:

Princip Socket.io - Websocket - Real-time kniha návštěv
  1. JavaScript na klientovi data zvaliduje a odešle formulář přes Socket.io
  2. Node.js server data uloží do databáze
  3. Server odešle nová data všem připojeným klientům
  4. Javascript u uživatelů vloží data do stránky a změny se ihned projeví všem čtenářům, kteří mají stránku otevřenou

Vzhledem k tomu, že v aplikaci musí být Socket.io, budeme používat protokol typu full-duplex (Socket.io), 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 si zvolit vývojové prostředí. Já doporučuji WebStorm, ale klidně nám postačí Sublime Text či Atom.io. V seriálu použiji WebStorm. 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.

Instalace Node.js

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. Klasickou instalaci programu by měl umět každý, zejména my :)

Příprava projektu

Je na čase nainstalovat si knihovnu Socket.io do Node.js. Spustíme si příkazový řádek (například stisknutím kláves Windows+R, což nám otevře okénko spustit, do kterého napíšeme cmd a stiskneme klávesu Enter). Po otevření příkazového řádku 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 :), změny potvrdíme tlačítkem OK.

Npm je Node.js package manager pro různé platformy jako je Node.js nebo přímo JavaScript. Package manager se nám stará o závislosti balíčků (rozšíření). Nyní si přes npm instalujeme potřebné moduly do Node.js, NPM je již součástí Node.js, takže jej nemusíme nijak instalovat.

Pomalu se dostáváme k tomu, co vlastně musíme napsat do příkazového řádku pro instalaci knihovny socket.io a dalších modulů. Jako první si musíme vytvořit adresář pro náš projekt, například RealtimeKnihaNavstev/, klidně v Dropboxu nebo někde tam, kde máte projekty. V něm si vytvoříme další dva adresáře a to Client/ a Server/.

Server

Přejděme do složky Server/ ve složce s projektem pomocí příkazu:

cd <cestaDoSložky>\Server

Socket.io nainstalujeme pomocí příkazu:

npm install socket.io --save

Tím jsme dokončili instalaci všech potřebných doplňků do Node.js serveru. Pro zajímavost, zdrojáky Socket.io (a všech dalších balíčků) najdeme ve složce node_modules/.

Klient

Do klienta nainstalujeme balíček live-server, který nám umožní auto-reload. Tedy vždy, když změníme kód aplikace, stránka se obnoví. Přejděme tedy do nadřazené složky přes příkazový řádek tímto příkazem:

cd ..

Nyní navigujme do složky Client/:

cd <cestaDoSložky>\Client

A nainstalujeme balíček live-server:

npm install live-server

První kód a zkouška live-serveru

Nyní vyzkoušíme nově nainstalovaný live-server. Ve složce Client/ vytvoříme soubor index.html s následujícím obsahem:

<!DOCTYPE html>
<html>
<head>
    <title>Hello world!</title>
</head>
<body>
    Hello world!
</body>
</html>

Nyní ve složce s klientem spustíme příkaz:

live-server --port=8080

Pokud se server nespustí (příkaz live-server příkaz neexistuje nebo nebyl rozpoznán), zkuste nainstalovat live-server globálně příkazem npm install -g live-server.

Po spuštění příkazu by se nám měl zapnout prohlížeč s URL 127.0.0.1:8080 (nebo localhost:8080). Stránka bude vypadat takto:

Hello world!
127.0.0.1:8080

Pokud změníme text Hello world! na Hi world! v souboru index.html a uložíme ho, automaticky se nám stránka obnoví a text na stránce se změní.

Pro malý úvod a test funkčnosti balíčku by to dnes stačilo.

V další lekci, Real-time kniha návštěv - Databáze a CRUD, si vytvoříme server a databázi. Procvičíme si zápis do databáze MongoDB a naučíme se upravovat a odstraňovat data v databázi.


 

Všechny články v sekci
Websocket - Real-time kniha návštěv
Přeskočit článek
(nedoporučujeme)
Real-time kniha návštěv - Databáze a CRUD
Článek pro vás napsal Lukáš Michalik
Avatar
Uživatelské hodnocení:
10 hlasů
jako Autor se věnuje C#, tvorbě her v C++ a JavaScriptu
Aktivity