Rails-toepassingen maken met Action Cable

In de wereld van webontwikkeling is real-time communicatie een steeds belangrijker aspect geworden. Of het nu gaat om chat-applicaties, live-updates of interactieve dashboards, ontwikkelaars hebben behoefte aan tools die hen in staat stellen om deze functionaliteiten eenvoudig te implementeren. Ruby on Rails biedt een krachtige oplossing voor dit probleem met Action Cable. In dit artikel zullen we dieper ingaan op wat Action Cable is, hoe je het kunt gebruiken in je Rails-toepassingen en enkele praktische voorbeelden geven.

Wat is Action Cable?

Action Cable is een framework dat deel uitmaakt van Ruby on Rails en dat ontwikkelaars in staat stelt om WebSocket-verbindingen te maken. WebSockets zijn een protocol dat een continue verbinding tussen de client en de server mogelijk maakt, waardoor real-time communicatie mogelijk is. Dit betekent dat je gegevens kunt verzenden en ontvangen zonder de pagina te vernieuwen, wat zorgt voor een soepelere gebruikerservaring.

Voordelen van Action Cable

Real-time communicatie: Gebruikers kunnen onmiddellijk updates ontvangen zonder de pagina te verversen.
Integratie met Rails: Action Cable is naadloos geïntegreerd in het Rails-ecosysteem, waardoor het eenvoudig te gebruiken is met bestaande modellen en controllers.
Schaling: Action Cable kan worden geschaald met behulp van Redis, wat het mogelijk maakt om meerdere servers te gebruiken voor een grotere gebruikersbasis.
Beveiliging: Action Cable biedt ingebouwde mechanismen voor authenticatie en autorisatie.

Hoe Action Cable te gebruiken in je Rails-toepassing

Om Action Cable in je Rails-toepassing te gebruiken, volg je deze stappen:

Stap 1: Een nieuwe Rails-toepassing maken

Als je nog geen Rails-toepassing hebt, kun je er een maken met de volgende opdracht:

rails new my_app --skip-javascript

Hiermee maak je een nieuwe Rails-toepassing zonder de standaard JavaScript-configuratie, omdat we deze later zelf zullen toevoegen.

Stap 2: Action Cable configureren

Open het bestand config/cable.yml en configureer de adapter. Voor de meeste toepassingen is de standaardinstelling voldoende, maar als je Redis wilt gebruiken, kun je het als volgt instellen:

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

test:
  adapter: test

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

Stap 3: Een kanaal maken

Nu we Action Cable hebben geconfigureerd, kunnen we een kanaal maken. Kanalen zijn de verbindingen die clients gebruiken om met de server te communiceren. Maak een nieuw kanaal met de volgende opdracht:

rails generate channel Chat

Dit genereert een aantal bestanden, waaronder app/channels/chat_channel.rb en app/javascript/channels/chat_channel.js.

Stap 4: De serverlogica instellen

Open het bestand app/channels/chat_channel.rb en voeg de volgende code toe:

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

  def unsubscribed
    # Hier kun je logica toevoegen voor wanneer een gebruiker zich afmeldt
  end

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

In deze code definiëren we wat er gebeurt wanneer een gebruiker zich abonneert op het kanaal en wanneer ze een bericht verzenden.

Stap 5: De clientlogica instellen

Nu moeten we de clientlogica instellen om verbinding te maken met ons kanaal. Open het bestand app/javascript/channels/chat_channel.js en voeg de volgende code toe:

import consumer from "./consumer"

consumer.subscriptions.create("ChatChannel", {
  connected() {
    // Dit wordt aangeroepen wanneer de verbinding is gemaakt
  },

  disconnected() {
    // Dit wordt aangeroepen wanneer de verbinding is verbroken
  },

  received(data) {
    // Dit wordt aangeroepen wanneer er een nieuw bericht is ontvangen
    const messages = document.getElementById('messages')
    messages.insertAdjacentHTML('beforeend', `${data.message}`)
  },

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

Hier definiëren we de methoden die worden aangeroepen wanneer de verbinding is gemaakt, verbroken of wanneer er nieuwe gegevens worden ontvangen.

Stap 6: De gebruikersinterface maken

Nu we de server- en clientlogica hebben ingesteld, moeten we een eenvoudige gebruikersinterface maken. Open een van je view-bestanden, bijvoorbeeld app/views/chat/index.html.erb, en voeg de volgende code toe:

In deze code maken we een eenvoudig tekstinvoerveld en een knop om berichten te verzenden. Wanneer de knop wordt ingedrukt, wordt het bericht verzonden naar het kanaal.

Testen van je toepassing

Nu je alles hebt ingesteld, kun je je toepassing testen. Start de Rails-server met de volgende opdracht:

rails server

Open je browser en ga naar http://localhost:3000/chat (vervang dit door de juiste route als je die hebt ingesteld). Open meerdere tabbladen of vensters en probeer berichten te verzenden. Je zou moeten zien dat de berichten in realtime verschijnen in alle open vensters.

Conclusie

Action Cable is een krachtige tool voor het bouwen van real-time applicaties in Ruby on Rails. Met de stappen die we in dit artikel hebben besproken, kun je eenvoudig een chat-applicatie of andere real-time functionaliteiten aan je Rails-toepassing toevoegen. Of je nu een beginner bent of een ervaren ontwikkelaar, Action Cable biedt de flexibiliteit en functionaliteit die je nodig hebt om je applicaties naar een hoger niveau te tillen.

Dus waar wacht je nog op? Begin vandaag nog met het bouwen van je eigen real-time Rails-toepassingen met Action Cable!