Goでメソッドの処理状況をブラウザに返すプログレスバーは導入できるのか？

Question

実現したいこと

ブラウザで使用するアプリケーションを作っています。
その中で、あるGoのメソッドで記述が多く完了まで時間が掛かるメソッドがあります。
発火はReactからのpostです。
進行状況の確認をブラウザで行いたいと思っているのですが、
そもそもそのような事は可能なのでしょうか？

コンソール上でプログレスバーを入れるライブラリは見つけましたが、
httpで行う事は難しいでしょうか？

1度のリクエストで断続的にクライアントにレスポンスを返し続けるのは可能なのでしょうか？

開発環境は、
フロントがReact、
バックエンドがGoです。

色々と初歩的な質問ですいません。

<<追記>>

import React from 'react';
import axios from 'axios';
import imgLogo from './images/logo.png';
import './css/style.css'

class App extends React.Component {

  constructor() {

    super();

    this.state = {

    }
  }

  interval = async() => {

    console.log("interval start")

    let res = await fetch("/api/progress");
    let data = await res.json();
    let progress = document.getElementById("progress");
    progress.value = data.progress;
    progress.innerHTML = data.progress + "%";
  }

  start = async() => {

    console.log("start start")

    let progress = document.getElementById("progress");
    progress.value = 0;
    progress.innerHTML = "0%";
    let id = setInterval(this.interval(), 1000);
    await fetch("/api/longtask");
    clearInterval(id);
    window.alert("long task completed");
  }

  render() {
    return (
      
      <div>
        <div className="container">
        <button id="start" onClick={async () => {await this.start();} }>start</button>
        <progress id="progress" max="100" value="0">0%</progress>
	</div>
     </div>
    )
  }
}

export default App;

package handler

import (
	// "encoding/json"
	"fmt"
	"net/http"
	"sync"
	"time"

	_ "github.com/jinzhu/gorm/dialects/postgres"
	_ "github.com/lib/pq"

	"github.com/labstack/echo/v4"
	"github.com/labstack/echo/v4/middleware"
)

type Progress struct {
	sync.RWMutex
	Progress int `json:"progress"`
}

func Handler() {

	e := echo.New()
	e.Use(middleware.CORS())

	// ルーティング
	e.GET("/progress", progress)
	e.GET("/longtask", longtask)

	// local サーバー
	e.Logger.Fatal(e.Start(":8000"))

	return
}

func progress(c echo.Context) (err error) {

	progress := &Progress{}

	fmt.Printf("progress start")

	progress.RLock()
	c.JSON(http.StatusOK, progress)
	progress.RUnlock()

	return
}

func longtask(c echo.Context) error {

	progress := &Progress{}

	for i := 0; i <= 10; i++ {
		progress.Lock()
		progress.Progress = i * 10
		progress.Unlock()
		time.Sleep(time.Second)
	}

	return nil
}

Comments

[hoshi-takanori]

Long Polling、Server Sent Events、WebSockets あたりを調べてみるといいかも。
https://arm4.hatenablog.com/?page=1461743189

[mimi_129]

ありがとうございます。
参考にさせていただきます。

Answer 1

最もシンプルなやり方はフロントエンド側から定期的に進捗をバックエンドに問い合わせさせることです。例えば３〜５秒に１回程度バックエンドに進捗を尋ね、得られたパーセンテージに基づく表示をReactで行えば良いでしょう。

バックエンドの負荷に関しては手法ごとにトレードオフがあるとは思います。

• 上記の方法はポーリングと呼ばれる方法ですが、クライアントが多かったりインターバルを短くするとバックエンドへの負荷がおおきくなりがちです。
• WebSocketsやSSE(Server Sent Events)などはクライアントごとに１コネクションを占有する代わりにバックエンドからフロントエンドへメッセージを投げ込める特性を持っています。CPUに対する負荷は値の変更時のみで済むためリアルタイム性をかなり上げることが可能ですが、クライアント数が増えるとサーバーのコネクションリソースを消費してしまう問題がつきまといます。また、切断の条件や再接続ロジックなども複雑になりがちです。

1度のリクエストで断続的にクライアントにレスポンスを返し続けるのは可能なのでしょうか？

これの答えはブラウザAPIがサポートしている「WebSockets」や「SSE」を使うことでできるとは思います。
ほかにもチャンクレスポンスを時間間隔を空けて返すなどはあるけども、フロントエンド側の実装が複雑になってしまいます。
「WebSockets」や「SSE」であってさえ、考慮すべきことはいろいろあって悪意のあるクライアントを切るという基準を設けないと
コネクション数が爆発してしまうことや、意図しない切断に対しどう対応するのかといったロジックがクライアント側に求められます。

追記

最も最小限のコードでプログレスバーを実装した事例を紹介します。

<button id="start">start</button>
<progress id="progress" max="100" value="0">0%</progress>
<script>
  async function interval() {
    let res = await fetch("/progress");
    let data = await res.json();
    let progress = document.getElementById("progress");
    progress.value = data.progress;
    progress.innerHTML = data.progress + "%";
  }
  let start = document.getElementById("start");
  start.addEventListener("click", async function () {
    let progress = document.getElementById("progress");
    progress.value = 0;
    progress.innerHTML = "0%";
    let id = setInterval(interval, 1000);
    await fetch("/longtask");
    clearInterval(id);
    window.alert("long task completed");
  });
</script>

package main

import (
	"encoding/json"
	"log"
	"net/http"
	"sync"
	"time"
)

type Progress struct {
	sync.RWMutex
	Progress int `json:"progress"`
}

func main() {
	progress := &Progress{}
	http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
		http.ServeFile(w, r, "index.html")
	})
	http.HandleFunc("/longtask", func(w http.ResponseWriter, r *http.Request) {
		for i := 0; i <= 10; i++ {
			progress.Lock()
			progress.Progress = i * 10
			progress.Unlock()
			time.Sleep(time.Second)
		}
	})
	http.HandleFunc("/progress", func(w http.ResponseWriter, r *http.Request) {
		progress.RLock()
		json.NewEncoder(w).Encode(progress)
		progress.RUnlock()
	})
	if err := http.ListenAndServe(":8080", nil); err != nil {
		log.Fatal(err)
	}
}

Comments

[nobonobo]

https://teratail.com/questions/9czti2smpbbwpf ここも同じような質疑応答かと思いますので参考にしてください。

[mimi_129]

詳しい回答ありがとうございます。
「WebSockets」や「SSE」初めてお聞きしました。
参考にさせていただきます。

＞最もシンプルなやり方はフロントエンド側から定期的に進捗をバックエンドに問い合わせさせることです。例えば３〜５秒に１回程度バックエンドに進捗を尋ね、得られたパーセンテージに基づく表示をReactで行えば良いでしょう。

こちらを参考にプログラムを組んでみました（追記しました）
しかし、狙い通りの動作になっていないようです。。

longMethodは動作し続けるのですが、
situationTimeを定期実行させても値が取得できないです。
（Uncaught SyntaxError: Unexpected identifier）
axiosの並行実行がうまくいっていないと思うのですが。。

[nobonobo]

最小のコードで実装例を追記しました。参考に。

[mimi_129]

おお。素晴らしい。いけてますね。
すいません。
これってReact＋echoでも実装できますかね。。
現在絶賛格闘中なんですが、参考になるコードをいただけたらありがたいのですが。
質問の主題からはズレているので難しそうなら大丈夫です

[nobonobo]

どちらも使ったことがないので直接的なアドバイスは難しいと思います。react+echo版のやってみたコードを追記してもらえればアドバイスできるかもしれません。

[mimi_129]

うーんやっぱり難しいですよね。。

＞react+echo版のやってみたコードを追記してもらえればアドバイスできるかもしれません。
一応追記に現状のコードを記述しました。
何かアドバイスいただけますと幸いです。

[nobonobo]

longtaskのハンドリングが無いのでは？

[mimi_129]

あーすいません。。
そちらに関しては単純に記述漏れでした。

longtaskのハンドリング追加しましたが、
狙い通りの動作をしていないみたいです。

懸念点として、
◯App.js内のintervalメソッド内で受け取っているjsonがおかしい？
◯handler.goの各々メソッド内でProgressのインスタンスを生成しているが、
これがおかしい？
◯handler.go内、progressメソッドのレスポンスがおかしい？
辺りが考えられますが、
現状修正方法を模索中です。。

Answer 2

真面目に、プログレスバーを実装しようとするなら、その時間のかかる処理というやつから、処理割合に対応した通知を飛ばす必要があります
たとえば、処理が１０％済むごとに通知を飛ばす（実際にはなにかコールバックさせるとか）、と言うコードを組む必要がある、ってことですね
それが可能なら、あなたの想定しているようなプログレスバーを出す、のは可能かと思います

ましかし、よのなかで出しているプログレスバー、ってのは、たいてい、処理とは関係なく一定時間で勝手にバーが進むようにしておいて、１００％で勝手に処理終了としてしまう、ってのになっています

Comments

[Zuishin]

> 通知を飛ばす必要があります

必要はないでしょう。
別に通知を飛ばさなくても、フロントの処理を 10 回に分ければいいだけだと思います。

> ましかし、よのなかで出しているプログレスバー、ってのは、たいてい、処理とは関係なく一定時間で勝手にバーが進むようにしておいて、１００％で勝手に処理終了としてしまう、ってのになっています

質問と関係ありませんし、処理とは関係なく一定時間で 100% になるプログレスバーはまだ見たことがありません。