Deepinder Singh
Deepinder Singh

Suivre
25 novembre 2019 · 7 min lecture

Cet article a été déplacé ici. Pour la dernière version de cet article, veuillez consulter le lien indiqué.

Photo de Pankaj Patel sur Unsplash

Ceci pourrait être la question la plus redoutée des nouveaux développeurs sur la façon de créer une application avec Angular et Socket.io. Comme la plupart des applications utilisent des sockets pour la communication en temps réel du Frontend avec le Backend. Donc, aujourd’hui, je vais parler de la façon d’intégrer socket.io avec une application Angulaire. Ce code fonctionnerait pour toutes les versions Angulaires ci-dessus Angular1.

Mis à jour — Cet article a été mis à jour en décembre 2020 pour gérer les dernières modifications de la version v3 de socket.io

Commençons par créer un projet node en premier.

Créez un nouveau directory puis entrez-le.

mkdir socketio-node

Cela créera un dossier vide avec le nom socketio-node.

Nous allons utiliser le nœud.JS web framework express. Assurez-vous que le nœud.JS est installé sur votre système.

Créons d’abord un fichier manifeste package.json qui décrit notre projet.
Créez un fichier nommé package.json et collez-y le code ci-dessous.(Vous pouvez également le faire avec npm init)

{
"name": "socketio-node",
"version": "0.0.1",
"description": "my first socket.io app",
"dependencies": {}
}

Maintenant, afin de remplir facilement la propriété dependencies nous devons installer express, tapez ceci dans le terminal.

npm install express

Il installera et ajoutera la dernière version d’express dans notre projet et votre dependencies ressemblera maintenant à

"dependencies": {
"express": "^4.17.1"
}

Maintenant qu’express est installé, nous pouvons créer un index.js fichier qui va configurer notre application.

const app = require('express')();
const http = require('http').createServer(app);
app.get('/', (req, res) => {
res.send('<h1>Hey Socket.io</h1>');
});
http.listen(3000, () => {
console.log('listening on *:3000');
});

Ce code est expliqué dans les étapes suivantes :

  • Express initialise app pour être un gestionnaire de fonction que vous pouvez fournir à un serveur HTTP (comme on le voit à la ligne 2).
  • Nous définissons un gestionnaire de route / qui est appelé lorsque nous arrivons à la maison de notre site Web.
  • Nous faisons écouter le serveur http sur le port 3000.

Si vous exécutez node index.js vous devriez voir ce qui suit:

L’ouverture http://localhost:3000 dans le navigateur ressemblerait à:

Intégrons maintenant socket.io dans notre application node. Tout d’abord, nous devons installer la dépendance socket.io dans notre application. Exécutez ceci dans le terminal.

npm install socket.io

Ceci installera le module et ajoutera la dépendance à package.json. Maintenant, éditons index.js pour l’ajouter:

const app = require('express')();
const http = require('http').createServer(app);
const io = require('socket.io')(http, {
cors: {
origins:
}
});app.get('/', (req, res) => {
res.send('<h1>Hey Socket.io</h1>');
});io.on('connection', (socket) => {
console.log('a user connected');
socket.on('disconnect', () => {
console.log('user disconnected');
});
});http.listen(3000, () => {
console.log('listening on *:3000');
});

Notez que j’initialise une nouvelle instance de socket.io sur la ligne 3 en passant l’objet http (le serveur HTTP) et les options cors (mises à jour pour socket.io v3) pour autoriser notre url localhost angulaire, vous pouvez mettre l’url ou votre client frontend, dans mon cas c’était localhost:4200
Puis j’écoute les événements connection et disconnection pour les sockets entrants, et je l’enregistre sur la console.

Notre Backend est bon pour l’instant, nous reviendrons à notre code node lorsque nous implémenterons plus d’événements plus loin.

Commençons par créer une application Angular maintenant. Je vais créer une nouvelle application Angular à partir de zéro, alors que la plupart d’entre vous en auraient déjà créé une avec vous.
Ceux qui ont déjà une application Angular qui fonctionne peuvent ignorer le code suivant:

npm install -g @angular/cli
ng new socketio-angular

Cela installerait la dernière version de Angular CLI et créerait une nouvelle application angulaire à partir de zéro.

Ajoutons maintenant socket.io dependency dans notre application Angular.

cd socketio-angular
npm install socket.io-client

Cela installerait la dernière bibliothèque socket.io-client dans notre application Angular.

Commençons maintenant par créer un service à gérer socket.io connexion. Je créerais un service de niveau racine singleton nommé socketio.service.ts et l’inclurais dans AppModule. Vous pouvez créer le service en fonction de la structure de votre projet.
Vous pouvez créer le service en exécutant la commande suivante.

ng g s socketio

Cela créerait un service nommé socketio.service.ts. La structure du répertoire ressemblerait à ceci. Ceci n’est qu’une simple démo d’une page, j’ai donc ajouté le service dans le dossier de base comme celui-ci.

Maintenant, allez dans le fichier socketio.service.ts et importez ce qui suit:

import { io } from 'socket.io-client';

