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

Laravel5.5 Broadcastingを使ってみた話

Laravel5.5 Broadcastingを使ってみた話

1d037916b310fc902071f87278fb93c0?s=128

Akiyoshi Tanaka

November 15, 2017
Tweet

More Decks by Akiyoshi Tanaka

Other Decks in Technology

Transcript

  1. Laravel BroadcastingΛ࢖ͬͯΈͨ࿩ laravel.osaka #12 2017-11-15

  2. ࿩͢͜ͱ - σϞΞϓϦ - https://github.com/akkunchoi/laravel-broadcasting-sample-app - Laravel Broadcasting ͷઃఆɾ࣮૷ -

    ࢖ͬͯΈͯؾ෇͍ͨ఺
  3. ࣗݾ঺հ # ໊લ ాதষت / Akiyoshi TANAKA / @akkun_choi #

    ॴଐ גࣜձࣾBTree / ୅දऔక໾ / ΤϯδχΞ # ܦྺ PHP(ZF) -> Rails -> node.js -> Laravel(ॳ৺ऀ)
  4. Broadcasting - αʔόʔ͔ΒϢʔβʔʹϦΞϧλΠϜ௨஌ - WebSocketΛ࢖͏ - Pusher or Socket.io͕༻ҙ͞Ε͍ͯΔ -

    ࠓճ͸PusherΛ࢖༻͠·͢
  5. ઃఆํ๏ - ϥΠϒϥϦΛΠϯετʔϧ - BroadcastServiceProviderΛ௥Ճ - Pusherઃఆ - .env -

    config/broadcasting.php - resources/assets/js/bootstrap.js $ npm install --save laravel-echo pusher-js $ composer require pusher/pusher-php-server "~2.6"
  6. ϒϩʔυΩϟετ͢Δ - ShouldBroadcastΛ࣮૷͢ΔΠϕϯτΛ࡞੒ - νϟϯωϧ͕2छྨ͋Δ - PrivateChannel - PresenceChannel (=

    PrivateChannel + α) - event() or broadcast() ͰૹΔ broadcast(new UserUpdated($user))->toOthers(); 4IPVME#SPBEDBTUΠϕϯτ
  7. ϒϩʔυΩϟετΛड͚औΔ - laravel-echo const channel = window.Echo.join('channel-name') .here((users) => {

    console.log('I'm here'); }) .joining((user) => { console.log('joining user', user); }) .leaving((user) => { console.log('leaving user', user); }) .listen('UserUpdated', (e) => { participants.update(e.user); })
  8. ཹҙ఺1: ೝূ - ೝূ͸ඞཁ - /broadcasting/auth ʹΞΫηε͢Δ - Auth::user() ͰϢʔβʔ͕औಘͰ͖Δඞཁ͕͋Δ

    - ͦͷͨΊʹɺࣄલʹAuth::login()͕ඞཁ - PublicChannel͸͋Γ·ͤΜ - Pusherʹ͸͋Δ͚ͲɺLaravelʹ͸ͳ͍
  9. ཹҙ఺2: broadcaster # Pusher - socket.ioΑΓָ - 100ಉ࣌઀ଓɺ200,000ϝοηʔδ/೔·Ͱແྉ - ड৴଎౓͸໰୊ͳ͍͕ɺૹ৴͕஗͍

    - https://dashboard.pusher.com/ # socket.io - redis΍ϫʔΧʔ͕ඞཁ - εέʔϥϏϦςΟ
  10. ཹҙ఺3: ૹ৴஗͍ - ։ൃ༻ϏϧτΠϯαʔό - ϓϩηε1ͭͳͷͰɺେྔͷϦΫΤετ͸ࡹ͚ͳ͍ - ຊ൪͸WEBαʔόʔΛஔ͘͜ͱͰղܾ - Pusher

    - ૹ৴ͯ͠഑৴͞ΕΔ·Ͱ1ඵఔ౓͔͔͍ͬͯΔ - ཁҼ: ௨৴ճ਺૿, HTTPS, keep aliveແ͠, αʔόʔ͕γϯΨϙʔϧ - ղܾࡦ: pusher΁ͷૹ৴ํ๏Λ޻෉͢Δʁ
  11. ͦͷଞ - ࿈ଧରࡦʹ lodash.throttle() this.throttlePost = _.throttle(() => { axios.post('/works',

    {count: this.count}); }, 500);
  12. ·ͱΊ - BroadcastingΛ࢖ͬͯσϞΞϓϦΛߏஙͨ͠ - PusherΛ࢖ͬͯखܰʹϦΞϧλΠϜ௨஌͕Ͱ͖ͨ - ϦΞϧλΠϜੑΛߴΊΔͳΒɺ΋͏Ұख͍ؒΔ

  13. ։ൃϝϯόʔืूʂ - Laravel - node.js - socket.io - Vue /

    React / angular - ۀ຿ҕୗɺϦϞʔτ։ൃ