SlideShare a Scribd company logo
1 of 55
Download to read offline
Laravel e
aplicações real
time
Eu sou Michael
Douglas Barbosa
Araujo
Criador da Laravel PagSeguro, um dos
responsáveis pela Laravel Conference
Brasil e Full Stack Developer na Atitude.
▷ http://www.facebook.com.br/groups/silexbrasil
▷ http://www.facebook.com.br/groups/laravelsp
▷ http://www.facebook.com.br/groups/phingbrasil
▷ http://www.facebook.com.br/groups/sonicpibrasil
▷ http://www.facebook.com.br/groups/doctrinebrasil
Criador e mantenedor:
https://github.com/michaeldouglas
https://twitter.com/mdba_araujo
https://facebook.com/mdba.araujo
Livro: Zend Certified Engineer -
Descomplicando a certificação PHP.
Laravel PagSeguro:
https://github.com/michaeldouglas/larav
el-pagseguro - Atualmente entrando
como pacote oficial Pagseguro e
Laravel.
Laravel Conference Brasil
http://laraconfbrasil.com.br
Todos vocês ganharam 15%
de desconto na Laravel
Conference Brasil 2017
Concluindo juntamente
com o Matheus Marabesi o
livro de Laravel pela
Novatec!
1.
Aplicação em tempo
Real?
“Geralmente você assim como eu criamos nossas
páginas com base no conhecido paradigma de
solicitação e resposta do HTTP.
O cliente carrega nossa página, em seguida, nada
acontece até que o usuário clique na próxima página?
Ajax !
▷ Por volta de 2005, Ajax começou a deixar a web
mais dinâmica!
▷ Mesmo assim, ainda não tínhamos o poder de
criar aplicações real-time efetivamente!
▷ Porém, veja existiam mesmo na época outras
soluções.
○ Todo mundo aqui conhece o placar UOL ?
○ Quais soluções possuímos?
Apache Pooling
Solução que fica a todo momento perguntando,
se já existe uma nova atualização?
Nginx
HTTP_PUSH_MODULE
Utiliza uma solução um pouco melhor de pooling que é o
Long Pooling é o cliente que fica perguntando e o server não
responde a não ser que se tenha a resposta!
Legal tudo isso !
Mas então qual é a solução para
essa questão dos dados estarem
em real-time para mais de um
local de conexão?
WebSockets !
WebSocket, é uma tecnologia que
permite comunicação
bidirecional por canais full-duplex
sobre um único soquete TCP!
Soluções que você pode utilizar?
2.
Por que utilizar o
Pusher?
Pusher !
Pusher é muito simples de utilizar
basta você criar sua conta no
Pusher.
Em seguida basta você consumir
a API do Pusher que já adiciona
funcionalidade de escala em
tempo real para aplicações Web e
Mobile!
Vamos a um exemplo de criação
de APP Pusher!
3.
Por que utilizar o
Socket.IO?
12,462
Quantidade de repositórios GitHub que
utilizam Socket.IO!
“Socket.io diferente do seu primo Pusher não é pago
porém toda a gestão do Servidor de Socket é seu, por
exemplo, na Amazon é mais interessante você utilizar
o novo Load Balancer para o Socket.IO pois já possui
suporte a WebSockets e HTTP2!
Show Me
The Code - Chat com Socket!
Legal tudo isso !
Mas e o PHP ? - Repare que ao
entrar no chat minhas mensagens
não são persistidas, não existe
lógica de login e entre outros
pontos. E nesse momento, que
entra nosso Back-end com PHP!
4.
Por que utilizar o
Laravel?
33,640
Quantidade de repositórios GitHub que
utilizam Laravel!
Comparativo Google Trends sobre o interesse
entre: Laravel, Zend e Symfony!
“Laravel pode ser uma boa escolha para você pelo
seguintes motivos: Laravel é simples de utilizar,
instalar, possui uma documentação simples e
atualmente é um bom framework para integração
com o FrontEnd!
Por que Laravel ?
Instalação do Laravel
É simples e você pode
optar por duas
opções: Via Laravel
Installer ou via
Composer!
Via Laravel Installer
permite que você
utilize: laravel new
(Nome do seu APP)
Laravel e o mundo FrontEnd !
Laravel diferente de muitos Frameworks PHP se
preocupa e muito com o FrontEnd pois traz consigo
bibliotecas Javascripts escritas para o Framework.
Muitos dos Frameworks PHP são fantásticos para
o mundo BackEnd porém para o mundo FrontEnd
deixam e muito a desejar!
Gulp + VueJS
O Laravel já traz consigo
tecnologias que irão ajudar e
muito você no seu dia a dia no
FrontEnd que são: Gulp, Elixir,
Cache Busting, Web Components
e VueJS!
Legal tudo isso !
Mas como iniciar essa tal
integração com o FrontEnd que o
Laravel já traz consigo?
Simples, basta na raiz do seu
projeto Laravel executar o
comando: npm install
“Após executar o comando apenas foi instalado os
pacotes na pasta node_modules.
Juntamente com os pacotes baixados o Laravel traz
consigo o Laravel Elixir que basicamente utiliza o
Gulp para realizar tarefas do seu dia a dia!
WEB PACK ?
WebPack basicamente é um
empacotador de códigos para
projetos Web, não necessariamente é
geração de módulos !
Nem sempre ter todo o
JavaScript/CSS do seu projeto em um
único arquivo é bom!
Show Me
The Code - Laravel Elixir em ação!
5.
O que é
Laravel ECHO?
“Basicamente Laravel Echo é uma biblioteca FrontEnd
que já é preparada para se integrar ao BackEnd do
Laravel para que seja possível criar aplicações
Real-time de uma forma realmente simples !
Realmente falamos e muito de aplicações real-time
vejamos então um exemplo de aplicações que utiliza
WebRTC e WebSockets: http://wmvisit.com
“Laravel contém em sua estrutura uma solução
completa para eventos Broadcasting que permite a
você compartilhar os mesmos nomes de eventos entre
o código do lado do servidor (PHP) e o aplicativo
JavaScript do lado do cliente.
“Caso ainda não esteja claro sobre o quanto isso é
bom. Pense no seguinte exemplo:
Quando você sintoniza sua televisão na Emissora:
(Rede Globo) você espera estar assistindo ao
mesmo jogo de Futebol que o seu vizinho. E que
ao acontecer o "GOLLLLLL" tanto você, quanto o
vizinho saibam disso ao mesmo tempo?
No mundo dos WebSockets podemos dizer que:
Channel em nosso exemplo é a Rede Globo.
E Event é a transmissão do jogo: Real Madrid x
Barcelona. E nesse contexto manter nomes é
importante pois só devemos assistir a
propagandas previamente registradas para
aquele evento ou até mesmo disparar uma nova !
Neste exemplo todo: Eventos ficam no PHP
Laravel e exibição dos eventos no Laravel Echo!
Como utilizar o Laravel
Echo ?
Você precisa instalar a biblioteca
PHP do Pusher da seguinte
maneira:
composer require
pusher/pusher-php-serv
er.
Irei explicar o passo a
passo e no final: Show
Me The Code!
Como utilizar o Laravel
Echo?
Agora precisamos instalar a
biblioteca Javascript do Laravel
Echo e também do Pusher:
npm install --save
laravel-echo pusher-js
Agora iremos utilizar nossa App Keys do Pusher em nosso Laravel!
Como utilizar o Laravel
Echo?
Precisamos então informar ao
Laravel sobre essa configuração
de ambiente.
O Laravel utiliza a biblioteca
Dotenv do Vlucas:
https://github.com/vlucas/phpdo
tenv
Vejamos um exemplo de
configuração.
“As configuração no .env:
PUSHER_APP_ID=SEU ID
PUSHER_KEY=SUA KEY
PUSHER_SECRET=SEU PUSHER SECRET
BROADCAST_DRIVER=pusher
Outro ponto importante é descomentar o
Provider de Broadcasting em config/app.php.
Isso porque quando você desejar enviar em canais
privados seja possível, ou seja, canais
autenticados!
Chat exemplo:
Para o nosso exemplo iremos executar
alguns comandos Artisan Laravel:
▷ php artisan make:event
ChatMessage
○ Esse comando faz com que o
Laravel crie um novo evento
que em nosso exemplo será
para o envio de mensagem!
○ O arquivo será criado no
caminho:
app/events/ChatMessage.php
Chat exemplo:
▷ php artisan make:model
ChatMessage --migration
○ Esse comando faz com que o
Laravel crie um novo modelo e
também uma migração de
dados.
○ Os arquivos serão criados nos
caminhos:
app/ChatMessage.php
database/create_chat_messag
es_table.php
Chat exemplo:
▷ php artisan make:controller
ChatMessage
○ Esse comando faz com que o
Laravel crie uma nova
controladora que será
responsável por chamar o
evento.
○ O arquivo será criado nos
caminho:
app/Http/Controllers/ChatM
essage.php
Como utilizar o Laravel
Echo ?
Iremos então importar a
biblioteca do Laravel Echo. Esse
import que ficará em nosso app.js
se faz necessário pois o Laravel
echo foi escrito utilizado Type
Script Lang.
Criado por: Anders Hejlsberg.
Chat exemplo:
▷ php artisan migrate
○ Esse comando faz com que o
Laravel crie a tabela que
definimos na migração do
CHAT.
▷ De configuração teórica por
enquanto é isso!
Show Me
The Code - Laravel Echo em ação!
Obrigado!
Perguntas?
Meus contatos novamente:
@mdba_araujo
michaeldouglas010790@gmail.com

