Pełny kod źródłowy tego tutoriala można znaleźć tutaj:elliotforbes/angular-socket-io-example
W tym tutorialu będziemy się przyglądać jak możemy zbudować aplikację czasu rzeczywistego używając zarówno Angulara 4 jak i biblioteki Socket.io. W przeszłości opisałem jak można wykorzystać surowe websockety i przekonwertować je na obserwowalne przy użyciu biblioteki RxJS w poprzednim tutorialu, który można znaleźć tutaj:Angular Websockets Tutorial
Video Tutorial
Instalacja Socket.IO
Aby wykorzystać bibliotekę socket.io będziemy musieli najpierw zainstalować ją przy użyciu menedżera pakietów node. Możemy to zrobić wpisując następujące polecenie:
npm install socket.io-clientnpm install @types/socket.io-clientZamieniając Websockets w RxJS Subjects
RxJS Subjects są zarówno Observable jak i Observer. Używając tych obiektów, możemy jednocześnie słuchać i wysyłać wiadomości do pojedynczego gniazda Websocket, co zasadniczo otwiera komunikację dwukierunkową i pozwala nam robić fajne rzeczy, takie jak budowanie systemów czatowych.
W tym scenariuszu stworzymy zarówno usługę Websocket, jak i usługę Chat.Usługa Websocket będzie obsługiwać bezpośrednią komunikację z gniazdem, a usługa Chat będzie wystawiać prosty interfejs, z którym nasze inne komponenty mogą łatwo wchodzić w interakcję.
Po zdefiniowaniu usługi Websocket możemy zdefiniować usługę Chat, która posiada tylko konstruktor i jedną sendMsg() funkcję, która będzie używana do wysyłania wiadomości do naszego serwera socket.io.
Używanie naszej usługi czatu
Jeśli chcielibyśmy zacząć używać naszej nowo stworzonej usługi czatu, moglibyśmy zrobić coś takiego:
Moglibyśmy wtedy stworzyć prosty przycisk w naszym pliku ./app.component.html, który wywołałby naszą funkcję sendMessage():<button (click)="sendMessage()">Send Message</button>. Tak długo jak określiłeś swoje nowo utworzone usługi w tablicy app.module.ts providerów, powinieneś mieć nadzieję, że masz teraz aplikację, która może wysyłać i odbierać wiadomości z socket.ioserwera websocket.
Nasz serwer websocket
W tym tutorialu będziemy korzystać z bardzo prostego serwera socket.io opartego na expressserwerze, który będzie nasłuchiwał na dla wszystkich przychodzących połączeń websocket, a po otrzymaniu połączenia wypisze, że użytkownik się połączył. Utwórz nowy plik o nazwie app.js i dodaj do niego następujący kod:
Przed uruchomieniem tego kodu będziesz musiał upewnić się, że zainstalowane są odpowiednie zależności węzła. Możesz to zrobić wpisując
npm i express http socket.io. Możesz uruchomić ten serwer wpisującnode app.js.
Conclusion
Po uruchomieniu powinieneś zobaczyć nasz serwer websocket wypisujący coś podobnego do poniższego wyjścia. Najpierw uruchamia się na porcie 5000, kiedy otworzymy naszego klienta Angular, powinieneś zobaczyć log user connected, a następnie za każdym razem, kiedy wyślemy wiadomość z naszego klienta, zobaczysz treść tej wiadomości wypisaną poniżej.
$ node app.jsstarted on port 5000user connectedMessage Received: "Test Message"Message Received: "Test Message"
.