Slide 1

Slide 1 text

Laravel EchoPUSHER     By YOKO HATO

Slide 2

Slide 2 text

    Tech Lead   Twitter @plumsa      

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

  Google      Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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+/

Slide 11

Slide 11 text

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: 

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

   

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

PUSHER  u Laravel " Laravel Echo(js) ! %% &# %'$  

Slide 17

Slide 17 text

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;@

Slide 18

Slide 18 text

 11     

Slide 19

Slide 19 text

Let’s   !!    !

Slide 20

Slide 20 text

 PUSHER      

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

 100 

Slide 23

Slide 23 text

% Websocket  #  $!PUSHER  "  Laravel

Slide 24

Slide 24 text

 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

Slide 25

Slide 25 text

 11    

Slide 26

Slide 26 text

Let’s     !! PUSHER Websocket !

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Firebase  Push  

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

 Firebase FCM    CORS 

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

-0.$5:%'(.@  G8=   36F9 D?   https://goo.gl/forms/ICdr6QwE2mAjy7oM2

Slide 33

Slide 33 text

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