Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Mario Cardoso

Min Read

18. Mai 2021

WebSockets und Action-Kabel in Rails 5

Wie ihr vielleicht wisst, ist Rails 5 da und hat einen aufregenden Sidekick! Meine Damen und Herren, legen wir die Hände zusammen und heißen Sie willkommen Action-Kabel, das neuartige Framework, das integriert WebSocket Kommunikation mit Rails.

Heute möchte ich einige Gedanken zu diesem Framework teilen, mit WebSockets beginnen, zu Action Cable übergehen und mich dann mit den Problemen befassen, auf die WebSockets die Antwort sind, und der Reihe der Lösungen, die man möglicherweise implementieren kann.

Im großen Finale geht es um die Struktur und Dynamik unseres Helden des Tages — Action Cable.

blue arrow to the left
Imaginary Cloud logo

WebSockets

Was sind WebSockets? Wenn Sie versuchen, diese Antwort im Internet zu finden, erhalten Sie möglicherweise Aussagen wie:

„WebSockets sind diese coolen Dinge, die die Node-Leute benutzen können“

oder

„Ich habe gehört, dass WebSockets die Zukunft sind“

Shia Labeouf SNL

WebSockets sind im Grunde eine weitere Kommunikationsebene zwischen Client und Server, aber im Gegensatz zu HTTP-Anfragen sind ihre Verbindungen staatlich. Das bedeutet, dass die Verbindung zwischen Client und Server konstant und verbunden bleibt.

WebSocket-Verbindungen ermöglichen eine gleichzeitige und bidirektionale Kommunikation, sodass sowohl der Client als auch der Server jederzeit Nachrichten über den Kanal senden können.

Ein weiterer Vorteil der Verwendung von WebSockets ist Sobald Sie die Verbindung hergestellt haben, müssen Sie nicht viele Metadaten austauschen (HTTP-Header). Da es einen WebSocket pro Client gibt Sie müssen sich nicht jedes Mal identifizieren, wenn Sie Daten an den Server senden, weil der Server bereits weiß, wer du bist, da er weiß, wer den Channel geöffnet hat.

Der letzte (und offensichtliche) Vorteil ist, dass Sie können echte Echtzeitfunktionen haben, wie Chatrooms oder Benachrichtigungen, ohne dass beispielsweise Polling verwendet werden muss, wodurch die Server belastet werden.

Andererseits besteht der große Vorteil der Verwendung von HTTP anstelle von WebSockets darin, dass bereits eine Menge Dinge für HTTP implementiert sind, wie Caching, Routing und Multiplexing, die immer noch nicht implementiert sind WebSockets bereit.

Action-Kabel

Also, was ist Action Cable? Auf einer eigenen Github-Seite:

Action Cable integriert WebSockets nahtlos in den Rest Ihrer Rails-Anwendung. Es ermöglicht das Schreiben von Echtzeitfunktionen in Ruby im gleichen Stil und in derselben Form wie der Rest Ihrer Rails-Anwendung, während es dennoch skalierbar ist und die Leistung beibehält. Es handelt sich um ein Full-Stack-Angebot, das sowohl ein clientseitiges JavaScript-Framework als auch ein serverseitiges Ruby-Framework bietet. Sie haben Zugriff auf Ihr vollständiges Domain-Modell, das mit Active Record oder einem ORM Ihrer Wahl geschrieben wurde.

Das klingt großartig. Action Cable ist eine leistungsstarke Ergänzung zu Rails und bietet eine übersichtliche Oberfläche sowohl für clientseitigen Javascript-Code als auch für serverseitigen Rails-Code. Eine Sache, die ich besonders interessant fand, ist, dass Rails 5 standardmäßig mit Redis geliefert wird, da Action Cable es als Pub-Sub-Dienst für die Abonnenten des Kanals verwendet.

Warum wir WebSockets brauchen

Das ist alles sehr interessant, aber wir als Unternehmen nutzen Technologie, um die Probleme unserer Kunden zu lösen. Warum brauchen wir also WebSockets und Action Cable? Ich habe drei Hauptgründe gefunden.

Die erste ist, wenn man muss Schnelles Senden und Empfangen von Daten mit dem Server, zum Beispiel in Online-Browserspielen, die mehrere Nachrichten pro Sekunde mit dem Server austauschen müssen, oder Informationen über den Aktienmarkt, die sich ständig ändern.

Ein anderer ist Streaming. WebSockets sind eine gute Option, obwohl ich denke, dass Rails nicht häufig für Streaming-Anwendungen verwendet wird. Dies könnte sich in naher Zukunft mit Hilfe von WebSockets und Action Cable ändern.

Und zu guter Letzt lebende Elemente, wie Kommentarbereiche die automatisch aktualisiert werden, wenn neue Inhalte hinzugefügt werden, ohne dass eine Seitenaktualisierung und natürlich Chatrooms erforderlich sind. Hier möchten wir, dass die Seite aktualisiert wird, wenn sich die Daten auf dem Server ändern, ohne dass der Benutzer eingreifen muss, um die Funktionen von Action Cable optimal zu nutzen.

Es gibt jedoch Alternativen zu WebSockets.

Umfrage ist eine beliebte Lösung!

Beim Polling fragt der Client den Server regelmäßig, ob neue Daten vorliegen. Der Vorteil? Es ist absolut solide und sehr einfach einzurichten. Der Hauptnachteil ist die zusätzliche Belastung der Server. HTTP-Caching ist sehr gut, um diese Belastung zu verringern.

Umfragen sind für Dinge wie Kommentarbereiche in Ordnung, aber nicht für schnelle Kommunikationsanforderungen. Ein Beispiel ist die Basecamp-Chat-App, die 10 Jahre lang 3-Sekunden-Umfragen verwendete, aber mit Basecamp 3 auf Action Cable umgestellt wurde.

