I’m trying to learn TurboStreams following this simple Hotwire Guide but the page doesn’t update after I add an entry in the console unless I refresh the browser.
Redis is running:
$ redis-cli -p 6379 ping
PONG
The default Gemfile had redis commented out, so I enabled it:
# Use Redis adapter to run Action Cable in production
gem "redis", "~> 4.0"
I thought cable.yml might be the problem, so I added redis to the development section, but it didn’t seem to make a difference.
development:
adapter: redis
url: redis://localhost:6379/1
test:
adapter: test
production:
adapter: redis
url: <%= ENV.fetch("REDIS_URL") { "redis://localhost:6379/1" } %>
channel_prefix: simple_hotwire_production
On create, my bin/dev log message looks like the one in the post, but it comes out in the rails console window rather than the server window.
On Post.destroy_all, my bin/dev log message is different than than the one in the post:
[ActionCable] Broadcasting to posts: "<turbo-stream action=\"remove\" target=\"post_11\"></turbo-stream>"
My turbo-cable-stream-source looks the same as the blog post, but without the connected=“” property:
<turbo-cable-stream-source channel="Turbo::StreamsChannel" signed-stream-name="InBvc3RzIg==--7b2eb3d475ba281629a0bb2229d5f2dc13c50febb0fcb311775484a89454a55b"></turbo-cable-stream-source>
My turbo frame output looks the same:
<turbo-frame id="post_11">..</turbo-frame>
<turbo-frame id="post_12">..</turbo-frame>
Here’s the code:
# Procfile.dev
web: bin/rails server -p 3000
css: bin/rails tailwindcss:watch
redis: redis-server
# posts_controller.rb
class PostsController < ApplicationController
def index
@posts = Post.all
end
end
# post.rb
class Post < ApplicationRecord
broadcasts_to -> (post) { :posts }
end
# index.html.erb
<div>
<h1 class="font-bold text-4xl">Posts#index</h1>
<p>Find me in app/views/posts/index.html.erb</p>
<%= turbo_stream_from :posts %>
<div id="posts">
<%= render @posts %>
</div>
</div>
# _post.html.erb
<%= turbo_frame_tag dom_id(post) do %>
<div class="border flex-col mt-2">
<%= post.title %>
<%= post.article %>
</div>
<% end %>
Can anyone see what I’m missing or give me an idea of how to debug it?