En el mundo del desarrollo web, la interactividad en tiempo real se ha convertido en una característica esencial para muchas aplicaciones. Action Cable, una poderosa herramienta de Ruby on Rails, permite a los desarrolladores integrar WebSockets en sus aplicaciones, facilitando la comunicación bidireccional entre el servidor y el cliente. En este artículo, exploraremos cómo crear aplicaciones Rails utilizando Action Cable, desde la configuración inicial hasta la implementación de características interactivas.
Action Cable es una biblioteca de Ruby on Rails que proporciona una interfaz para trabajar con WebSockets. Permite a los desarrolladores crear aplicaciones que pueden enviar y recibir datos en tiempo real, lo que es ideal para aplicaciones de chat, notificaciones en vivo, actualizaciones de datos en tiempo real y más. Action Cable combina la simplicidad de Rails con la potencia de WebSockets, lo que lo convierte en una opción popular para aplicaciones modernas.
Para comenzar a trabajar con Action Cable, primero necesitamos configurar una nueva aplicación Rails. Asegúrate de tener Ruby y Rails instalados en tu sistema. Si no los tienes, puedes instalarlos siguiendo la documentación oficial de Ruby y Rails.
Abre tu terminal y ejecuta el siguiente comando para crear una nueva aplicación Rails:
rails new chat_app --skip-javascript
El flag --skip-javascript se utiliza aquí para evitar la configuración de JavaScript, ya que lo configuraremos manualmente más adelante.
Action Cable viene incluido en Rails por defecto, así que no necesitas instalar ninguna gema adicional. Sin embargo, asegúrate de que tu archivo Gemfile tenga la siguiente línea:
gem 'redis', '~> 4.0'
Redis es un sistema de almacenamiento en memoria que Action Cable utiliza para manejar la comunicación entre los servidores. Después de agregar la gema, ejecuta:
bundle install
Para que Action Cable funcione correctamente, necesitamos configurar Redis. Asegúrate de tener Redis instalado en tu máquina. Puedes instalarlo usando Homebrew en macOS:
brew install redis
Una vez que Redis esté instalado, puedes iniciarlo con el siguiente comando:
redis-server
Ahora que tenemos todo configurado, es hora de crear un canal de Action Cable. Los canales son la forma en que Action Cable organiza la comunicación entre el servidor y los clientes.
Ejecuta el siguiente comando en tu terminal para generar un nuevo canal llamado ChatChannel:
rails generate channel Chat
Esto creará dos archivos: app/channels/chat_channel.rb y app/javascript/channels/chat_channel.js.
Abre el archivo app/channels/chat_channel.rb y modifica el contenido para que se vea así:
class ChatChannel < ApplicationCable::Channel
def subscribed
stream_from "chat_channel"
end
def unsubscribed
# Any cleanup needed when channel is unsubscribed
end
def send_message(data)
ActionCable.server.broadcast("chat_channel", message: data['message'])
end
end
En este código, estamos definiendo un canal que se suscribe a chat_channel y permite enviar mensajes a todos los clientes conectados.
Ahora, abre el archivo app/javascript/channels/chat_channel.js y modifica el contenido para que se vea así:
import consumer from "./consumer"
const chatChannel = consumer.subscriptions.create("ChatChannel", {
connected() {
// Called when the subscription is ready for use on the server
},
disconnected() {
// Called when the subscription has been terminated by the server
},
received(data) {
const messages = document.getElementById('messages');
messages.insertAdjacentHTML('beforeend', `${data.message}
`);
},
send_message(message) {
this.perform('send_message', { message: message });
}
});
export default chatChannel;
Este código establece la conexión con el canal y define cómo manejar los mensajes recibidos.
Ahora que tenemos nuestro canal configurado, es hora de crear la interfaz de usuario. Vamos a crear una vista simple donde los usuarios puedan enviar y recibir mensajes.
Abre el archivo app/views/layouts/application.html.erb y agrega el siguiente código dentro del <body>:
Esto crea un contenedor para los mensajes, un campo de entrada y un botón para enviar mensajes.
Ahora, vamos a agregar la lógica para enviar mensajes. Crea un nuevo archivo llamado app/javascript/packs/chat.js y agrega el siguiente código:
import chatChannel from "../channels/chat_channel"
document.addEventListener('DOMContentLoaded', () => {
const sendButton = document.getElementById('send_button');
const messageInput = document.getElementById('message_input');
sendButton.addEventListener('click', () => {
const message = messageInput.value;
chatChannel.send_message(message);
messageInput.value = '';
});
});
Este código agrega un evento al botón de enviar que envía el mensaje a través del canal cuando se hace clic.
Ahora que hemos configurado todo, es hora de ejecutar nuestra aplicación. En la terminal, ejecuta:
rails server
Luego, abre tu navegador y ve a http://localhost:3000. Deberías ver tu interfaz de chat. Abre varias pestañas del navegador para probar la funcionalidad de chat en tiempo real.
Action Cable es una herramienta poderosa que permite a los desarrolladores de Rails crear aplicaciones interactivas en tiempo real de manera sencilla. En este artículo, hemos cubierto los pasos básicos para configurar Action Cable, crear un canal y construir una interfaz de usuario simple para un chat en tiempo real. Con esta base, puedes expandir tu aplicación y agregar más características, como autenticación de usuarios, almacenamiento de mensajes y más.
¡Ahora es tu turno! Experimenta con Action Cable y crea aplicaciones que ofrezcan experiencias interactivas y en tiempo real para tus usuarios.
© 2024 RailsInsights. All rights reserved.