1. diel - Real-time kniha návštev - Príprava prostredia pre projekt

Zaujímalo vás niekedy, ako Facebook zobrazí bublinu s udalosťou presne v moment, kedy nastane? Alebo premýšľali ste, ako funguje tunajší real-time chat? V tomto seriáli sa naučíme, ako obnoviť stránku v prehliadači používateľa a to iba za použitia JavaScriptu, ako na serveri ( Node.js), tak i na klientovi ( Vanilla JavaScript). 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 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. Ď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. Ak je vám Node.js novinkou, odporúčam najskôr prejsť tunajšie Node.js kurz.

Princíp Aplikácia

Než sa do toho pustíme, ukážme si ako celý systém funguje:

1. JavaScript na klientovi dáta zvaliduje a odošle formulár cez Socket.io
2. Node.js server dáta uloží do databázy
3. Server odošle nové dáta všetkým pripojeným klientom
4. Javascript u užívateľov vloží dáta do stránky a zmeny sa ihneď prejaví všetkým čitateľom, ktorí majú stránku otvorenú

Vzhľadom k tomu, že v aplikácii musí byť Socket.io, budeme používať protokol typu full-duplex (Socket.io), 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é si zvoliť vývojové prostredie. Ja doporučujem webstore, ale pokojne nám postačí Sublime Text či Atom.io. V seriáli použijem webstore. 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.

Inštalácia Node.js

Ď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é. Klasickú inštaláciu programu by mal vedieť každý, najmä my:)

Príprava projektu

Je na čase nainštalovať si knižnicu Socket.io do Node.js. Spustíme si príkazový riadok (napríklad stlačením klávesov Windows + R, čo nám otvorí okienko spustiť, do ktorého napíšeme cmd a stlačíme kláves Enter). Po otvorení príkazového riadka 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:) , Zmeny potvrdíme tlačidlom OK.

NPM je N ode.js p ackage m anager pre rôzne platformy ako je Node.js alebo priamo JavaScript. Package manager sa nám stará o závislosti balíčkov (rozšírenia). Teraz si cez NPM inštalujeme potrebné moduly do Node.js, NPM je už súčasťou Node.js, takže ho nemusíme nijako inštalovať.

Pomaly sa dostávame k tomu, čo vlastne musíme napísať do príkazového riadka pre inštaláciu knižnice socket.io a ďalších modulov. Ako prvý si musíme vytvoriť adresár pre náš projekt, napríklad RealtimeKnihaNavstev/, pokojne v Dropboxu alebo niekde tam, kde máte projekty. V ňom si vytvoríme ďalšie dva adresáre a to Client/ a Server/.

Server

Prejdime do zložky Server/ v priečinku s projektom pomocou príkazu:

cd <cestaDoSložky>\Server

Socket.io nainštalujeme pomocou príkazu:

npm install socket.io --save

Tým sme dokončili inštaláciu všetkých potrebných doplnkov do Node.js servera. Pre zaujímavosť, zdrojáky Socket.io (a všetkých ďalších balíčkov) nájdeme v zložke node_modules/.

Klient

Do klienta nainštalujeme balík live-server, ktorý nám umožní auto-reload. Teda vždy, keď zmeníme kód aplikácie, stránka sa obnoví. Prejdime teda do nadradeného priečinka cez príkazový riadok týmto príkazom:

cd ..

Teraz surfujte do zložky Client/:

cd <cestaDoSložky>\Client

A nainštalujeme balík live-server:

npm install live-server

Prvý kód a skúška live-servera

Teraz vyskúšame novo nainštalovaný live-server. V zložke Client/ vytvoríme súbor index.html s nasledujúcim obsahom:

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

Teraz v zložke s klientom spustíme príkaz:

live-server --port=8080

Ak sa server nespustí (príkaz live-server príkaz neexistuje alebo nebol rozpoznaný), skúste nainštalovať live-server globálne príkazom npm install -g live-server.

Po spustení príkazu by sa nám mal zapnúť prehliadač s URL 127.0.0.1:8080 (alebo localhost: 8080). Stránka bude vyzerať takto:

Ak zmeníme text Hello world! na Hi world! v súbore index.html a uložíme ho, automaticky sa nám stránka obnoví a text na stránke sa zmení.

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

V ďalšej lekcii, Real-time kniha návštev - Databáza a CRUD , si vytvoríme server a databázu. Precvičíme si zápis do databázy MongoDB a naučíme sa upravovať a odstraňovať dáta v databáze.