POC showing ActionCable working

app/channels/job_status_channel.rb

@@ -0,0 +1,5 @@
+class JobStatusChannel < ApplicationCable::Channel
+  def subscribed
+    stream_from 'job_status_channel'
+  end
+end

app/controllers/jobs_controller.rb

@@ -0,0 +1,9 @@
+class JobsController < ApplicationController
+  def index
+  end
+
+  def start
+    LongRunningJob.perform_later(current_user&.id)
+    redirect_to jobs_path
+  end
+end

app/javascript/channels/index.js

@@ -1 +1,2 @@
 // Import all the channels to be used by Action Cable
+import "./job_status_channel"

app/javascript/channels/job_status_channel.js

@@ -0,0 +1,13 @@
+import consumer from "./consumer"
+
+consumer.subscriptions.create("JobStatusChannel", {
+  received(data) {
+    const statusElement = document.getElementById("job-status")
+    const progressElement = document.getElementById("job-progress")
+    const resultElement = document.getElementById("job-result")
+
+    if (statusElement) statusElement.textContent = data.status
+    if (progressElement) progressElement.value = data.progress
+    if (data.result && resultElement) resultElement.textContent = data.result
+  }
+})

app/jobs/long_running_job.rb

@@ -0,0 +1,30 @@
+class LongRunningJob < ApplicationJob
+  queue_as :default
+
+  def perform(_user_id)
+    progress = 0
+
+    while progress < 99
+      sleep(rand(0.5..2.0))
+      progress += rand(5..15)
+      progress = [progress, 99].min
+
+      ActionCable.server.broadcast(
+        'job_status_channel',
+        {
+          status: 'Processing...',
+          progress: progress
+        }
+      )
+    end
+
+    ActionCable.server.broadcast(
+      'job_status_channel',
+      {
+        status: 'Completed',
+        progress: 100,
+        result: "Task completed at #{Time.current}"
+      }
+    )
+  end
+end

app/views/jobs/index.html.erb

@@ -0,0 +1,15 @@
+<% content_for :javascript_head do %>
+  <%= javascript_importmap_tags('modern_application') %>
+<% end %>
+
+<div class="job-container">
+  <h1>Background Job Status</h1>
+
+  <div class="status-container">
+    <p>Status: <span id="job-status">Not started</span></p>
+    <progress id="job-progress" value="0" max="100"></progress>
+    <p>Result: <span id="job-result"></span></p>
+  </div>
+
+  <%= button_to "Start Job", start_jobs_path, method: :post, class: 'start-button', data: { turbo: true } %>
+</div>

config/routes.rb

@@ -937,4 +937,10 @@ def matches?(request)
     end
   end
   ####
+
+  resources :jobs, only: [:index] do
+    collection do
+      post :start
+    end
+  end
 end