Créer une application de chat avec les sockets

 

Longtemps en essayant des applications comme Messenger, WhatsApp, skype…etc,  je me demandais ce qui se tramait derrière pour avoir cet effet de temps réel. Et ainsi j’ai pu découvrir les joies des sockets.

Aujourd’hui, nous allons faire une petite application qui utilisera les sockets, c’est une simple application de chat. Qui utilisera côté serveur Ratchet !

C’est quoi Ratchet ?

Non je ne parle pas du jeu exclusive de la Playstation ( 😛 ) mais de l’outil qui permet aux développeurs de créer des applications où l’on va dire qu’il y a du temps réel dessus, ce sont des applications bidirectionnels entre le client et le serveur.

Comment l’installer ( côté serveur ) ?

C’est très facile en utilisant composer, il suffit de suivre pas à pas les étapes suivant :

  1. Dans votre web www, créer un dossier sous le nom par exemple de sockets
  2. Créer dedans un fichier composer.json et copier le json suivant dedans
    {
    "autoload": {
    "psr-0": {
    "MyApp": "src"
    }
    },
    "require": {
    "cboden/ratchet": "^0.3.3"
    }
    }
  3. Puis ouvrer votre terminal et taper les deux commandes suivantes :
    curl -sS https://getcomposer.org/installer | php
    php composer.phar install
  4. Normalement maintenant vous aller trouver dans votre dossier sockets un dossier nommé vendor,  puis créer un dossier src  et bin.
  5. Dans le dossier bin, créer un fichier chat-server.php et copier le code suivant
    <?php use Ratchet\Server\IoServer; use Ratchet\Http\HttpServer; use Ratchet\WebSocket\WsServer; use MyApp\Chat; require dirname(__DIR__) . '/vendor/autoload.php'; $server = IoServer::factory( new HttpServer( new WsServer( new Chat() ) ), 8080 ); $server->run();
    
  6. Maintenant dans le dossier src, créer un dossier sous le nom de MyApp et créer dedans un fichier chat.php et copier le code ci-dessous
    <?php namespace MyApp; use Ratchet\MessageComponentInterface; use Ratchet\ConnectionInterface; class Chat implements MessageComponentInterface { protected $clients; public function __construct() { $this->clients = new \SplObjectStorage;
    }
    
    public function onOpen(ConnectionInterface $conn) {
    // une nouvelle connexion, on l'enregistre !
    $this->clients->attach($conn);
    echo "Un nouvel utilisateur ! ({$conn->resourceId})\n";
    }
    
    public function onMessage(ConnectionInterface $from, $msg) {
    
    $numRecv = count($this->clients) - 1;
    echo sprintf('Connection %d a envoyé un message "%s" to %d aux autres connection%s' . "\n"
    , $from->resourceId, $msg, $numRecv, $numRecv == 1 ? '' : 's');
    
    /*
    * On envoit le message à tous les autres utilisateur sauf nous même
    *
    */
    foreach ($this->clients as $client) {
    if ($from !== $client) {
    $client->send($msg);
    }
    }
    }
    
    public function onClose(ConnectionInterface $conn) {
    // connexion fermé, on se débarasse du client
    $this->clients->detach($conn);
    
    echo "L'utilisateur {$conn->resourceId} s'est déconnecté\n";
    }
    
    public function onError(ConnectionInterface $conn, \Exception $e) {
    echo "Une erreur s'est produite : {$e->getMessage()}\n";
    
    $conn->close();
    }
    }
  7. Voilà maintenant tout est prêt côté serveur, ce qui nous reste à faire c’est d’exécuter notre script chat-server.php en faisait la commande suivante sur votre terminal, elle est faite à partir du dossier sockets comme vous pouvez le remarquer 🙂
    php bin/chat-server.php

image3285

Côté client  ( Android )

Pour utiliser les websockets, nous utiliserons pour cela une librairie qui s’appelle Autobahn, qui nous facilitera grandement la vie 😀

  1. Dans Android studio, créer un nouveau projet en allant dans File->New->New Project 
  2. Dans Application name mettez “ChatApp” et Company domaine “com.squalala.chatapp”
  3. Dans votre fichier build.gradle, copier le code suivant, ce sont les librairies que nous allons utiliser dans notre exemple
    compile 'com.android.support:recyclerview-v7:22.2.0'
    compile 'com.jakewharton:butterknife:7.0.1'
  4. Télécharger le jar Autobahn et copier le dans le dossier libs de votre projet
    image3313

 

Voilà maintenant pour la suite, j’ai trouvé qu’il était vraiment plus utile de vous renvoyer vers le CODE SOURCE sur github, afin que vous puissiez lire les commentaires que j’ai mis dessus 🙂

PS : comme d’habitudes, si j’ai dit des bêtises, n’hésitez pas à me corriger 😀

PS 2 : normalement j’utilise des sessions au lieu de mon système plus ou moins foireux, mais hélas Ratchet utilise les sessions de Symfony 2, du coup ce n’est pas la joie 🙂

 

 

 

Laisser un commentaire

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