More Related Content

Viewers also liked

Previdencia muncipal o_caso do municipio de guarulhos sp
Previdencia muncipal o_caso do municipio de guarulhos spPrevidencia muncipal o_caso do municipio de guarulhos sp
Previdencia muncipal o_caso do municipio de guarulhos spMario Lemos
 
Cya grunt.js, hello gulp.js
Cya grunt.js, hello gulp.jsCya grunt.js, hello gulp.js
Cya grunt.js, hello gulp.jsMichael Douglas
 
(Intercon) wordpress como framework de desenvolvimento
(Intercon) wordpress como framework de desenvolvimento(Intercon) wordpress como framework de desenvolvimento
(Intercon) wordpress como framework de desenvolvimentoRicardo Zein
 
MongoDB: Prós, Contras e Showcases.
MongoDB: Prós, Contras e Showcases.MongoDB: Prós, Contras e Showcases.
MongoDB: Prós, Contras e Showcases.Leonardo Quevedo
 
Trabalhando de forma profissional com silex
Trabalhando de forma profissional com silexTrabalhando de forma profissional com silex
Trabalhando de forma profissional com silexMichael Douglas
 
MongoDB - Tudo o que você precisa saber
MongoDB - Tudo o que você precisa saberMongoDB - Tudo o que você precisa saber
MongoDB - Tudo o que você precisa saberChristiano Anderson
 
