Vytvoření realtime aplikace pomocí Angularu a Socket.io Tutorial

Úplný zdrojový kód tohoto tutoriálu naleznete zde:elliotforbes/angular-socket-io-example

V tomto tutoriálu se budeme zabývat tím, jak můžeme vytvořit realtimeaplikaci pomocí Angularu 4 a knihovny Socket.io. V minulosti jsem se zabýval tím, jak lze využít surové websockety a převést je na pozorovatelné pomocí knihovny RxJS v předchozím tutoriálu, který najdete zde: Angular Websockets Tutorial

Video Tutorial

Instalace knihovny Socket.IO

Pro využití knihovny socket.io ji budeme muset nejprve nainstalovat pomocí správce balíčků node. To můžeme provést zadáním následujícího příkazu:

npm install socket.io-clientnpm install @types/socket.io-client

Přeměna websocketů na subjekty RxJS

Subjekty RxJS jsou jak Observable, tak Observer. Pomocí těchto Subjektů můžeme souběžně naslouchat a posílat zprávy na jeden websocket, což v podstatě otevírá obousměrnou komunikaci a umožňuje nám dělat zajímavé věci, například vytvářet chatovací systémy.

V tomto scénáři budeme vytvářet jak websocketovou službu, tak službu Chat.Websocketová služba bude obsluhovat přímou komunikaci se socketem a služba Chat bude vystavovat jednoduché rozhraní, se kterým mohou naše ostatní komponenty snadnointeragovat.

Když jsme definovali tuto websocketovou službu, můžeme poté definovat službu chatu, která obsahuje pouze konstruktor a jednu sendMsg() funkci, která bude sloužit k odesílání zpráv na náš server socket.io.

Použití naší chatovací služby

Pokud bychom chtěli začít používat naši nově vytvořenou chatovací službu, mohli bychom něco takového:

V našem souboru ./app.component.html bychom pak mohli vytvořit jednoduché tlačítko, které by volalo naši funkci sendMessage():<button (click)="sendMessage()">Send Message</button>. Pokud jste své nově vytvořené služby specifikovali v poli app.module.ts providers, měli byste snad nyní mít aplikaci, která dokáže odesílat a přijímat zprávy z webového serveru založeného na socket.io.

Náš websocketový server

V tomto tutoriálu budeme využívat velmi jednoduchý expressserver založený na socket.io, který bude naslouchat na pro všechna příchozí websocketová spojení a po přijetí spojení vypíše, že se připojil uživatel. Vytvořte nový soubor s názvem app.js a přidejte následující kód:

Před spuštěním tohoto kódu budete muset zajistit, aby byly nainstalovány správné závislosti uzlu. To můžete provést zadáním příkazu npm i express http socket.io. Tento server můžete spustit zadáním node app.js.

Závěr

Po spuštění byste měli vidět, že náš websocketový server vypíše něco podobnéhojako je níže uvedený výstup. Nejprve se spustí na portu 5000, když pak otevřeme našeho Angularclienta, měli byste vidět, že se přihlásí user connected a pak pokaždé, když odešleme zprávu z našeho klienta, uvidíte, že obsah této zprávy je vypsán níže.

 $ node app.jsstarted on port 5000user connectedMessage Received: "Test Message"Message Received: "Test Message"