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:
|
1 |
rails new my_chat |
Criar o controller Chats, rode no console:
|
1 |
rails g controller chats show |
Cole essa código dentro do controller chat no método show:
|
1 |
@messages = Message.all |
Altere o routes para colocar o método show do chat como root do projeto:
|
1 |
root to: "chats#show" |
Gere o model messages rodando no console:
|
1 |
rails g model messages content:text |
Crie o arquivo _messages.html.erb no seguinte path app/views/messages/ e cole esse código:
|
1 2 3 4 5 |
<div class="message"> <p> <%= message.content %> </p> </div> |
Cole esse código na view show do chats (app/views/chats/show.html.erb):
|
1 2 3 4 5 6 7 8 9 10 |
<div align="center" class="container"> <h1 class="title">Bate Papo</h1> <div id="messages"> <%= render @messages %> </div> <form> <input type="text" data-behavior="chat_speaker" placeholder=" Diga alguma coisa :) "> </form> </div> |
Gere o canal do action cable, rodando no console:
|
1 |
rails g channel chat speak |
Coloque o route do action cable no arquivo routes:
|
1 |
mount ActionCable.server => '/cable' |
Rode migrations:
|
1 |
rake db:migrate |
Altere o arquivo chat.coffee para que ele passe a mensagem para o backend:
|
1 2 |
speak: (message) -> @perform 'speak', message: message |
Novamente no arquivo chat.coffee, coloque esse código no received:
|
1 2 |
received: (data) -> $('#messages').append data['message'] |
Coloque agora também em chat.coffee esse código:
|
1 2 3 4 5 |
$(document).on 'keypress', '[data-behavior~=chat_speaker]', (event) -> if event.keyCode is 13 # return = send App.chat.speak event.target.value event.target.value = "" event.preventDefault() |
No arquivo do chat channel, coloque esse código no método subscribe:
|
1 |
stream_from "chat_channel" |
E também no arquivo do chat channel, coloque esse código no método speak:
|
1 2 3 |
def speak (data) Message.create! content: data['message'] end |
No model Message, coloque esse código:
|
1 |
after_create_commit { ChatBroadcastJob.perform_later self } |
Rode no console para gerar o job:
|
1 |
rails g job ChatBroadcast |
Substitua o código do Chat Broadcast na pasta job por esse código:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
class ChatBroadcastJob < ApplicationJob queue_as :default def perform(message) ActionCable.server.broadcast 'chat_channel', message: render_message(message) end private def render_message(message) ApplicationController.renderer.render(partial: 'messages/message', locals: { message: message }) end end |
\o/ Pronto, agora é só testar o seu chat. Parabéns!
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.
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!
Estamos aqui para você 🙂
Bem-vindo à família OneBitCode o/
