Rails 6: Two actioncable channels for real time messaging, one doesnt refresh properly - html

Question

I have two Actioncable channels setup(chatroom_channel and comment_channel). Comment channel isnt working.
The comment is being created and when I manually refresh the page the comment renders. However, the comment is supposed to render without manually pressing the refresh button from the browser.
This is the console output from the one that is working:
Started POST "/messages" for 127.0.0.1 at 2020-07-15 12:54:31 -0400
Processing by MessagesController#create as JS
Parameters: {"message"=>{"content"=>"hello"}, "commit"=>"Send"}
Chef Load (0.1ms) SELECT "chefs".* FROM "chefs" WHERE "chefs"."id" = ? LIMIT ? [["id", 1], ["LIMIT", 1]]
↳ app/controllers/application_controller.rb:11:in `current_chef'
(0.1ms) begin transaction
↳ app/controllers/messages_controller.rb:7:in `create'
Message Create (0.3ms) INSERT INTO "messages" ("content", "chef_id", "created_at", "updated_at") VALUES (?, ?, ?, ?) [["content", "hello"], ["chef_id", 1], ["created_at", "2020-07-15 16:54:31.377225"], ["updated_at", "2020-07-15 16:54:31.377225"]]
↳ app/controllers/messages_controller.rb:7:in `create'
(62.6ms) commit transaction
↳ app/controllers/messages_controller.rb:7:in `create'
Rendered messages/_message.html.erb (Duration: 0.7ms | Allocations: 247)
[ActionCable] Broadcasting to chatroom: {:message=>"<div class=\"message\">\n <p>\n <small><em>Created less than a minute ago</em></small>\n </p>\n <p>\n <img alt=\"john\" class=\"rounded-circle\" src=\"https://secure.gravatar.com/avatar/1c9e974c08914cda5ca2e7620c4fd3b6?s=50\" />\n <strong>John </strong>\n <span class=\"content\">\n hello\n </span>\n </p>\n</div>", :chef=>"john"}
Completed 200 OK in 82ms (Views: 13.3ms | ActiveRecord: 63.1ms | Allocations: 5133)
ChatroomChannel transmitting {"message"=>"<div class=\"message\">\n <p>\n <small><em>Created less than a minute ago</em></small>\n </p>\n <p>\n <img alt=\"john\" class=\"rounded-circle\" src=\"https://secure.gravatar.com/avatar/1c9e974c08914cda5ca2e7620c4fd3b6?s=50\" />\n <strong>John </strong>\... (via streamed from chatroom)
This is the console output from the one that is not working:
Started POST "/recipes/11/comments" for 127.0.0.1 at 2020-07-15 12:53:49 -0400
Processing by CommentsController#create as JS
Parameters: {"comment"=>{"description"=>"test comment"}, "commit"=>"Submit Comment", "recipe_id"=>"11"}
Chef Load (0.2ms) SELECT "chefs".* FROM "chefs" WHERE "chefs"."id" = ? LIMIT ? [["id", 1], ["LIMIT", 1]]
↳ app/controllers/application_controller.rb:11:in `current_chef'
Recipe Load (0.2ms) SELECT "recipes".* FROM "recipes" WHERE "recipes"."id" = ? ORDER BY "recipes"."updated_at" DESC LIMIT ? [["id", 11], ["LIMIT", 1]]
↳ app/controllers/comments_controller.rb:6:in `create'
(0.1ms) begin transaction
↳ app/controllers/comments_controller.rb:9:in `create'
Comment Create (0.3ms) INSERT INTO "comments" ("description", "chef_id", "recipe_id", "created_at", "updated_at") VALUES (?, ?, ?, ?, ?) [["description", "test comment"], ["chef_id", 1], ["recipe_id", 11], ["created_at", "2020-07-15 16:53:49.203129"], ["updated_at", "2020-07-15 16:53:49.203129"]]
↳ app/controllers/comments_controller.rb:9:in `create'
(50.3ms) commit transaction
↳ app/controllers/comments_controller.rb:9:in `create'
Rendered comments/_comment.html.erb (Duration: 1.7ms | Allocations: 1480)
[ActionCable] Broadcasting to comments: "<div class=\"row\">\n <div class=\"col-md-2\">\n <section class= \"chef_info center\">\n <img alt=\"john\" class=\"rounded-circle\" src=\"https://secure.gravatar.com/avatar/1c9e974c08914cda5ca2e7620c4fd3b6?s=60\" />\n </section> \n </div>\n\n <div class=\"comment col-md-8 card bg-light\">\n <p>test comment</p>\n <p class=\"quiet small\">Created: less than a minute ago by john</p>\n </div>\n</div>"
Completed 200 OK in 121ms (Views: 4.4ms | ActiveRecord: 52.0ms | Allocations: 23379)
The main difference is the last line ChatroomChannel transmitting while the other one doesnt have the equivelant. It seems the CommentChannel isn't transmitting after it has been created?
app/channels/application_cable/connection.rb:
module ApplicationCable
class Connection < ActionCable::Connection::Base
identified_by :current_chef
def connect
self.current_chef = find_current_user
end
def disconnect
end
protected
def find_current_user
if current_chef = Chef.find_by(id: cookies.signed[:chef_id])
current_chef
else
reject_unauthorized_connection
end
end
end
end
app/channels/comments_channel.rb
class CommentsChannel < ApplicationCable::Channel
def subscribed
# stream_from "some_channel"
stream_from "comments"
end
def unsubscribed
# Any cleanup needed when channel is unsubscribed
end
end
app/controllers/comments_controller.rb
class CommentsController < ApplicationController
#ensure current chef is available
before_action :require_user
def create
#recipe = Recipe.find(params[:recipe_id])
#comment = #recipe.comments.build(comment_params)
#comment.chef = current_chef
if #comment.save
ActionCable.server.broadcast "comments", render(partial: 'comments/comment', object: #comment)
#flash[:success] = "Comment was created successfully"
#redirect_to recipe_path(#recipe)
else
flash[:danger] = "Comment was not created"
redirect_back(fallback_location: root_path)
end
end
private
def comment_params
params.require(:comment).permit(:description)
end
end
app/javascript/comments_channel.js
import consumer from "./consumer"
consumer.subscriptions.create("CommentsChannel", {
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) {
// Called when there's incoming data on the websocket for this channel
return $("#messages").prepend(data);
}
});
app/views/recipes/show.html.erb:
<%= render "shared/page_title", title: #recipe.name %>
<div class="col-md-8 offset-md-2 card card-body bg-light">
<h4 class="center description"><strong>Steps: </strong></h4>
<hr/>
<%= simple_format(#recipe.description) %>
<hr/>
<% if #recipe.ingredients.any? %>
<p>Ingredients: <%= render #recipe.ingredients %> </p>
<% end %>
<div class="ml-auto">
<p class="center">
<em>Created by:</em>
</p>
<p class="center">
<%= link_to gravatar_for(#recipe.chef), chef_path(#recipe.chef) %>
</p>
<p class="center">
<small><%= #recipe.chef.chefname.capitalize %></small>
<div class="ml-auto"><%= time_ago_in_words(#recipe.created_at) %> ago</div>
</p>
</div>
<div class="recipe-actions">
<% if logged_in? && (current_chef == #recipe.chef || current_chef.admin?) %>
<%= link_to "Edit this recipe", edit_recipe_path(#recipe), class: "btn btn-xs btn-warning" %>
<%= link_to "Delete this recipe", recipe_path(#recipe), method: :delete,
data: {confirm: "Are you sure you want to delete this recipe?"}, class: "btn -btn-xs btn-danger" %>
<% end %>
<%= link_to "Return to recipes listing", recipes_path, class: "btn btn-xs btn-primary" %>
</div>
<%# add likes glyph icons here %>
</div>
<%# add nested route for comment %>
<% if logged_in? %>
<div class="row">
<div class="col-md-8 offset-md-2">
<h3>Comments: </h3>
<hr />
<%= form_for([#recipe, #comment], remote: true, :html => {class: "form-horizontal", role: "form"}) do |f| %>
<div class="row form-group">
<%= f.label :Comment, :class => 'control-label col-md-2' %>
<div class="col-md-8">
<%= f.text_area :description, rows: 8, class: "form-control", placeholder:"Enter comment here" %>
</div>
</div>
<div class="row form-group">
<div class="col-md-8 offset-md-2">
<%= f.submit "Submit Comment", class: "btn btn-primary btn-lg btn-xlarge" %>
</div>
</div>
<% end %>
<hr />
</div>
</div>
<% end %>
<%# if there are comments for this recipe, display them at the bottom %>
<% if #recipe.comments != 0 %>
<div class="row">
<div class = "col-md-8 offset-md-2">
<h3>Prior Comments: </h3>
<div id="messages">
<%= render partial: 'comments/comments', object: #comments %>
</div>
</div>
</div>
<% else %>
<div class="row">
<div class="col-md-8 offset-md-2">
<h3> No comments yet! </h3>
</div>
</div>
<% end %>
gemfile
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '2.6.6'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.3'
# Use sqlite3 as the database for Active Record
# Use Puma as the app server
gem 'puma', '~> 4.1'
# Use SCSS for stylesheets
gem 'sass-rails', '>= 6'
gem 'bootstrap-sass', '~> 3.4.1'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 4.0'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
gem 'bcrypt', '~> 3.1.7'
#add pagination to the site
gem 'will_paginate', '3.1.7'
#gem 'bootstrap-will_paginate', '~> 1.0'
gem 'will_paginate-bootstrap4'
# Use Active Storage variant
# gem 'image_processing', '~> 1.2'
# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.2', require: false
group :development, :test do
gem 'sqlite3', '~> 1.4'
gem 'rails-controller-testing'
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end
group :development do
# Access an interactive console on exception pages or by calling 'console' anywhere in the code.
gem 'web-console', '>= 3.3.0'
gem 'listen', '~> 3.2'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
gem 'spring-watcher-listen', '~> 2.0.0'
end
group :test do
# Adds support for Capybara system testing and selenium driver
gem 'capybara', '>= 2.15'
gem 'selenium-webdriver'
# Easy installation and use of web drivers to run system tests with browsers
gem 'webdrivers'
end
group :production do
gem 'pg'
gem 'redis'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]