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:

Cole esse código na view show do chats (app/views/chats/show.html.erb):

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!


12 formas de vencer o bloqueio criativo e escrever textos memoráveis (e 6 dicas extras)

Não perca nenhum conteúdo

Receba nosso resumo semanal com os novos posts, cursos, talks e vagas o/



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


Primeira vez no OneBitCode? Curtiu esse conteúdo?
O OneBitCode tem muito mais para você!


O OneBitCode traz conteúdos de qualidade, e em português, sobre programação com foco em Ruby on Rails e também JavaScript.
Além disso, aqui sempre levamos à você conteúdos valiosos sobre a carreira de programação, dicas sobre currículos, portfólios, perfil profissional, soft skills, enfim, tudo o que você precisa saber para continuar evoluindo como Programador(a)!

Fique por dentro de todos os conteúdos o/

 

Nossas redes sociais:

📹 • https://youtube.com/Onebitcode [Live todas as terças-feiras às 19h)
💻 • dating dna
🙂 • https://onebitcode.com/best-dating-sim/
 📱  • lying about your age on dating sites
🐦 • https://twitter.com/onebitcode

 

Nossos cursos:

🥇 • Programador Full Stack Javascript em 8 Semanas
💎 • Curso Completo de Ruby
 ⚙  • Minicurso: API Rails 5 Completo
🐞 • Minicurso de Testes para Ruby on Rails com RSpec

 

Espero que curta nossos conteúdos e sempre que precisar de ajuda, fala com a gente!
E
stamos aqui para você 🙂

Bem-vindo à família OneBitCode o/

janeiro 17, 2020

Feito com s2 por OneBitCode