Créer des applications Rails avec Action Cable

Dans le monde du développement web moderne, la communication en temps réel est devenue une fonctionnalité essentielle pour de nombreuses applications. Que ce soit pour des chats en direct, des notifications instantanées ou des mises à jour en temps réel, Action Cable, intégré à Ruby on Rails, offre une solution élégante et efficace. Dans cet article, nous allons explorer comment créer des applications Rails avec Action Cable, en vous guidant à travers les étapes nécessaires et en fournissant des exemples de code.

Qu'est-ce qu'Action Cable ?

Action Cable est une bibliothèque de Ruby on Rails qui permet d'ajouter facilement des fonctionnalités de WebSocket à vos applications. Les WebSockets sont un protocole de communication qui permet une interaction bidirectionnelle entre le client et le serveur, ce qui signifie que les données peuvent être envoyées et reçues en temps réel sans avoir besoin de recharger la page.

Avec Action Cable, vous pouvez créer des canaux qui gèrent les connexions WebSocket, permettant ainsi aux utilisateurs de recevoir des mises à jour instantanées. Cela est particulièrement utile pour des applications comme les messageries instantanées, les jeux en ligne, ou toute autre application nécessitant une communication en temps réel.

Configuration de votre application Rails

Avant de plonger dans le code, assurez-vous d'avoir une application Rails prête à l'emploi. Si vous n'en avez pas encore, vous pouvez en créer une en utilisant la commande suivante :

rails new mon_application --skip-javascript

Nous allons également avoir besoin de Redis, qui est souvent utilisé comme serveur de pub/sub pour Action Cable. Assurez-vous d'avoir Redis installé sur votre machine. Vous pouvez l'installer via Homebrew sur macOS :

brew install redis

Une fois Redis installé, démarrez le serveur Redis avec la commande :

redis-server

Configurer Action Cable

Pour activer Action Cable dans votre application, vous devez d'abord le configurer dans le fichier cable.yml. Ce fichier se trouve dans le répertoire config de votre application. Voici un exemple de configuration pour l'environnement de développement :

development:
  adapter: redis
  url: redis://localhost:6379/1
  channel_prefix: mon_application_development

Cette configuration indique à Action Cable d'utiliser Redis comme adaptateur et de se connecter à l'instance Redis en cours d'exécution sur votre machine locale.

Créer un canal Action Cable

Maintenant que nous avons configuré Action Cable, nous allons créer un canal. Les canaux sont des classes qui gèrent les connexions WebSocket. Pour créer un canal, utilisez la commande suivante :

rails generate channel Chat

Cette commande va générer deux fichiers : app/channels/chat_channel.rb et app/javascript/channels/chat_channel.js. Ouvrons le fichier Ruby pour définir notre logique de canal.

Définir le canal

Dans le fichier chat_channel.rb, nous allons définir les méthodes pour gérer les abonnements et les messages :

class ChatChannel < ApplicationCable::Channel
  def subscribed
    stream_from "chat_channel"
  end

  def unsubscribed
    # Toute logique de nettoyage lorsque le canal est désabonné
  end

  def send_message(data)
    ActionCable.server.broadcast("chat_channel", message: data['message'])
  end
end

Dans ce code, nous avons défini une méthode subscribed qui permet aux utilisateurs de s'abonner au canal chat_channel. La méthode send_message est utilisée pour diffuser un message à tous les abonnés du canal.

Configurer le côté client

Passons maintenant au fichier JavaScript chat_channel.js. Nous allons établir une connexion au canal et gérer l'envoi et la réception des messages :

import consumer from "./consumer"

const chatChannel = consumer.subscriptions.create("ChatChannel", {
  connected() {
    // Appelé lorsque le canal est connecté
  },

  disconnected() {
    // Appelé lorsque le canal est déconnecté
  },

  received(data) {
    // Affiche le message reçu
    const messages = document.getElementById('messages');
    messages.insertAdjacentHTML('beforeend', `${data.message}`);
  },

  send_message(message) {
    this.perform('send_message', { message: message });
  }
});

Dans ce code, nous avons créé une instance de ChatChannel et défini des méthodes pour gérer les connexions et les messages reçus. La méthode send_message est utilisée pour envoyer un message au serveur.

Créer une interface utilisateur

Pour interagir avec notre canal, nous avons besoin d'une interface utilisateur. Créez un fichier app/views/chat/index.html.erb et ajoutez le code suivant :

<h1>Chat en direct</h1>
<div id="messages"></div>
<input type="text" id="message_input" placeholder="Tapez votre message ici..." />
<button id="send_button">Envoyer</button>

<script>
  document.getElementById('send_button').addEventListener('click', function() {
    const messageInput = document.getElementById('message_input');
    chatChannel.send_message(messageInput.value);
    messageInput.value = '';
  });
</script>

Ce code crée une simple interface de chat avec un champ de saisie et un bouton d'envoi. Lorsque l'utilisateur clique sur le bouton, le message est envoyé au canal via la méthode send_message.

Tester votre application

Pour tester votre application, assurez-vous que le serveur Rails et Redis sont en cours d'exécution. Démarrez le serveur Rails avec la commande :

rails server

Ensuite, ouvrez plusieurs onglets de votre navigateur et accédez à http://localhost:3000/chat. Vous devriez pouvoir envoyer des messages entre les différents onglets en temps réel.

Conclusion

Action Cable est un outil puissant pour ajouter des fonctionnalités de communication en temps réel à vos applications Rails. Dans cet article, nous avons couvert les étapes de configuration d'Action Cable, la création d'un canal, la gestion des messages et la création d'une interface utilisateur simple. Avec ces connaissances, vous êtes maintenant prêt à explorer davantage les possibilités offertes par Action Cable et à créer des applications encore plus interactives.

Que vous développiez une application de chat, un tableau de bord en temps réel ou toute autre fonctionnalité nécessitant une communication instantanée, Action Cable vous offre les outils nécessaires pour réussir. N'hésitez pas à expérimenter et à personnaliser votre application selon vos besoins !