Como criar um Chat em tempo real usando Action Cable (Rails 5)

PORQUE USAR  O ACTION CABLE?

Criar Apps usando o Action Cable (WebSockets) pode ser muito mais eficiente e elegante do que fazer inúmeras chamadas repetitivas para o backend via Ajax e etc.
Usando esse método podemos criar qualquer tipo de App que dependa de uma integração em real time do backend com o front end.

O que vamos Aprender?

Como criar um chat real time usando o Action Cable.

Ingredientes

1. Ruby 2.3.1
2. Rails 5
3. Action Cable (parte do rails 5)

Código completo

Como de costume, você pode acessar o código desenvolvido durante o tutorial no GitHub para realizar comparações caso você tenha alguma dúvida :), acessa aqui o código e já me segue por lá.

REVEJA:
Screencast #1:  
Criando Autenticação com o Facebook! (Devise + Omniauth) 
Screencast #2:  Criando um e-commerce com Spree em 15 minutos! 

Lista de comandos usados no Screencast em ordem

Para gerar o Projeto, rode:

Criar o controller Chats, rode no console:

Cole essa código dentro do controller chat no método show:

Altere o routes para colocar o método show do chat como root do projeto:

Gere o model messages rodando no console:

Crie o arquivo _messages.html.erb no seguinte path app/views/messages/ e cole esse código:
<%= message.content %>
Cole esse código na view show do chats (app/views/chats/show.html.erb)

 

Bate Papo

 

<%= render @messages %>

 

 

Gere o canal do action cable, rodando no console:

Coloque o route do action cable no arquivo routes:

Rode migrations:

Altere o arquivo chat.coffee para que ele passe a mensagem para o backend:

Novamente no arquivo chat.coffee, coloque esse código no received:

Coloque agora também em chat.coffee esse código:

No arquivo do chat channel, coloque esse código no método subscribe:

E também no arquivo do chat channel, coloque esse código no método speak:

No model Message, coloque esse código:

Rode no console para gerar o job:

Substitua o código do Chat Broadcast na pasta job por esse código:

\o/ Pronto, agora é só testar o seu chat. Parabéns!
Conclusão

Usando o Active Cable  nós podemos fazer coisas bem legais, então se você quer construir um App que precisa de comunicação em real time de uma maneira profissional na plataforma do Rails, o Active Cable é o caminho para você. Se você ficou com alguma dúvida ou quer compartilhar a sua experiência sobre o uso do Action Cable, comenta aí em baixo ou me adiciona no Facebook.

Pequeno Merchandising do bem 🙂

Como eu já disse no Post anterior a minha namorada está com um projeto bem legal que pode ser a diferença entre você conseguir ou não aquele Job maneiro :).
Ela é a designer responsável pela beleza desde Blog \o/ e o projeto é um site onde você pode encomendar um currículo gráfico (um currículo bonito que impressiona) para aumentar suas chances de conseguir um bom Job.
Dá uma olhada lá no projeto clicando aqui.

img-curriculo-grafico-com-01
Muito Obrigado por acompanhar este Blog!

Abraço,
Leonardo Scorza.

Referências para o post:
Post do Hector Perez

outubro 4, 2017
Feito com s2 por OneBitCode
%d blogueiros gostam disto: