Skapa Rails-applikationer med Action Cable

Action Cable är en kraftfull del av Ruby on Rails som gör det möjligt att bygga realtidsapplikationer. Med Action Cable kan du enkelt integrera WebSocket-teknologi i dina Rails-applikationer, vilket gör det möjligt för användare att interagera med varandra i realtid. I denna artikel kommer vi att gå igenom grunderna för Action Cable, hur man sätter upp det i en Rails-applikation och några exempel på hur man kan använda det.

Vad är Action Cable?

Action Cable är en del av Rails som gör det möjligt att hantera WebSocket-anslutningar. Det ger en fullständig integration med Rails och gör det enkelt att bygga realtidsfunktioner som chattapplikationer, live-notifikationer och mycket mer. Med Action Cable kan du skicka och ta emot meddelanden i realtid, vilket förbättrar användarupplevelsen avsevärt.

Fördelar med Action Cable

Realtidskommunikation: Användare kan interagera med applikationen utan att behöva ladda om sidan.
Enkel integration: Action Cable är inbyggt i Rails, vilket gör det enkelt att använda tillsammans med andra Rails-funktioner.
Skalbarhet: Action Cable kan hantera många samtidiga anslutningar, vilket gör det lämpligt för stora applikationer.
Stöd för flera protokoll: Action Cable kan arbeta med både WebSocket och fallback-alternativ som AJAX.

Komma igång med Action Cable

För att börja använda Action Cable i din Rails-applikation, följ dessa steg:

1. Skapa en ny Rails-applikation

Om du inte redan har en Rails-applikation, kan du skapa en ny med följande kommando:

rails new my_realtime_app --skip-javascript

Vi använder flaggan --skip-javascript för att undvika att skapa en standard JavaScript-mapp, eftersom vi kommer att hantera JavaScript senare.

2. Aktivera Action Cable

Action Cable är aktiverat som standard i Rails, men du måste se till att det är korrekt konfigurerat. Öppna config/cable.yml och se till att din utvecklingsmiljö är inställd på att använda Redis som backend:

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

Se till att du har Redis installerat och igång på din maskin. Du kan installera Redis med Homebrew på macOS:

brew install redis
brew services start redis

3. Skapa en kanal

Nu är det dags att skapa en kanal. Kanaler är där all realtidskommunikation sker. Du kan skapa en ny kanal med följande kommando:

rails generate channel Chat

Detta kommando skapar två filer: app/channels/chat_channel.rb och app/javascript/channels/chat_channel.js.

4. Implementera kanalens logik

Öppna app/channels/chat_channel.rb och lägg till följande kod:

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

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end

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

Denna kod gör att när en användare prenumererar på ChatChannel, kommer de att ta emot meddelanden som sänds till kanalen. Metoden speak används för att sända meddelanden till alla anslutna användare.

5. Implementera JavaScript för att hantera kanalen

Öppna app/javascript/channels/chat_channel.js och lägg till följande kod:

import consumer from "./consumer"

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}`);
  },

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

Denna kod hanterar anslutningen till ChatChannel och definierar hur meddelanden tas emot och visas på sidan.

6. Skapa en vy för att skicka och ta emot meddelanden

Skapa en ny vy i app/views/chat/index.html.erb:

Chat

Denna vy innehåller ett textfält för att skriva meddelanden och en knapp för att skicka dem. När knappen klickas, kommer meddelandet att skickas till ChatChannel.

Testa din applikation

Nu är det dags att testa din applikation! Starta din Rails-server med:

rails server

Öppna din webbläsare och navigera till http://localhost:3000/chat. Öppna flera flikar och testa att skicka meddelanden mellan dem. Du bör se att meddelandena dyker upp i realtid!

Avslutande tankar

Action Cable är ett fantastiskt verktyg för att bygga realtidsapplikationer med Ruby on Rails. Genom att följa stegen ovan har du nu en grundläggande chattapplikation som använder Action Cable för att hantera realtidskommunikation. Du kan bygga vidare på detta exempel genom att lägga till funktioner som användarnamn, meddelandehistorik och mycket mer.

Vi hoppas att denna artikel har gett dig en bra introduktion till Action Cable och hur du kan använda det i dina Rails-applikationer. Lycka till med ditt utvecklande!