Evitando a fadiga com Laravel Homestead
Evitando a fadiga com Laravel HomesteadEvitando a fadiga com Laravel Homestead
Evitando a fadiga com Laravel HomesteadDanilo Esser
 
Como implementar APIs RESTful em PHP
Como implementar APIs RESTful em PHPComo implementar APIs RESTful em PHP
Como implementar APIs RESTful em PHPPablo Aguiar
 
Report on online chatting
Report on online chattingReport on online chatting
Report on online chattingAmandeep Kaur
 
Apostila Tutorial CakePHP
Apostila Tutorial CakePHPApostila Tutorial CakePHP
Apostila Tutorial CakePHPFernando Palma
 
project
projectproject
projectdnraj
 
SRS FOR CHAT APPLICATION
SRS FOR CHAT APPLICATIONSRS FOR CHAT APPLICATION
SRS FOR CHAT APPLICATIONAtul Kushwaha
 

Viewers also liked (18)

Jaime
JaimeJaime
Jaime
 
Iglecias V02
Iglecias V02Iglecias V02
Iglecias V02
 
ACH3636 – Seminários de Políticas Públicas Setoriais I
ACH3636 – Seminários de Políticas Públicas Setoriais I ACH3636 – Seminários de Políticas Públicas Setoriais I
ACH3636 – Seminários de Políticas Públicas Setoriais I
 
