Live comment updates with ActionCable

.gitignore

@@ -25,6 +25,7 @@ checkpoints/
 production-logs
 .tm_properties
 **/*.swp
+dump.rdb
 
 # Ignore bundler config.
 .bundle

Gemfile

@@ -142,6 +142,11 @@ gem("prawn-svg")
 gem("prawn")
 gem("prawn-manual_builder")
 
+# Use puma as the app server, also available for system tests
+# To use Webrick locally, run `bundle config set --local without 'production'`
+# https://stackoverflow.com/a/23125762/3357635
+gem("puma")
+
 ########## Development, Testing, and Analysis ##################################
 group :test, :development do
   # https://github.com/ruby/debug
@@ -206,13 +211,6 @@ group :development do
   # gem("rails_db", "~> 2.5.0", path: "../local_gems/rails_db")
 end
 
-group :development, :production do
-  # Use puma as the app server
-  # To use Webrick locally, run `bundle config set --local without 'production'`
-  # https://stackoverflow.com/a/23125762/3357635
-  gem("puma")
-end
-
 group :production do
   # New Relic for application and other monitoring
   # https://newrelic.com/

app/assets/stylesheets/mo/_utilities.scss

@@ -589,6 +589,14 @@
   border-radius: 0;
 }
 
+.list-group-item.none-yet {
+  display: none;
+
+  &:only-child {
+    display: block;
+  }
+}
+
 .bg-none {
   background: none !important;
 }

app/channels/application_cable/channel.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+module ApplicationCable
+  class Channel < ActionCable::Channel::Base
+  end
+end

app/channels/application_cable/connection.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+# This is the connection class for the ActionCable websocket connection,
+# responsible for setting the current_user for the connection. Any live updates
+# over websockets need to be authenticated like regular requests, but they don't
+# hit the regular controller actions, so we need to authenticate them
+# separately. The current_user is set by checking the autologin cookie.
+module ApplicationCable
+  class Connection < ActionCable::Connection::Base
+    identified_by :current_user
+
+    def connect
+      self.current_user = find_verified_user
+    end
+
+    private
+
+    def find_verified_user
+      if (verified_user = validate_user_in_autologin_cookie)
+        verified_user
+      else
+        reject_unauthorized_connection
+      end
+    end
+
+    def validate_user_in_autologin_cookie
+      return unless (cookie = cookies["mo_user"]) &&
+                    (split = cookie.split) &&
+                    (user = User.where(id: split[0]).first) &&
+                    (split[1] == user.auth_code)
+
+      user
+    end
+  end
+end

app/controllers/comments_controller.rb

@@ -9,8 +9,6 @@
 #  update::
 #  destroy::
 #
-#
-# rubocop:disable Metrics/ClassLength
 class CommentsController < ApplicationController
   before_action :login_required
   # disable cop because index is defined in ApplicationController
@@ -284,11 +282,11 @@ def destroy
       @comment.log_destroy
       flash_notice(:runtime_form_comments_destroy_success.t(id: params[:id]))
     end
+
     respond_to do |format|
-      format.turbo_stream do
-        eager_load_target_comments
-        refresh_comments_for_object
-      end
+      # format.turbo_stream do
+      # helpers.render_turbo_stream_flash_messages
+      # end
       format.html do
         redirect_with_query(controller: @target.show_controller,
                             action: @target.show_action, id: @target.id)
@@ -331,15 +329,6 @@ def modal_title
     end
   end
 
-  def eager_load_target_comments
-    @comments = @target.comments&.includes(:user)&.
-                sort_by(&:created_at)&.reverse
-  end
-
-  def refresh_comments_for_object
-    render(partial: "comments/update_comments_for_object")
-  end
-
   def permitted_comment_params
     params[:comment].permit([:summary, :comment])
   end
@@ -352,11 +341,11 @@ def reload_form
   end
 
   def refresh_comments_or_redirect_to_show
+    # Comment broadcasts are sent from the model
     respond_to do |format|
-      format.turbo_stream do
-        eager_load_target_comments
-        refresh_comments_for_object
-      end
+      # format.turbo_stream do
+      # helpers.render_turbo_stream_flash_messages
+      # end
       format.html do
         redirect_with_query(controller: @target.show_controller,
                             action: @target.show_action, id: @target.id)
@@ -403,4 +392,3 @@ def comment_updated?
     end
   end
 end
-# rubocop:enable Metrics/ClassLength

app/helpers/application_helper.rb

@@ -74,6 +74,10 @@ def flash_notices_html
                      class: class_names("alert mt-3", alert_class))
   end
 
+  def render_turbo_stream_flash_messages
+    turbo_stream.replace("flash", partial: "application/app/flash_notices")
+  end
+
   # Returns a string that indicates the current user/logged_in/admin status.
   # Used as a simple cache key for templates that may have three
   # possible versions of cached HTML

app/javascript/controllers/section-update_controller.js

@@ -8,17 +8,18 @@ export default class extends Controller {
   connect() {
     this.element.dataset.stimulus = "connected";
 
-    // Note: this is simpler than adding an action on every frame.
-    // add event listener turbo:frame-render, call hide modal
+    // Note: this is simpler than adding an action on every frame. hides modal
     this.element.addEventListener("turbo:frame-render", this.updated());
+    // this.element.addEventListener("turbo:before-stream-render", this.updated());
+    // this.element.addEventListener("turbo:submit-end", this.updated());
   }
 
   updated() {
     // Remove modal which is present for certain updates (but not all)
     // Must be in jQuery for Boostrap 3 and 4
     $("#mo_ajax_progress").modal('hide');
     document.getElementById('mo_ajax_progress_caption').innerHTML = "";
-    // console.log("Section updated");
+    console.log("Section updated");
     // broadcast change
     this.dispatch("updated");
   }

app/models/comment.rb

@@ -110,6 +110,10 @@ class Comment < AbstractModel
   belongs_to :target, polymorphic: true
   belongs_to :user
 
+  broadcasts_to(->(comment) { [comment.target, :comments] },
+                inserts_by: :prepend, partial: "comments/comment",
+                target: "comments")
+
   after_create :notify_users
   after_create :oil_and_water
 

app/views/controllers/application/app/_head.html.erb

@@ -12,6 +12,7 @@
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
 <meta name="viewport" content="width=device-width, initial-scale=1"/>
 <meta name="turbo-refresh-scroll" content="preserve">
+<%= action_cable_meta_tag %>
 <%= auto_discovery_link_tag(
   :rss, activity_logs_rss_path, { title: :app_rss.l }
 ) %>
@@ -26,7 +27,9 @@
 <meta property="og:description" content="Mushroom Observer is a forum where amateur and professional mycologists can come together and celebrate their common passion for mushrooms by discussing and sharing photos of mushroom sightings from around the world."/>
 <%=
   stylesheet_link_tag(@css_theme, media: "screen") +
-  stylesheet_link_tag(@css_theme, media: "print")
+  stylesheet_link_tag(@css_theme, media: "print") +
+  render("application/app/user_specific_css")
 %>
+<%= javascript_importmap_tags %>
 <%= @header unless @header.blank? %>
 <!--/APPLICATION LAYOUT HEAD-->

app/views/controllers/application/app/_user_specific_css.html.erb

@@ -0,0 +1,20 @@
+<%#
+show/hide controls per user.
+This needs to be in a template to access the User.current method.
+
+  Use: `tag.div(data: { user_specific: User.current.id })`
+
+source: https://discuss.hotwired.dev/t/how-to-pass-current-user-id-to-a-controller/287/3
+%>
+
+<% unless in_admin_mode? %>
+  <%# cache User.current || "no_user" do %>
+    <style>
+      <% if User.current %>
+        [data-user-specific]:not([data-user-specific="<%= User.current.id %>"]) { display: none; }
+      <% else %>
+        [data-user-specific] { display: none; }
+      <% end %>
+    </style>
+  <%# end %>
+<% end %>

app/views/controllers/comments/_comment.erb

@@ -8,7 +8,9 @@ target_type = tag.span(target.class.name.to_sym.t, class: "small") \
                        rescue :runtime_object_deleted
 %>
 
-<%= tag.div(class: "list-group-item comment", id:"comment_#{comment.id}") do
+<%# turbo_stream_from(target, :comment) %>
+
+<%= tag.div(class: "list-group-item comment", id: dom_id(comment)) do
   concat(tag.div(class: "row") do
     [
       tag.div(class: "col-xs-12 col-sm-9 col-lg-10") do
@@ -22,17 +24,17 @@ target_type = tag.span(target.class.name.to_sym.t, class: "small") \
           concat(tag.span(class: "comment-author text-nowrap") do
             ["#{:BY.t}: ", user_link(user), " "].safe_join
           end)
-          concat(tag.span(class: "text-nowrap") do
+          concat(tag.span(class: "text-nowrap",
+                          data: { user_specific: comment.user.id }) do
             [
               "[",
-              modal_link_to("comment_#{comment.id}",
-                            *edit_comment_tab(comment)),
+              modal_link_to(dom_id(comment), *edit_comment_tab(comment)),
               "|",
               destroy_button(name: :comment_show_destroy.t, target: comment,
                              icon: :delete, data: { turbo: true }),
               "]",
             ].safe_join(" ")
-          end) if check_permission(comment)
+          end)
           concat(tag.div(comment.created_at.web_time,
                          class: "float-sm-right text-nowrap small"))
         end)

app/views/controllers/comments/_comments_for_object.erb

@@ -5,10 +5,13 @@
   end
 %>
 
+<%= turbo_stream_from(object, :comments) %>
+<%# NOTE: #comments is the inner list-group, not the whole panel %>
+<%# It's a turbo-frame because section-update needs to listen to frame %>
+
 <%=
 tag.div(
-  class: "panel panel-default", id: "comments_for_object",
-  data: { controller: "section-update", updated_by: "modal_comment" }
+  class: "panel panel-default", id: "comments_for_object"
 ) do
   concat([
     tag.div(class: "panel-heading") do
@@ -18,10 +21,13 @@ tag.div(
                         class: "float-right")) if controls
       end
     end,
-    tag.div(class: "list-group list-group-flush comments") do
-      if comments.empty?
-        tag.div(:show_comments_no_comments_yet.t, class: "list-group-item")
-      else
+    tag.div(id: "comments",
+            class: "list-group list-group-flush comments",
+            data: { controller: "section-update",
+                    updated_by: "modal_comment" }) do
+      concat(tag.div(:show_comments_no_comments_yet.t,
+                     class: "list-group-item none-yet"))
+      unless comments.empty?
         comments.each do |comment|
           concat(render(partial: "comments/comment", object: comment))
         end

app/views/controllers/comments/_form.erb

@@ -22,6 +22,7 @@ end
 
   <%= text_field_with_label(form: f, field: :summary, size: 80,
                             label: :form_comments_summary.t + ":",
+                            autofocus: true, # only this has effect
                             data: { autofocus: true }) %>
 
   <%= text_area_with_label(form: f, field: :comment, rows: 10,

app/views/controllers/layouts/application.html.erb

@@ -12,7 +12,6 @@ body_class = class_names(ctrlr_action, theme, location_format, logged_in)
 <html class="<%= html_class %>">
 <head>
   <%= render(partial: "application/app/head") %>
-  <%= javascript_importmap_tags %>
 </head>
 
 <body class="<%= body_class %>" data-controller="lazyload">

app/views/controllers/shared/_modal_form.erb

@@ -52,7 +52,7 @@ tag.div(
         end,
         tag.div(class: "modal-body", id: "modal_#{identifier}_body") do
           [
-            tag.turbo_frame("", id: "modal_#{identifier}_flash"), # turbo
+            tag.div("", id: "modal_#{identifier}_flash"), # turbo
             render(partial: form, locals: form_locals) # turbo
           ].safe_join
         end

cable/config.ru

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+# This file is used to start a Rack-based standalone server for ActionCable
+# Start our cable server with `bundle exec puma -p 28080 cable/config.ru`
+
+require_relative "../config/environment"
+Rails.application.eager_load!
+
+run ActionCable.server

config/cable.yml

@@ -0,0 +1,15 @@
+# ActionCable is a Rails feature that allows for
+# real-time communication between the server and the client.
+
+development:
+  adapter: redis
+  url: redis://localhost:6379/4
+
+test:
+  adapter: test
+
+production:
+  adapter: redis
+  url: <%= ENV.fetch("REDIS_URL") { "redis://localhost:6379" } %>
+  channel_prefix: mo_production
+  ssl_params: { ca_file: "/etc/ssl/certs/cs-certificates.crt" }

config/environments/development.rb

@@ -148,6 +148,10 @@
   config.bot_enabled = true
 
   config.active_job.queue_adapter = :solid_queue
+
+  # Set up ActionCable to use a standalone server at port 28080
+  # config.action_cable.mount_path = nil
+  # config.action_cable.url = "ws://localhost:28080" # use :wss in production
 end
 
 file = File.expand_path("../consts-site.rb", __dir__)

config/environments/production.rb

@@ -166,6 +166,12 @@
 
   config.bot_enabled = true
 
+  # Use default cable setup
+  # config.action_cable.mount_path = "/cable" # or nil
+  # Or set up ActionCable to use a standalone server at port 28080
+  # config.action_cable.url = "wss://localhost:28080" # use :wss in production
+  config.action_cable.allowed_request_origins = [%r{http://*}, %r{https://*/}]
+
   config.active_job.queue_adapter = :solid_queue
 end