从控制器动态更改视图 - 在Rails中使用线程进度条

# Gemfile
gem 'progress_bar'

# app/controllers/tasks_controller.rb
require 'progress_bar'

class TasksController < ApplicationController
  def long_running_task
    # 创建一个线程来执行长时间运行的任务
    thread = Thread.new do
      # 模拟长时间运行的任务
      10.times do |i|
        sleep(1)
        update_progress(i + 1)
      end
    end

    # 等待线程执行完毕
    thread.join

    # 任务完成后的操作
    render json: { message: '任务完成' }
  end

  private

  def update_progress(progress)
    # 更新进度条
    bar = ProgressBar.new(10)
    bar.increment!(progress)
    ActionCable.server.broadcast('progress_channel', progress: bar.progress)
  end
end

// app/javascript/channels/progress_channel.js
import consumer from "./consumer"

consumer.subscriptions.create("ProgressChannel", {
  received(data) {
    // 更新进度条
    const progressBar = document.getElementById('progress-bar');
    progressBar.style.width = `${data.progress * 10}%`;
  }
});

<!-- app/views/tasks/long_running_task.html.erb -->
<div class="progress">
  <div id="progress-bar" class="progress-bar" style="width: 0;"></div>
</div>

<button onclick="startTask()">开始任务</button>

<script>
  function startTask() {
    fetch('/tasks/long_running_task')
      .then(response => response.json())
      .then(data => console.log(data))
      .catch(error => console.error(error));
  }
</script>