Make it happen in realtime with Laravel Echo and Pusher

Transcript

1. Laravel EchoPUSHER
       By YOKO HATO
2.     Tech Lead   Twitter @plumsa
        
3. $&%=*, -."!6<  +4 % 835@1/*, 2014) 0;79>:PHP#'%( Laravel?2 
4. & $# +)# *#!# '# ,-# (    " %  
5. )/# 2(.5 u Google"'!
   *- 7+  u  ,1 u 964$  80 u %&#3 
6.   Google      Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y
7.    u Polling? u Long polling? u Server Sent Events? u Websocket?    
8. Polling l " u -=8@*< u A (,
   654'  l  " u "#/ > u +0:32 u 9? !%1 8; ) u &:$7.
9. Long polling l "$ u Polling 8
   $%!1) u /?8B,;   l "$ u  *+<234 u  9A) u >-C.)('
   60 @ u HTTP #&=5 u  9A 7:   
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+/
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 ).>3 B: 
12. ,2 n ' #!".& + n :-?=;>   n  4< $  9)057 % n 86 /($  
    1( 30* 
13. '9/1
    ,=!5: )6;   27
    (-<* 
    <*  "&Ajax4.3  $% #08Polling+>?   
14. 
       
15. PUSHER u Websocket Push   Web →https://pusher.com/
16. PUSHER  u Laravel " Laravel Echo(js) ! %% &# %'$  
17. BA 1. PUSHER2%<7 2. LaravelBroadcastServiceProvider>?  3. .envBROADCAST_DRIVERpusher95 PUSHER_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;@
18.  11     
19. Let’s   !!    
    !
20.  PUSHER      
    
21. PUSHER
     https://pusher.com/channels/pricing
22.  100 
23. % Websocket  #  $!PUSHER  "  Laravel
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.jsEcho7<BSocket.IO7  11. EventClass:6 $/5)2;redis$/5)2;@8?
25.  11    
26. Let’s  
      !! PUSHER Websocket
    !
27. 06%#& n *+ &"$2) / n >1CA?B   n !8@ '  =-49; ( n <:!3,'  
    5, 74. 
28. Firebase  Push  
29. Firebase Cloud Messaging(FCM) u Service worker Push   Web → https://firebase.google.com/docs/cloud- messaging
30.  Firebase FCM    CORS
     
31. *"2 PUSHER % (    $#'  PHPVue.js! Stack Overflow  &)&
32. -0.$5:%'(.@  <B-0.$ H;5:%'(."#'+)JA  I 5:%'(."#'+)"2&*!  "/"2&*!7 4K EC5:,1>G8=   36F9 D?   https://goo.gl/forms/ICdr6QwE2mAjy7oM2
33. ݄೔ ౔ ʹ-BSBWFM
    -5ձΛ΍Γ·͢ʂ -5ॳΊͯͷํɺେ׻ܴͰ͢ɻ ࢀՃ͓ਃ͠ࠐΈ͓଴͓ͪͯ͠Γ·͢ʂ https://plumsa.connpass.com/event/130457/