Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 80% výuky zdarma!
Pouze tento týden sleva až 80 % na e-learning týkající se Pythonu
birthday

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
  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

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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
Článek pro vás napsal 2tix
Avatar
Jak se ti líbí článek?
1 hlasů
jako Autor se věnuje C#, tvorbě her v C++ a JavaScriptu
Aktivity (4)

 

 

Komentáře

Avatar
weverka
Člen
Avatar
weverka:21. ledna 15:06

Super návod. Moc ti děkuji řeší to všechny mé problémy s chatem na webu. Podporují webhostingy node.js?

Odpovědět
21. ledna 15:06
Weby jsou budoucnost IT
Avatar
2tix
Překladatel
Avatar
2tix:21. ledna 16:16

Normální ftp server ne, ale zkus použít Heroku , stačí když klienta nahraješ na svůj hosting a server s Node.js na Heroku, navíc je to asi do pěti aplikací zdarma.

 
Odpovědět
21. ledna 16:16
Avatar
weverka
Člen
Avatar
Odpovídá na 2tix
weverka:21. ledna 17:28

Díky, rozhodně zkusím. Kdy bude další díl. A bude celý seriál zdarma?

Odpovědět
21. ledna 17:28
Weby jsou budoucnost IT
Avatar
2tix
Překladatel
Avatar
2tix:21. ledna 17:32

Další díl bych chtěl napsat do příštího úterý, o tom jestli bude celý seriál zdarma nerozhoduju já, takže nevím.

 
Odpovědět
21. ledna 17:32
Avatar
weverka
Člen
Avatar
Odpovídá na weverka
weverka:21. ledna 17:32

Jak to přes to Heroku udělám?

Odpovědět
21. ledna 17:32
Weby jsou budoucnost IT
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
2tix
Překladatel
Avatar
Odpovídá na weverka
2tix:26. ledna 12:11

Není to úplně jednoduché a do komentářů se to určitě nevejde, takže o tom asi na konci napíšu článek.

 
Odpovědět
26. ledna 12:11
Avatar
weverka
Člen
Avatar
Odpovídá na 2tix
weverka:26. ledna 12:59

Díky moc. Bude dnes článek?

Odpovědět
26. ledna 12:59
Weby jsou budoucnost IT
Avatar
2tix
Překladatel
Avatar
2tix:26. ledna 13:24

Už jsem ho odeslal, asi bude chvíli trvat než se publikuje.

 
Odpovědět
26. ledna 13:24
Avatar
Adam Joura
Člen
Avatar
Adam Joura:1. února 15:37

Dík za článek! Jen osobně mám problém s instalací přes npm do Dropboxu, takže pokud někomu npm hází chybu, doporučuji na chvíli Dropbox vypnout.

 
Odpovědět
1. února 15:37
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 9 zpráv z 9.