Laravel e aplicações real time com Laravel Echo
-
Upload
michael-douglas -
Category
Software
-
view
798 -
download
2
Transcript of Laravel e aplicações real time com Laravel Echo
![Page 1: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/1.jpg)
Laravel e aplicações real time
![Page 2: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/2.jpg)
Eu sou Michael Douglas Barbosa AraujoCriador da Laravel PagSeguro, um dos responsáveis pela Laravel Conference Brasil e Full Stack Developer na Atitude.
![Page 3: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/3.jpg)
▷ 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:
![Page 4: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/4.jpg)
https://github.com/michaeldouglas
https://twitter.com/mdba_araujo
https://facebook.com/mdba.araujo
![Page 5: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/5.jpg)
Livro: Zend Certified Engineer - Descomplicando a certificação PHP.
![Page 6: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/6.jpg)
Laravel PagSeguro:
https://github.com/michaeldouglas/laravel-pagseguro - Atualmente entrando como pacote oficial Pagseguro e Laravel.
![Page 7: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/7.jpg)
Laravel Conference Brasil
http://laraconfbrasil.com.br
Todos vocês ganharam 15% de desconto na Laravel Conference Brasil 2017
![Page 8: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/8.jpg)
Concluindo juntamente com o Matheus Marabesi o livro de Laravel pela Novatec!
![Page 9: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/9.jpg)
1.Aplicação em tempo
Real?
![Page 10: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/10.jpg)
“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?
![Page 11: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/11.jpg)
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?
![Page 12: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/12.jpg)
![Page 13: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/13.jpg)
Apache PoolingSolução que fica a todo momento perguntando, se já existe uma nova atualização?
![Page 14: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/14.jpg)
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!
![Page 15: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/15.jpg)
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?
![Page 16: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/16.jpg)
WebSockets !
WebSocket, é uma tecnologia que permite comunicação bidirecional por canais full-duplex sobre um único soquete TCP!
Soluções que você pode utilizar?
![Page 17: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/17.jpg)
2.Por que utilizar o
Pusher?
![Page 18: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/18.jpg)
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!
![Page 19: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/19.jpg)
![Page 20: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/20.jpg)
![Page 21: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/21.jpg)
3.Por que utilizar o
Socket.IO?
![Page 22: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/22.jpg)
12,462Quantidade de repositórios GitHub que utilizam Socket.IO!
![Page 23: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/23.jpg)
“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!
![Page 24: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/24.jpg)
![Page 25: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/25.jpg)
Show MeThe Code - Chat com Socket!
![Page 26: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/26.jpg)
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!
![Page 27: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/27.jpg)
4.Por que utilizar o
Laravel?
![Page 28: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/28.jpg)
33,640Quantidade de repositórios GitHub que utilizam Laravel!
![Page 29: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/29.jpg)
Comparativo Google Trends sobre o interesse entre: Laravel, Zend e Symfony!
![Page 30: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/30.jpg)
“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!
![Page 31: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/31.jpg)
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!
![Page 32: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/32.jpg)
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!
![Page 33: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/33.jpg)
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
![Page 34: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/34.jpg)
“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!
![Page 35: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/35.jpg)
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!
![Page 36: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/36.jpg)
Show MeThe Code - Laravel Elixir em ação!
![Page 37: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/37.jpg)
5.O que éLaravel ECHO?
![Page 38: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/38.jpg)
“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
![Page 39: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/39.jpg)
“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.
![Page 40: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/40.jpg)
![Page 41: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/41.jpg)
“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?
![Page 42: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/42.jpg)
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!
![Page 43: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/43.jpg)
Como utilizar o Laravel Echo ?
Você precisa instalar a biblioteca PHP do Pusher da seguinte maneira:
composer require pusher/pusher-php-server.
Irei explicar o passo a passo e no final: Show Me The Code!
![Page 44: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/44.jpg)
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
![Page 45: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/45.jpg)
Agora iremos utilizar nossa App Keys do Pusher em nosso Laravel!
![Page 46: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/46.jpg)
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/phpdotenv
Vejamos um exemplo de configuração.
![Page 47: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/47.jpg)
“As configuração no .env:
PUSHER_APP_ID=SEU IDPUSHER_KEY=SUA KEYPUSHER_SECRET=SEU PUSHER SECRET
BROADCAST_DRIVER=pusher
![Page 48: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/48.jpg)
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!
![Page 49: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/49.jpg)
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
![Page 50: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/50.jpg)
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
![Page 51: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/51.jpg)
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
![Page 52: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/52.jpg)
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.
![Page 53: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/53.jpg)
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!
![Page 54: Laravel e aplicações real time com Laravel Echo](https://reader030.fdocumentos.com/reader030/viewer/2022012404/586f85c11a28ab54768b51ff/html5/thumbnails/54.jpg)
Show MeThe Code - Laravel Echo em ação!