Introduction

Si vous avez déjà voulu que votre application Rails ait l'air vivante, vous devriez jeter un œil à Action Cable. C'est la façon intégrée de Rails de gérer les WebSockets, ce qui signifie essentiellement que votre serveur et le navigateur peuvent rester connectés et discuter en temps réel. Plus besoin de rafraîchir la page, plus de polling encombrant — les mises à jour apparaissent instantanément.

Dans ce guide, nous allons créer une petite démo amusante : un compteur de trafic en direct. Lorsque quelqu'un arrive sur votre site, nous allons enregistrer cette visite dans la base de données, augmenter quelques compteurs en mémoire, et diffuser les chiffres mis à jour à tous ceux qui sont en ligne. Fermez l'onglet ? Le nombre d'utilisateurs en ligne chute immédiatement. C'est simple, mais cela montre la magie en temps réel que Action Cable apporte à Rails 7.

Étape 1 : Le modèle de visite

Tout d'abord, créons un modèle pour enregistrer les visites.

bin/rails g model Visit session_id:string ip:string user_agent:string
bin/rails db:migrate
# app/models/visit.rb
class Visit < ApplicationRecord
end

Étape 2 : Création d'une connexion personnalisée

Rails vous fournit déjà deux classes de base dans app/channels/application_cable/ :
- channel.rb → la classe de base pour tous vos canaux.
- connection.rb → la classe de base pour toutes vos connexions WebSocket.

Nous ne modifions généralement pas celles-ci. Au lieu de cela, nous les étendons en créant notre propre classe de connexion à l'intérieur de app/channels/. Cela garde les valeurs par défaut propres et place notre logique à un endroit clair.

# app/channels/traffic_connection.rb
module ApplicationCable
  class TrafficConnection < Connection
    identified_by :session_id, :ip, :user_agent

    def connect
      self.session_id = request.session.id
      self.ip         = request.ip
      self.user_agent = request.user_agent
    end
  end
end

Étape 3 : Compteurs en mémoire

Nous allons utiliser des compteurs atomiques pour rendre les choses rapides. Au démarrage, nous récupérons le nombre total de visites depuis la base de données et commençons les utilisateurs en ligne à zéro.

# config/initializers/traffic_counter.rb
$online_users = Concurrent::AtomicFixnum.new(0)
$total_visits = Concurrent::AtomicFixnum.new(Visit.count)

Étape 4 : Le canal

C'est ici que la magie opère — enregistrez la visite, mettez à jour les compteurs et diffusez.

# app/channels/traffic_channel.rb
class TrafficChannel < ApplicationCable::Channel
  def subscribed
    # enregistrer la visite
    Visit.create!(session_id: connection.session_id,
                  ip: connection.ip,
                  user_agent: connection.user_agent)

    # mettre à jour les compteurs
    $online_users.increment
    $total_visits.increment

    stream_from "traffic_channel"
    broadcast_counts
  end

  def unsubscribed
    $online_users.decrement
    broadcast_counts
  end

  private

  def broadcast_counts
    ActionCable.server.broadcast("traffic_channel", {
      online: $online_users.value,
      total:  $total_visits.value
    })
  end
end

Étape 5 : Le côté JavaScript

Lorsque vous exécutez bin/rails generate channel Traffic, Rails crée deux fichiers : le canal Ruby et le fichier d'abonnement JavaScript. Par défaut, le fichier JS importe consumer.js, que Rails a également configuré pour vous lors de la création de l'application.

// app/javascript/channels/traffic_channel.js
import consumer from "./consumer"

consumer.subscriptions.create("TrafficChannel", {
  received(data) {
    document.querySelector("#online-count").textContent = data.online
    document.querySelector("#total-count").textContent = data.total
  }
})

Le fichier consumer.js est généré par Rails lorsque vous créez une nouvelle application. Il configure la connexion WebSocket globale à /cable et ressemble à ceci :

// app/javascript/channels/consumer.js
import { createConsumer } from "@rails/actioncable"

export default createConsumer()

Étape 6 : La vue

<h1>🚦 Trafic en direct</h1>
<p>Actuellement en ligne : <span id="online-count">0</span></p>
<p>Total des visites : <span id="total-count"><%= Visit.count %></span></p>

Étape 7 : Routes

# config/routes.rb
Rails.application.routes.draw do
  root "home#index"
  mount ActionCable.server => "/cable"
end

Étape 8 : Essayez-le

Exécutez votre application avec bin/dev. Ouvrez votre site dans plusieurs onglets. Le compteur d'utilisateurs en ligne augmente avec chacun d'eux, et diminue lorsque vous les fermez. Le total des visites continue d'augmenter. C'est super satisfaisant à regarder ! 

Notes pour la production

- Plusieurs workers Puma ? Utilisez Redis pour les compteurs — la mémoire ne se synchronisera pas entre les processus.
- Vous voulez suivre les utilisateurs réels au lieu des sessions ? Ajoutez current_user dans la connexion.
- Stocker les visites dans la base de données signifie que vous pouvez effectuer des analyses plus tard, comme le trafic quotidien ou les répartitions par navigateur.

Et voilà — un compteur de trafic en temps réel dans Rails 7 avec Action Cable. En moins de 100 lignes de code, vous avez des mises à jour instantanées et un aperçu de ce que les WebSockets peuvent faire. Cette même configuration fonctionne pour les notifications, les tableaux de bord et toutes sortes de fonctionnalités en temps réel. Une fois que vous l'avez essayé, vous voudrez l'ajouter partout.