Chat v reálném čase s Node.js

V tomto tutoriálu vytvoříme chatovací systém v reálném čase s Node.js a knihovnou socket.io. Chat umožňuje uživatelům vytvářet soukromé chatovací místnosti, které mohou sdílet s přáteli. Pro avatary použijeme gravatar. Chat můžete spustit lokálně pomocí uzlu nebo jej odeslat do heroku nebo jiného poskytovatele cloudových služeb.

Kód

Zdrojový kód si můžete stáhnout z tlačítka Stáhnout výše. Má spoustu komentářů a je snadné ho sledovat. Začněte s app.js soubor a číst odtud. Zde je několik věcí, které byste měli hledat:

  • Všechny závislosti jsou deklarovány v souboru package.json soubor. Nejsou součástí zip a budete muset spustit npm install získat je.
  • Pro konfiguraci a trasy používáme samostatné soubory JavaScript, aby bylo možné kód lépe spravovat.
  • V souboru tras socket.io ukládá uživatelské jméno, avatar a místnost osoby jako vlastnosti samotného objektu soketu. To nám ušetří spoustu kódu a zjednoduší správu místností.
  • Používáme socket.io Funkce místností 's umožňuje izolovat jeden chat od druhého, k čemuž byla přesně tato funkce vyvinuta.

Design

PSD pro tento tutoriál je k dispozici zdarma v naší členské oblasti spolu s dalšími vychytávkami, které si zamilujete. Staňte se členem zde!

Spuštění chatu

Chcete-li spustit chat, musíte mít nainstalovaný node.js, takže node a npm příkazy lze volat z vašeho terminálu. Stáhněte si kód a rozbalte archiv do složky s názvem nodejs-private-webchat. Poté přejděte do složky, kterou jste vytvořili z terminálu:

cd nodejs-private-webchat/

Spuštěním příkazu ls (nebo dir, pokud používáte Windows) by se mělo zobrazit app.js , package.json a další soubory z archivu. Poté spusťte tento příkaz ke stažení všech knihoven, které chatovací systém používá:

npm install

Tím se nainstalují všechny závislosti popsané v package.json . To může trvat jednu nebo dvě minuty. Až budete hotovi, spusťte následující příkaz a spusťte svůj vlastní místní chat, který můžete vidět na http://localhost:8080

node app.js

Stiskněte ctrl+c zastavit to. Špatnou zprávou je, že do chatu nemůžete pozvat své přátele, protože běží na vašem vlastním počítači. Chcete-li to vyřešit, musíte jej spustit na webovém serveru. Vlastní nastavení webového serveru pro provoz uzlu není příliš přímočarý proces a vyžaduje hodně dovedností v oblasti správy serveru. Naštěstí je velmi snadné začít s cloudovými platformami, jako je Heroku, což vám ukážu příště.

Hostování chatu na Heroku

Heroku je cloudová hostingová platforma, která automatizuje nasazení a škálování webových aplikací. Nabízí bezplatný tarif, který je dostačující pro méně vytížené aplikace, jako je náš chat. Zde je to, co musíte udělat:

  1. Vytvořte si účet, pokud jej ještě nemáte.
  2. Nainstalujte heroku toolbelt pro váš operační systém. Umožní vám přístup k heroku příkaz z okna terminálu.
  3. Inicializujte prázdné úložiště git (vysvětleno níže)
  4. Přeneste svůj kód do herku. Tím jej nasadíte a získáte adresu URL, kterou můžete sdílet se svými přáteli.

Můžete si také přečíst tuto příručku Začínáme a po ní tuto příručku o spouštění aplikací node.js.

Vytvoření git repo

Heroku toolbelt nainstaluje heroku a git systém správy verzí. Abyste mohli nasadit svou aplikaci na heroku, musíte vytvořit git repo (není zde žádný ftp). Chcete-li to provést, spusťte tento příkaz:

git init

Potom musíme říct gitu, aby nezahrnoval node_modules složky do vašeho repo. Tato složka může být poměrně velká a do git prostě nepatří. Chcete-li složku ignorovat, vytvořte nový prázdný textový soubor s názvem .gitignore s následujícím obsahem:

node_modules/

Nyní můžete svůj kód odevzdat do svého čerstvého nového repozitáře! Napište tyto příkazy:

git add
git commit -m 'Initial commit'

Existuje speciální soubor, který Heroku očekává, že najde ve vašem repo, aby bylo možné spustit aplikaci. Říká se mu Procfile - již je pro vás vytvořen v archivu zip, takže nemusíte nic dělat. Ale pokud jste zvědaví, obsahuje následující příkaz:

web: node app.js

Nyní jsme připraveni přesunout aplikaci do heroku!

Zatlačení na Heroku

Následující dva příkazy se provádějí pouze při prvním použití heroku utility. Nejprve se musíte přihlásit k heroku z nástroje příkazového řádku:

heroku login

Poté musíte přidat svůj ssh klíč, abyste mohli vložit kód bez zadání hesla:

heroku keys:add

Dále musíte vytvořit novou aplikaci heroku z kódu v této složce:

heroku create

A konečně jsme připraveni poslat kód! Zadejte tento příkaz:

git push heroku master

Tento řádek odešle kód vaší aplikace do heroku, kde jejich servery zpracují váš soubor package.json a nainstalují všechny knihovny, které vaše aplikace potřebuje. Udělejte to pokaždé, když potřebujete nahrát novou verzi kódu (musíte provést potvrzení předem). Chcete-li otevřít svůj vlastní webový chat ve vašem prohlížeči, spusťte tento příkaz:

heroku open

Tím se otevře na kartě ve vašem výchozím prohlížeči.

Doufám, že se vám náš malý chat líbí!

Je toho ale mnohem víc, co se na něm dá vylepšit. Můžete implementovat upozornění na nové zprávy se zvukem HTML5, umožnit připojení více než dvěma lidem do stejné místnosti, vyžadovat před připojením hesla a další. Pokud uděláte něco skvělého, určitě se o to podělte v komentářích, aby to všichni viděli :)