Добавление инструмента Ping в приложение Rails

Вы слышали слово ping или latency в сетевых приложениях. Это время, которое требуется приложению для ответа на запросы. Например, вы выполняете поиск в google. Ваш успешный поиск будет состоять из следующих шагов:

1. В строке поиска вы вводите текст
2. Нажимаете «ввод
3. Запрос обрабатывается
4. Ответ/результаты появляются на веб-странице.

Латентность — это время, которое проходит от этапа 2 до этапа 4.

Проблема
В этом блоге мы узнаем, как добавить инструмент ping/latency time в наше приложение rails. После настройки этого инструмента мы сможем отслеживать время пинга для нашего приложения rails. Основная идея заключается в том, чтобы увидеть, насколько быстро/медленно работает наше приложение.

Решение
Вот предварительное условие, прежде чем мы начнем добавлять это.

1. Rails приложение, работающее с webpacker (версия rails должна быть >=5)
2. Webpacker добавлен

Предположим, что у нас есть приложение rails, работающее с версией rails => 5, и webpacker добавлен. Вот как мы добавим этот инструмент пинга:

1-Добавить стимул
Выполните эту команду, чтобы добавить stimulus

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- Добавьте turbo-rails и redis
Чтобы настроить turbo-rails, используйте следующие команды

Теперь все готово и мы готовы к использованию. Давайте создадим PingsController с помощью следующей команды.

Добавим действие #pong, которое отображает простой текстовый ответ PONG.

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

Добавим конечную точку /ping, направленную на действие #pong вот так:

Теперь создадим форму в 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

Теперь сделаем это действие show корневым действием в route.rb.

root to: “home#show”

Теперь отобразите частичную форму на странице 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;
  }
}

Если мы отправим форму, время пинга будет выводиться после каждой секунды, как на этом рисунке.

Обсуждение
Вот как вы можете сообщить конечному пользователю о времени задержки. Это более полезно, когда вы работаете над масштабированием приложения и улучшением его производительности. Чтобы сделать пользовательский интерфейс лучше, вы также можете вывести график.

Простое приложение Rails ping находится здесь, в этом Repo