Make it happen in realtime with Laravel Echo and Pusher

Transcript

1. Laravel EchoPUSHER
   
   
   By YOKO HATO
   

   View Slide

2. 
   
   Tech Lead
   
   Twitter @plumsa
   
   
   
   
   

   View Slide

3. $&%=*,
   -."!6<
   
   +4 %835@1/*,
   2014)
   0;79>:PHP#'%(
   Laravel?2
   

   View Slide

4. &
   $#
   +)#
   *#!#
   '#
   ,-#
   (
   
   
   "
   %
   
   

   View Slide

5. )/#2(.5
   u Google"'! *-7+
   u
   ,1
   u 964$ 80
   u %&#3
   
   

   View Slide

6. 
   Google
   
   Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y
   

   View Slide

7. 
   
   u Polling?
   u Long polling?
   u Server Sent Events?
   u Websocket?
   
   

   View Slide

8. Polling
   l "
   u -=8@*<
   u A(,
   654'
   l "
   u "#/ >
   u +0:32
   u 9?
   !%1 8;
   )
   u &:$7.
   

   View Slide

9. Long polling
   l "$
   u Polling8$%!1)
   u /?8B,;
   l "$
   u *+<234
   u 9A)
   u >-C.)('60@
   u HTTP #&=5
   u 9A
   7:
   
   

   View Slide

10. Server Sent Events
    l
    u Web>37:
    u Long Polling
    9<-1
    u !,$
    u <-1
    
    #) 0<-
    u (?6A&;
    l
    u 8@$
    u IE
    EdgeSSE%5
    Polyfill4*
    u '.HTTP
    "=2+/
    

    View Slide

11. Websocket
    l (+
    u D7%-,
    "#&.0
    u H2<4;+,'90
    u 4;A
    u 6G7*$*+#-.
    !E6
    l (+
    u Websocket4;7!?8
    u IE10FC1@
    
    u 4;>3 *$,=
    u /5 ).>3B:
    

    View Slide

12. ,2
    n ' #!".& +
    n :-?=;>
    
    n 4< $ 9)057
    %
    n 86 /($
    1( 30*
    

    View Slide

13. '9/1
    ,=!5: )6;
    
    27(-<*
    
    <* "&Ajax4.3
    $% #08Polling+>?
    
    
    

    View Slide

14. 
    
    

    View Slide

15. PUSHER
    u Websocket Push
    
    Web →https://pusher.com/
    

    View Slide

16. PUSHER
    
    u Laravel "
    Laravel Echo(js)
    ! %%
    %'$
    
    

    View Slide

17. BA
    1. PUSHER2%<7
    2. LaravelBroadcastServiceProvider>?
    3. .envBROADCAST_DRIVERpusher95PUSHER_APP_ID85
    4. composerpusher-php-serverinstall
    5. Artisan+2&*2%<7
    6. *2%. 2") ShouldBroadcast
    7. broadcastOn,!$&#-2'0#-2'0:85
    8. 2%1. *2%34
    
    9. )12%=($laravel-echo pusher-jsinstall
    10. resources/assets/js/bootstrap.jsEcho6;@2,2%
    11. /$ 2#-2'0:*2%. :js;@
    

    View Slide

18. View Slide

19. Let’s
    !!
    !
    

    View Slide

20. 
    PUSHER
    
    
    

    View Slide

21. PUSHER
    https://pusher.com/channels/pricing
    

    View Slide

22. View Slide

23. %
    Websocket
    #
    $!PUSHER "
    
    Laravel
    

    View Slide

24. ED
    1. !*Redis5#'2
    2. redis-server&.5>9
    
    3. RedisPHP+%"composer5#'2
    4. laravel-echo-servernpm4*25#'2
    5. ,4"'&3'1laravel-echo-server init -5(F
    6. A=C
    7. laravel-echo-server&.5>9
    
    8. .envbroadcast(0*redis
    9. Socket.IO5#'2
    10. resources/assets/js/bootstrap.jsEcho711. EventClass:6$/5)2;redis$/5)2;@8?
    

    View Slide

25. View Slide

26. Let’s
    !!
    PUSHER
    Websocket !
    

    View Slide

27. 06%#&
    n *+ &"$2) /
    n >1CA?B
    
    n !8@ ' =-49;
    (
    n <:!3,'
    5, 74.
    

    View Slide

28. Firebase
    
    Push
    

    View Slide

29. Firebase Cloud Messaging(FCM)
    u Service worker Push
    
    Web →
    https://firebase.google.com/docs/cloud-
    messaging
    

    View Slide

30. 
    FirebaseFCM
    
    
    CORS
    

    View Slide

31. *"2
    
    PUSHER%(
    $#'
    PHPVue.js!
    Stack Overflow
    &)&
    

    View Slide

32. -0.$5:%'(.@
    H;5:%'(."#'+)JA
    I5:%'(."#'+)"2&*!
    "/"2&*!7
    4K
    EC5:,1>G8=
    36F9
    D?
    https://goo.gl/forms/ICdr6QwE2mAjy7oM2
    

    View Slide

33. ݄೔ ౔
    ʹ-BSBWFM-5ձΛ΍Γ·͢ʂ
    -5ॳΊͯͷํɺେ׻ܴͰ͢ɻ
    ࢀՃ͓ਃ͠ࠐΈ͓଴͓ͪͯ͠Γ·͢ʂ
    https://plumsa.connpass.com/event/130457/
    

    View Slide