Le code source complet de ce tutoriel peut être trouvé ici:elliotforbes/angular-socket-io-example
Dans ce tutoriel, nous allons examiner comment nous pouvons construire une application en temps réel en utilisant à la fois Angular 4 et la bibliothèque Socket.io. J’ai couvert dans lepast comment vous pouvez utiliser les websockets brutes et les convertir en observables en utilisant la bibliothèque RxJS dans un tutoriel précédent qui peut être trouvé ici:Angular Websockets Tutorial
Tutoriel vidéo
Installation de Socket.IO
Afin d’utiliser la bibliothèque socket.io, nous devrons d’abord l’installer en utilisant le gestionnaire de paquets node. Nous pouvons le faire en tapant ce qui suit:
npm install socket.io-clientnpm install @types/socket.io-clientTransformer les Websockets en sujets RxJS
Les sujets RxJS sont à la fois un Observable et un Observer. En utilisant ces Subjectsnous pouvons simultanément écouter et envoyer des messages à un seul websocket, ceciouvre essentiellement la communication bidirectionnelle et nous permet de faire des choses cool comme construire des systèmes de chat.
Dans ce scénario, nous allons créer à la fois un service Websocket et un service Chat.Le service Websocket gérera la communication directe avec le socket et le serviceChat exposera une interface simple avec laquelle nos autres composants pourront facilementinteragir.
Une fois que nous avons défini ce service websocket, nous pouvons ensuite définir un service de chat qui comporte juste un constructeur et une sendMsg() fonction qui sera utilisée pour envoyer des messages à notre serveur socket.io.
Utilisation de notre service de chat
Si nous voulions commencer à utiliser notre service de chat nouvellement créé, nous pourrions quelque chose comme ceci:
Nous pourrions alors créer un simple bouton dans notre fichier ./app.component.html qui appellerait notre fonction sendMessage():<button (click)="sendMessage()">Send Message</button>. Tant que vous avez spécifié vos services nouvellement créés dans le tableau des fournisseurs app.module.ts, vous devriez, avec un peu de chance, avoir maintenant une application qui peut envoyer et recevoir des messages d’un serveur web basé sur socket.io.
Notre serveur Websocket
Dans ce tutoriel, nous allons tirer parti d’un serveur très simple basé sur expresssocket.io qui écoutera sur toutes les connexions websocket entrantes et, à la réception d’une connexion, il imprimera qu’un utilisateur s’est connecté. Créez un nouveau fichier appelé app.js et ajoutez le code suivant :
Avant d’exécuter ce code, vous devrez vous assurer que les dépendances appropriées du nœud sont installées. Vous pouvez le faire en tapant
npm i express http socket.io. Vous pouvez exécuter ce serveur en tapantnode app.js.
Conclusion
Lorsque vous l’exécutez, vous devriez voir notre serveur websocket imprimer quelque chose comme la sortie ci-dessous. Il démarre d’abord sur le port 5000, quand nous ouvrons ensuite notre client Angular, vous devriez le voir enregistrer user connected et ensuite, à chaque fois que nous envoyons un message depuis notre client, vous voyez le contenu de ce message s’afficher ci-dessous.
$ node app.jsstarted on port 5000user connectedMessage Received: "Test Message"Message Received: "Test Message"