Utilisation des WebSockets avec Laravel 5.3

Laravel, depuis la version 5.3 embarque un système de « Broadcasting » permettant de communiquer en temps réel avec ses utilisateurs. Une fonctionnalité cool mais qui vient avec son lot de contrainte.
Je reviens sur ce qu'il faut mettre en place pour que ça fonctionne vraiment sans faire appel à un outil tiers...

Transcript

1. U W S
   L .
   AFUP Lyon / 19 décembre 2016
   

   View Slide

2. Q ?
   C
   Développements d'applications, de sites, constitution d'équipes,
   accompagnement, méthodes agiles...
   
   
   
   
   https://chstudio.fr
   s.hulard@chstudio.fr
   @s_hulard
   http://github.com/shulard
   

   View Slide

3. L ...
   1. WebSockets ?
   2. Laravel ?
   3. Et concrètement ?
   

   View Slide

4. W S ?
   

   View Slide

5. P
   Standardisé en 2011 par l' dans la
   Communication bidirectionnelle Client ↔ Serveur
   Communication temps réel, la connection reste ouverte
   Utilise une requête HTTP pour réaliser le handshake :
   Upgrade de HTTP à WS
   Autorisation de la connection
   IETF RFC6455
   

   View Slide

6. I
   Côté client (navigateur) :
   pour envoyer recevoir des messages
   Bien supporté aujourd'hui :
   IE10+, Edge, Firefox, Chrome, Safari, Opera...
   Et sur mobile aussi, seul mauvais élève : Opera Mini
   Côté serveur :
   Programme d'écoute pour le handshake
   Programme d'écoute / réponse de messages
   API JavaScript
   http://caniuse.com/#feat=websockets
   

   View Slide

7. P
   Côté client :
   Vanilla JS
   Côté serveur :
   PHP
   Node.JS
   SAAS
   socket.io
   Pusher
   Hoa\Websocket
   Ratchet
   socket.io
   Pusher
   

   View Slide

8. Z : S .
   Solution Open Source
   Propose une implémentation client et serveur
   Gère un fallback en long polling Ajax
   Outil solide et maintenu par une grande communauté
   Développé en JavaScript
   

   View Slide

9. L ?
   

   View Slide

10. “T PHP F F W
    A ”
    Framework PHP créé par Taylor Otwell en 2011
    Développement d'applications web en utilisant
    Basé sur le module de Symfony 2
    Eloquent ORM : ActiveRecord pour la base de données
    MVC
    HTTPKernel
    

    View Slide

11. V . ?
    Sortie en août 2016
    Trois nouveaux modules :
    : Recherche Full Text intégrée
    : OAuth 2 server
    : Event broadcasting →
    Scout
    Passport
    Echo
    

    View Slide

12. L L E
    Apporter la puissance des WebSockets
    dans votre application sans la complexité !
    

    View Slide

13. E ?
    

    View Slide

14. D PHP
    Création d'un objet Event
    Implémentation de l'interface : ShouldBroadcast
    Envoi des évenements vers le client avec la fonction broadcast
    Super facile
    https://laravel.com/docs/5.3/broadcasting
    

    View Slide

15. E
    namespace App\Http\Controllers;
    use Illuminate\Http\Request;
    use App\Event\UserMessageCreated;
    class UserController extends Controller
    {
    public function createMessage(Request $request)
    {
    $message = new App\Message($request->all());
    $message->save();
    broadcast(new UserMessageCreated($request->user(), $message));
    }
    }
    

    View Slide

16. namespace App\Events;
    use Illuminate\Queue\SerializesModels;
    use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
    class UserMessageCreated implements ShouldBroadcast
    {
    use SerializesModels;
    public $user;
    public $message;
    public function __construct(App\User $user, App\Message $message)
    {
    $this->user = $user;
    $this->message = $message;
    }
    public function broadcastOn()
    {
    return new PrivateChannel('user.'.$this->user->id);
    }
    }
    

    View Slide

17. Q
    Les évenements émis sont placés dans une file d'attente (queue)
    Il faut choisir son driver: BDD, Redis, SQS, Beanstalk...
    Par défaut c'est “sync” mais attention à l'impact sur les temps de
    réponse de l'application
    

    View Slide

18. Q
    Il faut aussi un driver de broadcast :
    Pusher, Redis, Log, Null
    Pusher ? C'est le seul driver de WebSocket !!
    Et c'est un service SAAS payant...
    Redis sert de passerelle vers d'autres solutions...
    

    View Slide

19. P
    Pas de solution en PHP pour l'instant...
    Obligé de passer par un serveur de WebSocket en JavaScript :
    Lit les informations passées dans Redis pour les envoyer au client
    ⚠ Pas de communication Client → Serveur possible
    tlaverdure/laravel-echo-server
    

    View Slide

20. S '
    ⚠ Le socle technique devient complexe.
    

    View Slide

21. E ?
    Taylor Otwell a publié un client JavaScript spécifique :
    Code simple et accessible pour écouter et réagir aux évènements
    Approche similaire à l'API native WebSocket
    ⚠ Packagé par défaut avec le client Pusher...
    En n'utilisant pas Pusher, la stabilité est relative :
    Par exemple obligation de forcer une version spécifique pour que ça
    fonctionne.
    laravel/echo
    

    View Slide

22. B
    L'application développée fonctionne aujourd'hui correctement
    L'utilisation d'AJAX pour les messages Client → Serveur n'est pas idéal
    L'implémentation manque de maturité
    L'installation et la maintenance sont beaucoup plus complexes que prévu
    

    View Slide

23. Q ?
    http://shulard.github.io/talks/afup-lyon-lighting-décembre-2016
    

    View Slide