Rails 앱에 Ping 도구 추가

네트워크 기반 응용 프로그램에서 단어 ping 또는 대기 시간에 대해 들어 보셨을 것입니다. 애플리케이션이 요청에 응답하는 데 걸리는 시간입니다. 예를 들어 Google에서 검색을 하고 있습니다. 성공적인 검색에는 다음 단계가 있습니다.

검색 표시줄에 일부 텍스트를 입력합니다

.

Enter를 누르십시오

.

요청을 처리하는 중입니다

.

응답/결과가 웹 페이지에 표시됨

대기 시간은 2단계에서 4단계까지 걸리는 시간입니다.

문제
이 블로그에서는 Rails 앱에 핑/지연 시간 도구를 추가하는 방법을 알아봅니다. 이 도구를 설정한 후 레일 앱의 ping 시간을 모니터링할 수 있습니다. 기본 아이디어는 앱이 얼마나 빨리/느리게 작동하는지 확인하는 것입니다.

해결책
추가를 시작하기 전에 전제 조건이 있습니다.

webpacker와 함께 실행되는 Rails 앱(레일 버전은 >=5이어야 함)

웹패커가 추가됨

Rails 버전 => 5로 작동하는 Rails 앱이 있고 webpacker가 추가되었다고 가정해 보겠습니다. 이 핑 도구를 추가하는 방법은 다음과 같습니다.

1-자극 추가
자극을 추가하려면 이 명령을 실행하십시오.
Yarn add stimulus
설치가 완료되면 webpack을 사용하여 애플리케이션으로 가져옵니다. app/javascript/packs/application.js에서 이 작업을 수행합니다. javascript 디렉토리에서 controllers 폴더를 생성한 다음 거기에 index.js를 추가합니다. 그런 다음 application.js 내에서 이 폴더를 참조하십시오. 이것이 귀하의 index.js 모양입니다.

import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"

const application = Application.start()
const context = require.context(".", true, /\.js$/)
application.load(definitionsFromContext(context))

2- 터보 레일 및 redis 추가turbo-rails를 설정하려면 다음 명령을 사용하십시오.bundle add turbo-railsrails turbo:installrails turbo:install:redis
이제 모든 설정이 완료되었으며 사용할 준비가 되었습니다. 다음 명령으로 PingsController를 생성해 봅시다.rails g controller ping#pong로 일반 텍스트 응답을 렌더링하는 PONG 작업을 추가해 보겠습니다.

class PingController < ApplicationController
  def pong
    render status: :ok, body: "PONG"
  end
end

다음과 같이 /ping 작업으로 라우팅되는 #pong 끝점을 추가해 보겠습니다.get “/ping”, to: “ping#pong”, as: “ping”
이제 app/views/shared/_ping.html.erb에서 양식을 만들어 이 패주를 달성해 봅시다.

<div data-controller="ping" >
    <%= form_tag ping_path, method: :get, data: { action: "turbo:before-fetch-request->ping#pauseRequest turbo:submit-end->ping#measureLatency", "ping-target": "pingForm" } do %>
    <%= button_tag "Ping" %>
    <% end %>
    <span data-ping-target="latency"></span>
</div>

홈페이지를 만들고 이 부분을 추가하여 홈페이지에서 사용할 수 있도록 합시다. 먼저 HomeController 작업으로 show를 생성해 보겠습니다.
rails g controller home show
이제 이 표시 작업을 route.rb의 루트 작업으로 만듭니다.
root to: “home#show”
이제 쇼 페이지에서 양식 부분 렌더링app/views/home/show.html.erb에 다음 코드를 추가합니다.
<%= render "shared/ping" %>
다음 단계는 지금 ​​대기 시간을 측정하는 것입니다.
이를 위해 자극 컨트롤러를 생성해야 합니다.
rails g stimulus ping
그런 다음 목적을 달성하는 데 필요한 게터와 세터를 정의해 보겠습니다. 대기 시간을 측정하는 measureLatency() 기능이 있습니다. 그런 다음 매초 페이지에 대기 시간을 표시하는 기능displayLatency()이 있습니다. 이 코드는 모두 아래와 같이 app/javascript/controllers/ping_controller.js 들어갑니다.

import { Controller } from "stimulus";
export default class extends Controller {
  static targets = ["pingForm", "latency"]

  pauseRequest(event) {
    event.preventDefault();

    setTimeout(() => this.saveRequestTime());

    event.detail.resume();
  }

  saveRequestTime() {
    this.requestTime = new Date().getTime();
  }

  measureLatency() {

    this.saveResponseTime();

    this.latency = this.responseTime - this.requestTime;

    console.log(`${this.latency} ms`);
    this.displayLatency()

    setTimeout(() => this.ping(), 1000)
  }

  displayLatency() {
    this.latencyTarget.textContent = this.latency + " ms"
  }


  saveResponseTime() {
    this.responseTime = new Date().getTime();
  }

  ping() {
    this.pingFormTarget.requestSubmit()
  }

  get requestTime() {
    return this._requestTime;
  }

  set requestTime(requestTime) {
    this._requestTime = requestTime;
  }

  get responseTime() {
    return this._responseTime;
  }

  set responseTime(responseTime) {
    this._responseTime = responseTime;
  }

  get latency() {
    return this._latency;
  }

  set latency(latency) {
    this._latency = latency;
  }
}

양식을 제출하면 이 그림과 같이 1초마다 ping 시간이 인쇄됩니다.



논의
이것이 최종 사용자에게 대기 시간에 대해 알리는 방법입니다. 앱을 확장하고 앱 성능을 개선하기 위해 작업할 때 더 유용합니다. UI를 더 좋게 만들기 위해 그래프도 인쇄할 수 있습니다.

여기에 간단한 Rails ping 앱이 있습니다Repo.