Créer un service de websocket en php avec un fallback pour les anciens navigateurs

Si vous n’êtes pas familiarisé avec les websockets, cet article va changer votre vision du web 2.0.

En effet, il est maintenant possible d’établir une connexion permanente, bidirectionnelle et en temps réel entre le navigateur et le serveur.

A ce jour, seul les navigateurs les plus récents implémentent cette technologie, et il faut ajouter à cela une implémentation côté serveur.

Heureusement, si votre application est compatible avec le standard PSR-0 pour l’autoload (c’est le cas pour plusieurs frameworks comme Symfony, Zend, Lithium, etc), il existe un excellent bundle ( Ratchet websocket for PHP ), qui permet de créer facilement un serveur websocket.

Le site http://socketo.me/ propose un tutoriel « Hello World ! », relativement simple, que je vous conseille si vous n’avez jamais utilisé les websockets avant.

Qu’en pensez-vous ? Plutôt intéressant non ?

Maintenant que vous vous êtes essayé au système, nous allons pousser un peu le développement, et ajouter un fallback afin que notre serveur websocket puisse communiquer avec tous les navigateurs, même s’ils n’implémentent pas la technologie. Car en effet il n’existe que très très peu d’informations à ce propos.

La solution que nous allons décrire ici, consiste à utiliser Flash couplé à une bibliothèque javaccript https://github.com/gimite/web-socket-js .

Pour notre exemple, nous réutiliserons le projet présenté dans le tutoriel Ratchet.

La classe Chat reste la même,  mais nous allons par contre modifier le fichier bin/chat-server.php

Rappelez-vous, il ressemblait à :

<?php

use Ratchet\Server\IoServer;
use Ratchet\WebSocket\WsServer;
use MyApp\Chat;

    require dirname(__DIR__) . '/vendor/autoload.php';

    $server = IoServer::factory(
        new WsServer(
            new Chat()
        )
      , 8080
    );

    $server->run();

Il faut savoir que la variable $server s’appuie en fait sur les classes React\Socket\Server et React\EventLoop\Factory. Le React bundle est d’ailleurs un des prérequis à l’installation de Ratchet.

Nous allons nous servir de cela pour faire notre fallback.

Pour commencer, nous allons créer une « boucle » et y attacher non pas un, mais deux services (on peut bien entendu en attacher autant que l’on souhaite).

L’un va écouter sur le port 8080 pour le websocket, et l’autre sur le port 843 pour les connexions via flash.

Nous allons donc modifier le fichier en :

<?php

use Ratchet\Server\IoServer;
use Ratchet\WebSocket\WsServer;
use Ratchet\Server\FlashPolicy;
use React\Socket\Server as Reactor;
use React\WebSocket\WsServer;
use MyApp\Chat;

    require dirname(__DIR__) . '/vendor/autoload.php';

      // create the loop that will handle servers
      $loop = Factory::create();

      // create a service based on this loop
      // this service will listen to port 8080
      $webSocket = new Reactor($loop);
      $webSocket->listen(8080, '0.0.0.0');

      // get chat class
      $chat = new Chat();

	// create a server with our chat class
      $webSocketServer = new IoServer(new WsServer($chat), $webSocket, $loop);

      // create a second service based on this loop
      // this service will listen to port 843 (default flash port)
      $flashSocket = new Reactor($loop);
      $flashSocket->listen(843, '0.0.0.0');

	// create a flash policy class which is able to validate the flash connection
      $policy = new FlashPolicy();
      // Allow Flash sockets to connect via port 80 and 8080
      $policy->addAllowedAccess('*', 80);
      $policy->addAllowedAccess('*', 8080);

	// create a second server
      $flashPolicyServer = new IoServer($policy, $flashSocket, $loop);

      // run all servers based on the loop
      $loop->run();

Voilà, votre serveur est maintenant capable d’autoriser des connexions via flash et donc les anciens navigateurs peuvent envoyer et recevoir des informations du serveurs. De plus, la connexion peut se faire via le port 8080 et donc réagir comme le ferait un navigateur connecté sur le serveur websocket.

Passons maintenant côté client. La bibliothèque websocket-js va nous permettre d’encapsuler la classe WebSocket. Si le navigateur n’implémente pas cette classe, alors elle crée une connexion flash vers le serveur et offre les mêmes fonctions que la classe WebSocket originale.

Pour commencer, il faut placer le fichier WebSocketMain.swf dans son répertoire web (à la racine dans notre exemple). Ensuite, modifier le fichier html de l’exemple comme suit :

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="web_socket.js"></script>

<script>
      WEB_SOCKET_SWF_LOCATION = "WebSocketMain.swf";
	var conn = new WebSocket("ws://localhost:8080");
	conn.onopen = function(e) {
    		console.log("Connection established!");
	};

	conn.onmessage = function(e) {
    		console.log(e.data);
	};
</script>

Le tour est joué !

Lancez la commande pour démarrer le chat ; ouvrez un Internet Explorer 8… pardon, un ancien navigateur ; ouvrez en même temps un navigateur plus récent (Chrome, ou encore Firefox), et amusez vous.