55
Laravel e aplicações real time

Laravel e aplicações real time com Laravel Echo

Embed Size (px)

Citation preview

Page 1: Laravel e aplicações real time com Laravel Echo

Laravel e aplicações real time

Page 2: Laravel e aplicações real time com Laravel Echo

Eu sou Michael Douglas Barbosa AraujoCriador da Laravel PagSeguro, um dos responsáveis pela Laravel Conference Brasil e Full Stack Developer na Atitude.

Page 5: Laravel e aplicações real time com Laravel Echo

Livro: Zend Certified Engineer - Descomplicando a certificação PHP.

Page 6: Laravel e aplicações real time com Laravel Echo

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

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

Concluindo juntamente com o Matheus Marabesi o livro de Laravel pela Novatec!

Page 9: Laravel e aplicações real time com Laravel Echo

1.Aplicação em tempo

Real?

Page 10: Laravel e aplicações real time com Laravel Echo

“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

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
Page 13: Laravel e aplicações real time com Laravel Echo

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

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

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

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

2.Por que utilizar o

Pusher?

Page 18: Laravel e aplicações real time com Laravel Echo

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
Page 20: Laravel e aplicações real time com Laravel Echo
Page 21: Laravel e aplicações real time com Laravel Echo

3.Por que utilizar o

Socket.IO?

Page 22: Laravel e aplicações real time com Laravel Echo

12,462Quantidade de repositórios GitHub que utilizam Socket.IO!

Page 23: Laravel e aplicações real time com Laravel Echo

“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
Page 25: Laravel e aplicações real time com Laravel Echo

Show MeThe Code - Chat com Socket!

Page 26: Laravel e aplicações real time com Laravel Echo

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

4.Por que utilizar o

Laravel?

Page 28: Laravel e aplicações real time com Laravel Echo

33,640Quantidade de repositórios GitHub que utilizam Laravel!

Page 29: Laravel e aplicações real time com Laravel Echo

Comparativo Google Trends sobre o interesse entre: Laravel, Zend e Symfony!

Page 30: Laravel e aplicações real time com Laravel Echo

“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

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

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

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

“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

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

Show MeThe Code - Laravel Elixir em ação!

Page 37: Laravel e aplicações real time com Laravel Echo

5.O que éLaravel ECHO?

Page 38: Laravel e aplicações real time com 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

Page 39: Laravel e aplicações real time com Laravel Echo

“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
Page 41: Laravel e aplicações real time com Laravel Echo

“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

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

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

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

Agora iremos utilizar nossa App Keys do Pusher em nosso Laravel!

Page 46: Laravel e aplicações real time com Laravel Echo

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

“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

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

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

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

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

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

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

Show MeThe Code - Laravel Echo em ação!

Page 55: Laravel e aplicações real time com Laravel Echo

Obrigado!Perguntas?

Meus contatos novamente:

@mdba_araujo

[email protected]