Previdencia muncipal o_caso do municipio de guarulhos sp
Previdencia muncipal o_caso do municipio de guarulhos spPrevidencia muncipal o_caso do municipio de guarulhos sp
Previdencia muncipal o_caso do municipio de guarulhos sp
 
Cya grunt.js, hello gulp.js
Cya grunt.js, hello gulp.jsCya grunt.js, hello gulp.js
Cya grunt.js, hello gulp.js
 
Tcc apresentação
Tcc   apresentaçãoTcc   apresentação
Tcc apresentação
 
(Intercon) wordpress como framework de desenvolvimento
(Intercon) wordpress como framework de desenvolvimento(Intercon) wordpress como framework de desenvolvimento
(Intercon) wordpress como framework de desenvolvimento
 
MongoDB: Prós, Contras e Showcases.
MongoDB: Prós, Contras e Showcases.MongoDB: Prós, Contras e Showcases.
MongoDB: Prós, Contras e Showcases.
 
Trabalhando de forma profissional com silex
Trabalhando de forma profissional com silexTrabalhando de forma profissional com silex
Trabalhando de forma profissional com silex
 
MongoDB - Tudo o que você precisa saber
MongoDB - Tudo o que você precisa saberMongoDB - Tudo o que você precisa saber
MongoDB - Tudo o que você precisa saber
 
Evitando a fadiga com Laravel Homestead
Evitando a fadiga com Laravel HomesteadEvitando a fadiga com Laravel Homestead
Evitando a fadiga com Laravel Homestead
 
Jquery fundamentals-book-pt-br
Jquery fundamentals-book-pt-brJquery fundamentals-book-pt-br
Jquery fundamentals-book-pt-br
 
Como implementar APIs RESTful em PHP
Como implementar APIs RESTful em PHPComo implementar APIs RESTful em PHP
Como implementar APIs RESTful em PHP
 
Report on online chatting
Report on online chattingReport on online chatting
Report on online chatting
 
Apostila Tutorial CakePHP
Apostila Tutorial CakePHPApostila Tutorial CakePHP
Apostila Tutorial CakePHP
 
Slide - Trab. Economia Brasileira
Slide - Trab. Economia BrasileiraSlide - Trab. Economia Brasileira
Slide - Trab. Economia Brasileira
 
project
projectproject
project
 
SRS FOR CHAT APPLICATION
SRS FOR CHAT APPLICATIONSRS FOR CHAT APPLICATION
SRS FOR CHAT APPLICATION
 

