Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Utilisation des WebSockets avec Laravel 5.3

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...

Stéphane HULARD

December 19, 2016
Tweet

More Decks by Stéphane HULARD

Other Decks in Programming

Transcript

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

    View full-size slide

  2. Q ?
    C
    Développements d'applications, de sites, constitution d'équipes,
    accompagnement, méthodes agiles...




    https://chstudio.fr
    [email protected]
    @s_hulard
    http://github.com/shulard

    View full-size slide

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

    View full-size slide

  4. 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 full-size slide

  5. 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 full-size slide

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

    View full-size slide

  7. 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 full-size slide

  8. “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 full-size slide

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

    View full-size slide

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

    View full-size slide

  11. 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 full-size slide

  12. 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 full-size slide

  13. 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 full-size slide

  14. 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 full-size slide

  15. 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 full-size slide

  16. 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 full-size slide

  17. S '
    ⚠ Le socle technique devient complexe.

    View full-size slide

  18. 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 full-size slide

  19. 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 full-size slide

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

    View full-size slide