Non classé

Travailler avec Ionic 4 et Socket.io

Travailler avec Sockets est devenu très facile au fil des ans, et même si cela peut sembler intimidant au début, nous allons alors apprendre ensemble à l’utiliser facilement en combinaison avec le Framework Ionic 4.

Dans ce tutoriel, nous allons créer une application de chat avec :

  • Un serveur Node simple qui permet les connexions socket.
  • Une application Ionic qui se connecte à notre serveur.

Nous pourrons ensuite envoyer des messages à un groupe de discussion à partir de notre application..

Création d'un serveur de Node avec Socket.io

Comme nous avons besoin de deux parties dans ce tutorial, nous commençons avec un serveur Node. Vous pouvez créer un nouveau projet Node en exécutant les commandes ci-dessous:

mkdir SocketServer
cd SocketServer
npm init
npm install express socket.io

Vous avez maintenant un dossier avec un fichier package.json, mais pas encore vraiment un serveur. Par conséquent, créez un nouveau fichier index.js et insérez:

let app = require('express')();
let server = require('http').createServer(app);
let io = require('socket.io')(server);
io.on('connection', (socket) => {
  socket.on('disconnect', function(){
    io.emit('users-changed', {user: socket.username, event: 'left'});  
  });
  socket.on('set-name', (name) => {
    socket.username = name;
    io.emit('users-changed', {user: name, event: 'joined'});    
  });
socket.on('send-message', (message) => {
    io.emit('message', {msg: message.text, user: socket.username, createdAt: new Date()});    
  });
});
var
port = process.env.PORT || 3000;
server.listen(port, function(){
   console.log('listening in http://localhost:' + port);
});

Il s’agit de notre implémentation de base de Socket côté serveur.

Toutes nos fonctions sont encapsulées dans le bloc io.on (‘connection’), donc celles-ci ne se produiront qu’une fois qu’un client se connectera au serveur. Vous pouvez également ajouter une authentification au processus, mais actuellement, nous voulons que les choses restent simples.

Nous définissons une fonction pour les événements disconnect, set-name et add-message, ce qui signifie que chaque fois que notre application envoie ces événements, le serveur réagit.

Si nous envoyons un nouveau message, nous émettons (emit) ce message à toutes les personnes connectées sous la forme d’un nouvel objet avec du texte, le nom de l’utilisateur expéditeur et une date. De plus, nous définissons le nom de la connexion socket si un utilisateur envoie son surnom.

Vous pouvez imaginer stocker plus d’informations de cette manière, comme un véritable identifiant utilisateur de votre backend pour coupler étroitement les informations.

Votre Node backend avec Socket.io est maintenant prêt! Vous pouvez le démarrer en exécutant la commande ci-dessous et vous devriez pouvoir y accéder à l’adresse http://localhost:3000

node index.js

Ce backend ne stockera pas les messages, ils ne sont donc disponibles que pour les utilisateurs en ligne. À ce stade, vous pouvez brancher votre base de données et y stocker tous les nouveaux messages afin d’avoir la fonctionnalité d’un vrai chat!

Création de l'application de chat Ionic Socket

Maintenant, nous entrons dans le territoire peut-être mieux connu pour vous, l’application Ionic. En fait, nous n’avons pas besoin de beaucoup, juste une application vide pour commencer et en plus le package ngx-socket-io pour créer la connexion à notre serveur:

ionic start ionicChatSocket blank
cd ionicChatSocket
npm install ngx-socket-io

Au moment d’écrire ceci, j’ai également rencontré des problèmes avec le package, et le moyen le plus simple de le résoudre (comme recommandé uniquement pour d’autres cas également) est de modifier votre app/polyfills.ts à la fin pour ajouter une ligne supplémentaire:

* APPLICATION IMPORTS
*/
(window as any).global = window;

Maintenant que les problèmes ont disparu, nous pouvons simplement ajouter les informations de socket à notre app / app.module.ts. Vous devez fournir l’URL de votre serveur et vous pouvez y ajouter beaucoup plus d’options dont vous pourriez avoir besoin dans des scénarios spéciaux plus tard, mais pour l’instant, nous n’avons pas besoin de beaucoup changer et n’avons besoin que de l’URL du serveur que nous avons créé auparavant, alors allez-y et changez votre module d’application en:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';

const config: SocketIoConfig = { url: 'http://localhost:3000', options: {} };

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,
    SocketIoModule.forRoot(config)
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Maintenant, l’application est capable de se connecter à notre serveur et nous appelons simplement une fonction connect() pour établir cette connexion.

Lorsque vous ajoutez uniquement le bloc de connexion, vous pouvez également voir une nouvelle connexion sur votre serveur si vous insérez des journaux!