Laravel e aplicações real time com Laravel Echo

  • 2. Eu sou Michael Douglas Barbosa Araujo Criador da Laravel PagSeguro, um dos responsáveis pela Laravel Conference Brasil e Full Stack Developer na Atitude.
  • 3. ▷ http://www.facebook.com.br/groups/silexbrasil ▷ http://www.facebook.com.br/groups/laravelsp ▷ http://www.facebook.com.br/groups/phingbrasil ▷ http://www.facebook.com.br/groups/sonicpibrasil ▷ http://www.facebook.com.br/groups/doctrinebrasil Criador e mantenedor:
  • 5. Livro: Zend Certified Engineer - Descomplicando a certificação PHP.
  • 6. Laravel PagSeguro: https://github.com/michaeldouglas/larav el-pagseguro - Atualmente entrando como pacote oficial Pagseguro e Laravel.
  • 7. Laravel Conference Brasil http://laraconfbrasil.com.br Todos vocês ganharam 15% de desconto na Laravel Conference Brasil 2017
  • 8. Concluindo juntamente com o Matheus Marabesi o livro de Laravel pela Novatec!
  • 10. “Geralmente você assim como eu criamos nossas páginas com base no conhecido paradigma de solicitação e resposta do HTTP. O cliente carrega nossa página, em seguida, nada acontece até que o usuário clique na próxima página?
  • 11. Ajax ! ▷ Por volta de 2005, Ajax começou a deixar a web mais dinâmica! ▷ Mesmo assim, ainda não tínhamos o poder de criar aplicações real-time efetivamente! ▷ Porém, veja existiam mesmo na época outras soluções. ○ Todo mundo aqui conhece o placar UOL ? ○ Quais soluções possuímos?
  • 12.
  • 13. Apache Pooling Solução que fica a todo momento perguntando, se já existe uma nova atualização?
  • 14. Nginx HTTP_PUSH_MODULE Utiliza uma solução um pouco melhor de pooling que é o Long Pooling é o cliente que fica perguntando e o server não responde a não ser que se tenha a resposta!
  • 15. Legal tudo isso ! Mas então qual é a solução para essa questão dos dados estarem em real-time para mais de um local de conexão?
  • 16. WebSockets ! WebSocket, é uma tecnologia que permite comunicação bidirecional por canais full-duplex sobre um único soquete TCP! Soluções que você pode utilizar?
  • 17. 2. Por que utilizar o Pusher?
  • 18. Pusher ! Pusher é muito simples de utilizar basta você criar sua conta no Pusher. Em seguida basta você consumir a API do Pusher que já adiciona funcionalidade de escala em tempo real para aplicações Web e Mobile! Vamos a um exemplo de criação de APP Pusher!
  • 19.
  • 20.
  • 21. 3. Por que utilizar o Socket.IO?
  • 22. 12,462 Quantidade de repositórios GitHub que utilizam Socket.IO!
  • 23. “Socket.io diferente do seu primo Pusher não é pago porém toda a gestão do Servidor de Socket é seu, por exemplo, na Amazon é mais interessante você utilizar o novo Load Balancer para o Socket.IO pois já possui suporte a WebSockets e HTTP2!
  • 24.
  • 25. Show Me The Code - Chat com Socket!
  • 26. Legal tudo isso ! Mas e o PHP ? - Repare que ao entrar no chat minhas mensagens não são persistidas, não existe lógica de login e entre outros pontos. E nesse momento, que entra nosso Back-end com PHP!
  • 27. 4. Por que utilizar o Laravel?
  • 28. 33,640 Quantidade de repositórios GitHub que utilizam Laravel!
  • 29. Comparativo Google Trends sobre o interesse entre: Laravel, Zend e Symfony!
  • 30. “Laravel pode ser uma boa escolha para você pelo seguintes motivos: Laravel é simples de utilizar, instalar, possui uma documentação simples e atualmente é um bom framework para integração com o FrontEnd!
  • 31. Por que Laravel ? Instalação do Laravel É simples e você pode optar por duas opções: Via Laravel Installer ou via Composer! Via Laravel Installer permite que você utilize: laravel new (Nome do seu APP) Laravel e o mundo FrontEnd ! Laravel diferente de muitos Frameworks PHP se preocupa e muito com o FrontEnd pois traz consigo bibliotecas Javascripts escritas para o Framework. Muitos dos Frameworks PHP são fantásticos para o mundo BackEnd porém para o mundo FrontEnd deixam e muito a desejar!
  • 32. Gulp + VueJS O Laravel já traz consigo tecnologias que irão ajudar e muito você no seu dia a dia no FrontEnd que são: Gulp, Elixir, Cache Busting, Web Components e VueJS!
  • 33. Legal tudo isso ! Mas como iniciar essa tal integração com o FrontEnd que o Laravel já traz consigo? Simples, basta na raiz do seu projeto Laravel executar o comando: npm install
  • 34. “Após executar o comando apenas foi instalado os pacotes na pasta node_modules. Juntamente com os pacotes baixados o Laravel traz consigo o Laravel Elixir que basicamente utiliza o Gulp para realizar tarefas do seu dia a dia!
  • 35. WEB PACK ? WebPack basicamente é um empacotador de códigos para projetos Web, não necessariamente é geração de módulos ! Nem sempre ter todo o JavaScript/CSS do seu projeto em um único arquivo é bom!
  • 36. Show Me The Code - Laravel Elixir em ação!
  • 38. “Basicamente Laravel Echo é uma biblioteca FrontEnd que já é preparada para se integrar ao BackEnd do Laravel para que seja possível criar aplicações Real-time de uma forma realmente simples ! Realmente falamos e muito de aplicações real-time vejamos então um exemplo de aplicações que utiliza WebRTC e WebSockets: http://wmvisit.com
  • 39. “Laravel contém em sua estrutura uma solução completa para eventos Broadcasting que permite a você compartilhar os mesmos nomes de eventos entre o código do lado do servidor (PHP) e o aplicativo JavaScript do lado do cliente.
  • 40.
  • 41. “Caso ainda não esteja claro sobre o quanto isso é bom. Pense no seguinte exemplo: Quando você sintoniza sua televisão na Emissora: (Rede Globo) você espera estar assistindo ao mesmo jogo de Futebol que o seu vizinho. E que ao acontecer o "GOLLLLLL" tanto você, quanto o vizinho saibam disso ao mesmo tempo?
  • 42. No mundo dos WebSockets podemos dizer que: Channel em nosso exemplo é a Rede Globo. E Event é a transmissão do jogo: Real Madrid x Barcelona. E nesse contexto manter nomes é importante pois só devemos assistir a propagandas previamente registradas para aquele evento ou até mesmo disparar uma nova ! Neste exemplo todo: Eventos ficam no PHP Laravel e exibição dos eventos no Laravel Echo!
  • 43. Como utilizar o Laravel Echo ? Você precisa instalar a biblioteca PHP do Pusher da seguinte maneira: composer require pusher/pusher-php-serv er. Irei explicar o passo a passo e no final: Show Me The Code!
  • 44. Como utilizar o Laravel Echo? Agora precisamos instalar a biblioteca Javascript do Laravel Echo e também do Pusher: npm install --save laravel-echo pusher-js
  • 45. Agora iremos utilizar nossa App Keys do Pusher em nosso Laravel!
  • 46. Como utilizar o Laravel Echo? Precisamos então informar ao Laravel sobre essa configuração de ambiente. O Laravel utiliza a biblioteca Dotenv do Vlucas: https://github.com/vlucas/phpdo tenv Vejamos um exemplo de configuração.
  • 47. “As configuração no .env: PUSHER_APP_ID=SEU ID PUSHER_KEY=SUA KEY PUSHER_SECRET=SEU PUSHER SECRET BROADCAST_DRIVER=pusher
  • 48. Outro ponto importante é descomentar o Provider de Broadcasting em config/app.php. Isso porque quando você desejar enviar em canais privados seja possível, ou seja, canais autenticados!
  • 49. Chat exemplo: Para o nosso exemplo iremos executar alguns comandos Artisan Laravel: ▷ php artisan make:event ChatMessage ○ Esse comando faz com que o Laravel crie um novo evento que em nosso exemplo será para o envio de mensagem! ○ O arquivo será criado no caminho: app/events/ChatMessage.php
  • 50. Chat exemplo: ▷ php artisan make:model ChatMessage --migration ○ Esse comando faz com que o Laravel crie um novo modelo e também uma migração de dados. ○ Os arquivos serão criados nos caminhos: app/ChatMessage.php database/create_chat_messag es_table.php
  • 51. Chat exemplo: ▷ php artisan make:controller ChatMessage ○ Esse comando faz com que o Laravel crie uma nova controladora que será responsável por chamar o evento. ○ O arquivo será criado nos caminho: app/Http/Controllers/ChatM essage.php
  • 52. Como utilizar o Laravel Echo ? Iremos então importar a biblioteca do Laravel Echo. Esse import que ficará em nosso app.js se faz necessário pois o Laravel echo foi escrito utilizado Type Script Lang. Criado por: Anders Hejlsberg.
  • 53. Chat exemplo: ▷ php artisan migrate ○ Esse comando faz com que o Laravel crie a tabela que definimos na migração do CHAT. ▷ De configuração teórica por enquanto é isso!
  • 54. Show Me The Code - Laravel Echo em ação!