Como usar o Rails para criar uma aplicação de chat em tempo real com ActionCable

O Ruby on Rails é um framework popular para o desenvolvimento de aplicações web, conhecido pela sua simplicidade e produtividade. Uma das funcionalidades poderosas do Rails é o ActionCable, que permite criar funcionalidades de WebSocket e gerenciar comunicações em tempo real, como chats, atualizações ao vivo e notificações. Neste artigo, vamos aprender como usar o Rails e o ActionCable para criar uma aplicação de chat em tempo real.

1. Configuração do Rails

Primeiramente, precisamos garantir que temos o Ruby on Rails instalado. Se ainda não o fez, siga estas etapas:

1. Instale o Ruby: rbenv install 3.1.2 (ou a versão desejada).
2. Instale o Rails: gem install rails.

Crie um novo projeto Rails com:

rails new ChatApp --skip-javascript
cd ChatApp

Em seguida, adicione o ActionCable à aplicação. O ActionCable já vem integrado ao Rails, então você não precisa de nenhuma configuração adicional para usá-lo.

2. Configurando o banco de dados

Para este chat, precisaremos de dois modelos principais: User e Message. O modelo User representa os usuários do chat, e o modelo Message armazena as mensagens enviadas.

Crie as migrações para o banco de dados:

rails generate model User name:string
rails generate model Message content:text user:references
rails db:migrate

3. Criando o canal de chat com ActionCable

Agora, vamos configurar o ActionCable. O ActionCable permite que você crie canais de comunicação, onde os clientes podem se inscrever para receber mensagens em tempo real.

1. Gere um canal de chat:

rails generate channel Chat

Isso cria o arquivo app/channels/chat_channel.rb. Vamos editar esse arquivo para que ele envie e receba mensagens em tempo real.

class ChatChannel < ApplicationCable::Channel
  def subscribed
    stream_from "chat_#{params[:chat_id]}_channel"
  end

  def receive(data)
    message = Message.create(content: data['message'], user_id: data['user_id'], chat_id: params[:chat_id])
    ActionCable.server.broadcast "chat_#{params[:chat_id]}_channel", message: render_message(message)
  end

  private

  def render_message(message)
    ApplicationController.renderer.render(partial: 'messages/message', locals: { message: message })
  end
end

4. Criando a interface de chat

Agora, vamos criar a interface de chat para enviar e receber mensagens.

Em app/views/chat/show.html.erb, crie a estrutura básica do chat:

<div id="messages"></div>
<input id="message_input" type="text" placeholder="Digite sua mensagem...">
<button id="send_message">Enviar</button>

Agora, adicione o JavaScript para se inscrever no canal do chat e enviar mensagens:

document.addEventListener("DOMContentLoaded", function() {
  const chatId = 1;  // ID do chat
  const userId = 1;  // ID do usuário
  const messagesDiv = document.getElementById('messages');
  const input = document.getElementById('message_input');
  const button = document.getElementById('send_message');

  const cable = ActionCable.createConsumer('/cable');
  const channel = cable.subscriptions.create(
    { channel: "ChatChannel", chat_id: chatId },
    {
      received(data) {
        messagesDiv.innerHTML += data.message;
      },
      sendMessage(message) {
        this.send({ message: message, user_id: userId });
      }
    }
  );

  button.addEventListener('click', function() {
    const message = input.value;
    if (message) {
      channel.sendMessage(message);
      input.value = '';
    }
  });
});

5. Testando o chat em tempo real

Agora, ao iniciar o servidor Rails com rails server e acessar http://localhost:3000/chat/1, você pode ver o chat em funcionamento. Quando um usuário envia uma mensagem, ela será transmitida em tempo real para todos os clientes conectados ao mesmo canal.

6. Conclusão

O ActionCable torna muito fácil adicionar funcionalidades em tempo real às suas aplicações Rails. Com apenas algumas linhas de código, conseguimos criar uma aplicação de chat simples que usa WebSockets para enviar e receber mensagens instantaneamente. Agora você pode expandir essa base para adicionar funcionalidades como autenticação, múltiplos chats, e muito mais.