Laravel5.5 Broadcastingを使ってみた話

laravel.osaka #12
https://github.com/akkunchoi/laravel-broadcasting-sample-app

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 - ۀ຿ҕୗɺϦϞʔτ։ൃ