Andere „nicht so beliebte“ Optionen sind Long-Polling und Server-Sent Events.

In Lange Umfragen Der Client sendet eine Anfrage an den Server für neue Daten und wenn der Server neue Daten hat, sendet er eine Antwort wie eine normale HTTP-Anfrage zurück; wenn nicht, hält er die Anfrage fest und vervollständigt die Antwort, wenn neue Daten erscheinen.

Dies fällt schnell auseinander, wenn sich Daten häufig ändern. Außerdem sind Long-Polling-Techniken viel komplizierter zu implementieren als Polling.

Vom Server gesendete Ereignisse sind unidirektionale Verbindungen vom Server zum Client. Diese werden nicht nur nicht ordnungsgemäß unterstützt, sondern ermöglichen es dem Client auch nicht, Daten zurück an den Server zu senden.

So funktioniert Action Cable

Nur um das Gefühl zu bekommen, wie Action Cable in Aktion ist, habe ich eine einfache Chat-App gebaut. Sie basiert auf der Anmeldung, hat einen Raum, in dem Nachrichten ausgetauscht werden können, und Sie können die Benutzer sehen, die online sind. Ich werde jetzt über die wichtigsten Teile im Zusammenhang mit Action Cable sprechen.

Serverseitige Struktur:

Wenn Sie Ihre Rails 5-Anwendung erstellen, haben Sie jetzt einen weiteren Ordner im App-Verzeichnis, den Kanäle Mappe.

Channels Folder

Unter dem Ordner Channels hast du die Anwendungskabel Ordner, der das enthält channel.rb Datei und die Verbindung.rb Datei.

Das Verbindung.rb Datei erbt Formular ActionCable: :Connection: :Base und es wird für die allgemeine Authentifizierung verwendet. Wir können dieses Modul verwenden, um die Datenbank nach einem bestimmten Benutzer abzufragen, der die Verbindung herstellt, und um sicherzustellen, dass der Benutzer den Kanal anhören darf.

Das channel.rb erbt von ActionCable: :Channel: :Base und es ähnelt dem ApplicationController in unserer normalen Rails-Anwendung.

appearance_channel.rb and room_channel.rb

Dann haben wir zwei Kanäle unter dem Ordner, den appearance_channel.rb und die room_channel.rb. Das waren die Kanäle, die ich

geschaffen. Die Kanäle haben die gleichen abonnierten und abgemeldeten Methoden:

  • Das angemeldet Callback wird aufgerufen, wenn ein clientseitiges Abonnement initiiert wird;
  • Das abgemeldet Callback wird aufgerufen, wenn ein clientseitiges Abonnement beendet wird.

Darstellungskanal hat auch zwei weitere Methoden, die vom Client aufgerufen werden können. Raumkanal hat eine weitere Methode, die sprechen Methode, die auch vom Client verwendet wird, um Nachrichten an den Kanal zu senden.

AppearanceChannel
Client Side Structure

Von der Kundenseite aus haben wir die Kabel. Kaffee Datei, die für die Herstellung der Verbindung zwischen Client und Server verantwortlich ist.

Channel's Subscribers

Dann haben wir die Abonnenten des Kanals. In diesem Fall haben wir den Appearance-Abonnenten, der dem Appearance-Kanal beigetreten ist, und wir haben den Raum-Channel-Abonnenten, der dem Raumkanal beigetreten ist.

Channel Subscription

Auf dem Bild oben können wir sehen, wie das Kanalabonnement abgeschlossen wird.
Die Abonnenten haben einige Methoden gemeinsam:

  • Das verbunden Methode wird aufgerufen, wenn das Abonnement auf dem Server einsatzbereit ist;

  • Das getrennt Methode wird aufgerufen, wenn das Abonnement vom Server beendet wurde;

  • Und schließlich die erhalten Methode, die aufgerufen wird, wenn der Server Daten an den Client sendet.

Dann kann jeder Kanal verschiedene Methoden implementieren, die mit dem Kanal interagieren, den er auf der Serverseite abonniert hat. Das ist der Fall bei der sprechen, erscheinen und abseits Methoden, die Daten senden und die entsprechenden Methoden serverseitig aufrufen können.

Auf den Punkt gebracht

Rails lebt und bietet uns mehr (und bessere) Frameworks, mit denen wir Produkte effizienter entwickeln können.

Action Cable ist eines dieser Frameworks und ich glaube wirklich, dass es sehr nützlich sein kann, Live-Elemente zu erstellen, die in heutigen Webanwendungen so beliebt sind.

Ich bin auch neugierig auf die Juwelen, die auf Action Cable aufbauen können, und freue mich darauf, wie die Community dieses neue Tool annehmen wird.

Bei Imaginary Cloud wir arbeiten mit einem breiten Tech-Stack, einschließlich Ruby on Rails. Wenn Sie in Ihrem Softwareentwicklungsprojekt Hilfe mit dieser oder ähnlichen Technologien benötigen, wartet ein Expertenteam auf Sie! Schreiben Sie uns eine Nachricht hier!

Grow your revenue and user engagement by running a UX Audit! - Book a call

Fanden Sie diesen Artikel hilfreich? Diese könnten dir auch gefallen!

blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
Mario Cardoso
Mario Cardoso

Profi mit Erfahrung in den Bereichen Softwareentwicklung und Informationssysteme mit Schwerpunkt Full-Stack-Webengineering.

Read more posts by this author

People who read this post, also found these interesting:

arrow left
arrow to the right
Dropdown caret icon