소개

Ruby on Rails는 ActionCable 이라는 내장 라이브러리를 통해 즉시 웹소켓을 지원합니다. 사용자 지정 JavaScript를 작성할 필요 없이 백그라운드 작업에서 일반적인 DOM 작업을 수행하기 위해 ActionCable과 함께 작동하는 CableReady이라는 라이브러리를 만들었습니다. 그리고 매우 성능이 좋습니다.

1. 레일스 프로젝트 생성

rails new progress_bar_demo
cd progress_bar_demo

2. 편안한 리소스 만들기

먼저 컨트롤러와 HTML 페이지를 만듭니다.

bundle exec rails generate controller progress_bars
touch app/views/progress_bars/show.html.erb

<!-- app/views/progress_bars/show.html.erb -->
<h1>Progress Bar Demo</h1>
<div id="progress-bar">
  <div></div>
</div>

그런 다음 경로 파일을 업데이트합니다.

# config/routes.rb
Rails.application.routes.draw do
  resource :progress_bar, only: [:show]
  root "progress_bars#show"
end

3. 스타일링 설정

먼저 스타일시트를 만듭니다.

mkdir app/javascript/stylesheets
touch app/javascript/stylesheets/application.scss

// app/javascript/stylesheets/application.scss
#progress-bar {
  background-color: #ccc;
  border-radius: 13px;
  padding: 3px;
}

#progress-bar>div {
  background-color: green;
  width: 0;
  height: 20px;
  border-radius: 10px;
}

그런 다음 스타일시트를 포함하도록 JavaScript 팩을 업데이트합니다.

// app/javascript/packs/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import "../stylesheets/application.scss" // <-- add this line

마지막으로 스타일시트 팩을 사용하도록 애플리케이션 레이아웃을 업데이트합니다.

<!-- app/views/layouts/application.html.erb -->
<!DOCTYPE html>
<html>
  <head>
    <title>ProgressBarDemo</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <!-- line below was updated to use stylesheet_pack_tag -->
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

4. ActionCable 채널 설정

yarn add cable_ready
bundle exec rails generate channel progress_bar

// app/javascript/channels/progress_bar_channel.js
import consumer from "./consumer"
import CableReady from 'cable_ready'

consumer.subscriptions.create("ProgressBarChannel", {
  received: data => {
    if (data.cableReady) CableReady.perform(data.operations)
  }
})

# app/channels/progress_bar_channel.rb
class ProgressBarChannel < ApplicationCable::Channel
  def subscribed
    stream_from "ProgressBarChannel"
  end
end

5. 백엔드 설정

bundle add cable_ready
bundle exec rails generate job progress_bar

이 작업이 실행되면 각 반복에서 진행률 표시줄을 조금씩 채우는 루프를 실행합니다. CableReady를 사용하면 사용자 지정 Javascript를 작성할 필요 없이 브라우저에 DOM을 업데이트하는 명령을 보낼 수 있기 때문에 가능합니다.

# app/jobs/progress_bar_job.rb
class ProgressBarJob < ApplicationJob
  include CableReady::Broadcaster
  queue_as :default

  def perform
    status = 0
    while status < 100
      status += 10
      cable_ready["ProgressBarChannel"].set_attribute(
        selector: "#progress-bar>div",
        name: "style",
        value: "width:#{status}%"
      )
      cable_ready.broadcast
      sleep 1 # fake some latency
    end
  end
end

# app/controllers/progress_bars_controller.rb
class ProgressBarsController < ApplicationController
  def show
    ProgressBarJob.set(wait: 1.second).perform_later
  end
end

6. 달리고 마법을 지켜봐

bundle exec rails s

그런 다음 브라우저에서 http://localhost:3000을 방문하십시오.

부인 성명

⚠️ 이 데모는 개발 환경에 맞춰져 있습니다. 프로덕션 설정에서 Redis를 사용하려면 ActionCable과 ActiveJob을 모두 구성해야 합니다. 또한 ActionCable 채널을 보호하고 싶을 것입니다.

Reference

이 문제에 관하여(5단계로 Rails를 사용하여 서버 업데이트된 비동기 진행률 표시줄 빌드), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/codefund/build-an-async-progress-bar-with-rails-in-5-steps-2bgp

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다