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:

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
<div class="messages">
  <%= message.content %>
</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
<div class="container" align="center">
  <h1 class="title">Bate Papo</h1>
  <div id="messages">
    <%= render @messages %>
  </div>
  <form>
    <input type="text" placeholder=" Diga alguma coisa :) " data-behavior="chat_speaker" />
  </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!
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

Deixe seu Feedback!

Comentários