Mais nous ne voulons pas nous arrêter là, alors voici ce que nous voulons et faisons aussi:

  • Créez un nom aléatoire au démarrage de l’application
  • Émettez le nom avec l’événement set-name pour que le serveur connaisse notre surnom
  • Réagissez aux événements modifiés par les utilisateurs entrants afin de porter un toast aux utilisateurs qui ont rejoint / quitté le chat
  • Abonnez-vous à l’événement de message comme avant au changement d’utilisateur et ajoutez de nouveaux messages

Comme le package retourne Observable, l’implémentation est très pratique et correspond également à notre style habituel.

En outre, envoyer un nouveau message est aussi simple que d’émettre les données sur le socket, le serveur gérera le reste et saura qui a envoyé les informations en fonction des informations de connexion du socket interne.

Maintenant, allez-y et changez votre app/home/home.page.ts en:

import { Component, OnInit } from '@angular/core';
import { Socket } from 'ngx-socket-io';
import { ToastController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage implements OnInit {
  message = '';
  messages = [];
  currentUser = '';

  constructor(private socket: Socket, private toastCtrl: ToastController) { }

  ngOnInit() {
    this.socket.connect();
   let name = `user-${new Date().getTime()}`;
   this.currentUser = name;
    this.socket.emit('set-name', name);
    this.socket.fromEvent('users-changed').subscribe(data => {
      let user = data['user'];
      if (data['event'] === 'left') {
        this.showToast('User left: ' + user);
      } else {
        this.showToast('User joined: ' + user);
      }
    });

    this.socket.fromEvent('message').subscribe(message => {
      this.messages.push(message);
    });
  }

  sendMessage() {
    this.socket.emit('send-message', { text: this.message });
    this.message = '';
  }

  ionViewWillLeave() {
    this.socket.disconnect();
  }

  async showToast(msg) {
    let toast = await this.toastCtrl.create({
      message: msg,
      position: 'top',
      duration: 2000
    });
    toast.present();
  }

}

Enfin, il est judicieux de vous déconnecter une fois que vous avez terminé – peut-être pas toujours lorsque vous quittez la page, mais peut-être lorsque l’utilisateur se déconnecte à nouveau.

Nous devons maintenant créer notre vue, nous avons seulement besoin d’itérer notre tableau de messages et d’avoir une zone pour composer le nouveau message en bas, alors ouvrez votre home/home.page.html et changez-le en:

<ion-header>
 <ion-toolbar>
   <ion-title>
     Ionic/SocketIO Chat
   </ion-title>
 </ion-toolbar>
</ion-header>

<ion-content>
 <ion-grid>
   <ion-text color="medium" text-center>
     <p>You joined the chat as {{ currentUser }}</p>
   </ion-text>
   <ion-row *ngFor="let message of messages">
     <ion-col size="9" *ngIf="message.user !== currentUser" class="message other-message">
       <b>{{ message.user }}</b><br>
       <span>{{ message.msg }}</span>
       <div class="time" text-right><br>{{ message.createdAt | date:'short' }}</div>
     </ion-col>
     <ion-col offset="3" size="9" *ngIf="message.user === currentUser" class="message my-message">
       <b>{{ message.user }}</b><br>
       <span>{{ message.msg }}</span>
       <div class="time" text-right><br>{{ message.createdAt | date:'short' }}</div>
     </ion-col>
   </ion-row>
 </ion-grid>
</ion-content>

<ion-footer>
 <ion-toolbar color="light">
   <ion-row align-items-center>
     <ion-col size="10">
       <ion-textarea auto-grow class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
     </ion-col>
     <ion-col size="2">
       <ion-button expand="block" fill="clear" color="primary" [disabled]="message === ''" class="msg-btn"
         (click)="sendMessage()">
         <ion-icon name="ios-send" slot="icon-only"></ion-icon>
       </ion-button>
     </ion-col>
   </ion-row>
 </ion-toolbar>
</ion-footer>

Pour obtenir un chat comme le look, nous avons également besoin d’un peu de CSS supplémentaire, alors copiez ce qui suit dans votre home/home.page.scss:

.message {
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 4px;
    white-space: pre-wrap;
  }

  .my-message {
    background: var(--ion-color-tertiary);
    color: #fff;
  }

  .other-message {
    background: var(--ion-color-secondary);
    color: #fff;
  }

  .time {
    color: #dfdfdf;
    float: right;
    font-size: small;
  }

  .message-input {
    margin-top: 0px;
    border: 1px solid var(--ion-color-medium);
    border-radius: 10px;
    background: #fff;
  }

  .msg-btn {
    --padding-start: 0.5em;
    --padding-end: 0.5em;
  }

Vous pouvez maintenant exécuter votre chat :

ionic serve

et ouvrir par exemple quelques fenêtres de navigation privée supplémentaires afin que différents utilisateurs soient connectés à votre chat socket. Alors allez-y et profitez de bavarder avec vous-même (pour toujours seul).

Conclusion

Démarrer avec Socket et Ionic n’est pas si difficile – la création d’un serveur de base et des fonctionnalités d’application nécessaires ne prend que quelques minutes, et vous pouvez également étendre cet exemple à une application de chat à part entière!

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *