Erstellen von Rails-Anwendungen mit Action Cable

In der heutigen digitalen Welt sind Echtzeitanwendungen gefragter denn je. Benutzer erwarten sofortige Rückmeldungen und Interaktionen, sei es in sozialen Netzwerken, Chats oder Online-Spielen. Ruby on Rails bietet mit Action Cable eine elegante Lösung, um WebSockets in Ihre Anwendungen zu integrieren. In diesem Artikel werden wir die Grundlagen von Action Cable erkunden und Ihnen zeigen, wie Sie es in Ihrer Rails-Anwendung implementieren können.

Was ist Action Cable?

Action Cable ist ein Framework, das in Ruby on Rails integriert ist und es Entwicklern ermöglicht, WebSocket-Verbindungen einfach zu erstellen und zu verwalten. Mit Action Cable können Sie Echtzeitfunktionen in Ihre Anwendungen integrieren, ohne auf externe Bibliotheken oder komplexe Konfigurationen zurückgreifen zu müssen.

Die Vorteile von Action Cable

Echtzeitkommunikation: Benutzer können sofortige Updates erhalten, ohne die Seite neu laden zu müssen.
Einfach zu integrieren: Action Cable ist nahtlos in Rails integriert und erfordert nur minimale Konfiguration.
Skalierbarkeit: Action Cable kann mit Redis oder anderen Backends skaliert werden, um eine hohe Benutzeranzahl zu unterstützen.
Flexibilität: Sie können Action Cable für verschiedene Anwendungsfälle verwenden, von Chats bis hin zu Benachrichtigungen.

Einrichten von Action Cable in Ihrer Rails-Anwendung

Um Action Cable in Ihrer Rails-Anwendung zu verwenden, müssen Sie zunächst sicherstellen, dass Sie eine aktuelle Version von Rails installiert haben. Action Cable ist ab Rails 5 verfügbar. Wenn Sie eine neue Anwendung erstellen, können Sie dies mit dem folgenden Befehl tun:

rails new meine_app --skip-javascript

Nachdem Sie Ihre Anwendung erstellt haben, navigieren Sie in das Verzeichnis Ihrer Anwendung:

cd meine_app

Jetzt können Sie Action Cable aktivieren. Öffnen Sie die Datei config/cable.yml und stellen Sie sicher, dass die Konfiguration für den Entwicklungsmodus korrekt ist:

development:
  adapter: async

Für die Produktionsumgebung sollten Sie Redis als Adapter verwenden. Installieren Sie Redis und ändern Sie die Konfiguration entsprechend:

production:
  adapter: redis
  url: redis://localhost:6379/1

Erstellen eines einfachen Chat-Systems mit Action Cable

Um die Funktionsweise von Action Cable zu demonstrieren, erstellen wir ein einfaches Chat-System. Folgen Sie diesen Schritten:

1. Generieren des Chat-Modells

Erstellen Sie ein Chat-Modell, das die Nachrichten speichert:

rails generate model Message content:text
rails db:migrate

2. Erstellen des Channels

Erstellen Sie einen Channel für den Chat:

rails generate channel Chat

Öffnen Sie die Datei app/channels/chat_channel.rb und fügen Sie den folgenden Code hinzu:

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

  def unsubscribed
    # Cleanup when channel is unsubscribed
  end

  def send_message(data)
    Message.create(content: data['message'])
  end
end

3. Erstellen der Controller- und View-Dateien

Erstellen Sie einen Controller für den Chat:

rails generate controller Chats index

Öffnen Sie die Datei app/controllers/chats_controller.rb und fügen Sie den folgenden Code hinzu:

class ChatsController < ApplicationController
  def index
    @messages = Message.all
  end
end

Jetzt erstellen wir die View-Datei. Öffnen Sie app/views/chats/index.html.erb und fügen Sie den folgenden Code hinzu:

Chat

  <%= render @messages %>


<%= form_with url: '#', id: 'message_form' do |form| %>
  <%= form.text_area :message, id: 'message_input' %>
  <%= form.submit 'Send' %>
<% end %>

4. Hinzufügen von JavaScript für Action Cable

Um die Echtzeitkommunikation zu ermöglichen, müssen wir JavaScript hinzufügen. Öffnen Sie die Datei app/javascript/channels/chat_channel.js und fügen Sie den folgenden Code hinzu:

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 })
  }
})

document.getElementById('message_form').addEventListener('submit', function(event) {
  event.preventDefault()
  const messageInput = document.getElementById('message_input')
  chatChannel.send_message(messageInput.value)
  messageInput.value = ''
})

Testen der Anwendung

Jetzt sind wir bereit, unsere Anwendung zu testen. Starten Sie den Rails-Server:

rails server

Öffnen Sie Ihren Browser und navigieren Sie zu http://localhost:3000/chats. Sie sollten in der Lage sein, Nachrichten zu senden und in Echtzeit zu sehen, wie sie erscheinen.

Fazit

Action Cable ist ein leistungsstarkes Werkzeug, das es Entwicklern ermöglicht, Echtzeitfunktionen in ihre Rails-Anwendungen zu integrieren. In diesem Artikel haben wir die Grundlagen von Action Cable behandelt und ein einfaches Chat-System erstellt. Mit Action Cable können Sie die Benutzererfahrung Ihrer Anwendung erheblich verbessern und den Benutzern sofortige Rückmeldungen bieten.

Experimentieren Sie mit Action Cable und erweitern Sie Ihre Anwendung um weitere Funktionen wie Benachrichtigungen, Live-Updates und vieles mehr. Die Möglichkeiten sind nahezu unbegrenzt!