[go: up one dir, main page]

DEV Community

Cover image for Broadcast Turbo Streams without Redis
Rails Designer
Rails Designer

Posted on • Originally published at railsdesigner.com

Broadcast Turbo Streams without Redis

This article was originally published on Rails Designer


When the Hotwire suite of tools was introduced, one of the most exciting features was broadcasting pieces of HTML over websockets. This was done using a custom-element named <turbo-stream>. Whenever something was changed in the back-end, you could fire off a broadcast with the Turbo Frame element. Check out this article, if you want to know how Turbo Streams work behind the scenes.

You see in development, you already could get away with not using Redis with the async adapter. The way that works is it broadcasts in the same process as where the (Rails) server is running. This means if you, in the Rails console, make updates to any model that has broadcasts set up, broadcasts wouldn't get fired. A simple workaround for this is to use the web console (eg. add <%= console %> in your views).

💡 Check out the Rails Designer Development Tool to easily toggle the console on any page with the d c hotkey!

You can set it up like so:

# config/cable.yml
development:
  adapter: async

# …
Enter fullscreen mode Exit fullscreen mode

The async adapter is not meant for production. As it's running in the same process as the server, requests might get lost once the server restarts (eg. on deploy). So for production there are other adapters available. Since the launch you needed Redis if you wanted to broadcast Turbo Streams. But not much later a PostgreSQL Adapter was released too.

You could set it up like this:

# config/cable.yml
# …

production:
  adapter: postgresql
  channel_prefix: appname_production
Enter fullscreen mode Exit fullscreen mode

This adapter uses PostgreSQL's NOTIFY command under the hood. The command has a limit of 8000 bytes. That's approximately 8000 ASCII characters or 4000 UTF-8 characters (assuming 2 bytes per character on average). Head spinning already? 😵 It is this much: "A" * 8000! Or when talking about a more real-life example (scroll for dramatic effect):

<div class="chat-message">
  <small class="username">Kendall</small>
  <p class="content">I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer I love Rails Designer </p>
  <time datatime="2024-10-21 18:45:15" class="timestamp">2024-10-21 18:45:15</time>
</div>
Enter fullscreen mode Exit fullscreen mode

That's not nothing! 😅 But keep in mind that your HTML might include a fair bit more markup and even more so if you are using Tailwind CSS! That can easily balloon your HTML. 🤓🌶️

But with Rails 8, there's a new player in town: Solid Cable. It provides a different approach by storing the payloads in the database. It as easy as installing it, setting it up and you're off to the races:

  1. bundle add solid_cable
  2. run bin/rails solid_cable:install
  3. go through the steps of setting the database for it or go for the one-database set up.

And that's it all there is about using Turbo Stream Broadcasts without Redis. I like the premise Rails 8 brings with the solid-trifecta. The less moving elements, like Redis, the easier it is for you to ship your Rails-built SaaS app.

To the moon! 🚀🌕

Top comments (1)

Collapse
 
railsdesigner profile image
Rails Designer

I've only tested the one-database set up in development, not in production. But I would assume for most early-stage apps, this set up would be plenty.

Do you have real-life experience using it in production? Let me know!