Nessa palestra eu tive a oportunidade de apresentar um pouco do Laravel ECHO, real time, Events, e BroadCasting em Laravel. Ensinei sobre a instalação do Laravel Echo e também criei códigos de exemplos da apresentação que podem ser encontrado no meu GitHub no link: https://github.com/michaeldouglas/phpconferenceexemplos

1. Laravel e
aplicações real
time

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:

4. https://github.com/michaeldouglas
https://twitter.com/mdba_araujo
https://facebook.com/mdba.araujo

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!

9. 1.
Aplicação em tempo
Real?

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?

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!

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!

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!

37. 5.
O que é
Laravel ECHO?

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.

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!

55. Obrigado!
Perguntas?
Meus contatos novamente:
@mdba_araujo
michaeldouglas010790@gmail.com