Ajoutons maintenant le point de terminaison du socket auquel nous connecterions le socket à l’intérieur du fichier environment.ts.

export const environment = {
production: false,
SOCKET_ENDPOINT: 'http://localhost:3000'
};

Essayons maintenant de nous connecter à notre socket et de créer une connexion de socket. Nous devons d’abord ajouter SocketioService dans notre AppModule et injecter le service dans notre app.component.ts. Ajoutons d’abord le service à nos fournisseurs. Dans app.module.ts faites ceci:

@NgModule({
declarations: ,imports: ,providers: ,
bootstrap: })export class AppModule { }

Et passons à socketio.service.ts et écrivons une fonction d’initialisation de socket.

export class SocketioService { socket; constructor() { } setupSocketConnection() {
this.socket = io(environment.SOCKET_ENDPOINT);
}
}

Cela déclarera une variable nommée socket puis après avoir appelé la méthode setupSocketConnection, la variable socket contiendrait l’objet socket connecté.

Maintenant, appelons cette méthode à partir de app.component.ts dans ngOnInit.

export class AppComponent implements OnInit { title = 'socketio-angular'; constructor(private socketService: SocketioService) {} ngOnInit() {
this.socketService.setupSocketConnection();
}
}

Si vous utilisez Angular 6 et supérieur, vous risquez de rencontrer cette erreur.

Uncaught ReferenceError: global is not defined

C’est parce que sur la version 6 de l’équipe Angular CLI Angular, supprimez la cale pour global et d’autres nœuds intégrés. Si nous utilisons une bibliothèque qui suppose que ces globaux sont présents (socket.io-client dans notre cas), vous pouvez essayer de les caler manuellement dans votre fichier polyfills.ts:

// Add global to window, assigning the value of window itself.
(window as any).global = window;

En ajoutant cette ligne à votre polyfills.ts le fichier résoudrait le problème et votre application fonctionnerait à nouveau. Pour en savoir plus sur le problème ci-dessus, suivez ceci link.

Après avoir exécuté l’application Angular maintenant, vous pouvez voir le socket connecté et notre console d’application de nœud affichant a user connected comme ceci :

Lorsque vous déconnectez le socket ou fermez la page Web, vous pouvez voir le message user disconnected sur la console.

Avec cela, nous avons terminé notre initiliazation des sockets. Nous allons maintenant apprendre à émettre et à écouter les événements.

Enregistrons un événement appelé my messagedans notre fichier de nœud index.js et console les données et nous émettrons le même événement à partir de l’application Angular.

io.on('connection', (socket) => { console.log('a user connected'); socket.on('disconnect', () => { console.log('user disconnected'); }); socket.on('my message', (msg) => { console.log('message: ' + msg); });});

Et émettons le même événement à partir du code angulaire

setupSocketConnection() { this.socket = io(environment.SOCKET_ENDPOINT); this.socket.emit('my message', 'Hello there from Angular.');}

Ce code émettrait l’événement nommé my message et il imprimerait ce qui suit sur notre console de nœud. Vous pouvez voir le message « Bonjour à partir d’Angular »‘ Nos événements personnalisés fonctionnent maintenant.

Maintenant, nous allons emitun événement du server side. Nous diffuserons l’événement à tous les utilisateurs connectés. Nous diffuserons le même message que celui que nous avons reçu du client et y ajouterons une chaîne de serveur.

io.on('connection', (socket) => {
socket.on('my message', (msg) => {
io.emit('my broadcast', `server: ${msg}`);
});
});

Ajoutons un écouteur pour l’événement my broadcast sur notre application Angular maintenant.

this.socket.on('my broadcast', (data: string) => {
console.log(data);
});

Après avoir fait cela, vous pouvez vérifier votre broswer console, ce serait printquelque chose comme ça. Il imprime un message du serveur, qui a émis la diffusion.

Nous avons couvert les parties basic de la connexion d’un nœud socket.io app avec une application Angulaire.

Astuce bonus: Vous pouvez également envoyer query parameters au Backend lors de la connexion au socket en utilisant options avec une URL dans une connexion.

this.socket = io(environment.SOCKET_ENDPOINT, {
auth: {
token: 'cde'
}
});

À fetchcette information sur le Backend, nous devons le faire comme ceci:

io.on('connection', (socket) => {
let token = socket.handshake.auth.token;
});

Cela renverrait la valeur cde passé par Frontend.

Vous pouvez vérifier tout l’exemple de code écrit ci-dessus sur mon github.

Ceci conclut mon article sur la création d’un real time application avec Angular et Socket.io avec NodeJS div>. J’ai couvert le basics de la connexion des applications. Il y a beaucoup plus d’informations sur les sockets qui peuvent être explorées comme les chambres, le statut hors ligne en ligne, l’envoi de plus de données, la récupération des utilisateurs en ligne. Ces informations ne peuvent pas être couvertes dans un seul article. Sera writesur ces sujets si vous liked my work sur ce blog.

Notez vos avis.

J’ai aimé mon travail ? Achète-moi un café.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.