Webページ内部のリアルタイム更新を書きたい（Go言語、Ginパッケージ）

Question

以下のやりたい事をGo言語のGinライブラリで実現したいのですが、書き方がわからず。
経験者もしくは書き方が閃く方のご教示を頂きたく。
作成コードの指針となる情報及び、私が見つけられていないURL等参考情報をお願い致します。

【やりたい事】
１．Go言語にてWebページを作成（Ginパッケージ）
２．Webページアプリ自身が、自身が配置されているディレクトリ以下に作成されているCSVファイルをポーリング
３．CSVファイルは常に更新されており、同様の更新内容をWebページの一部にリアルタイム表示
※CSSはBootstrapを採用

【わからない事】
定期的にWebページの内容を更新するためのGo言語Ginを利用した書き方がわからない

【試してみた事】
Gin公式サイトのExampleとGoogle検索結果のブログ記事
https://gin-gonic.com/docs/examples/html-rendering/
https://nunubuff.com/blog/golang-gin-tutorial/

【実現できたこと】
Bootstrapを利用し、TopWebページの表示を行えるところまでは実現。
TopWebページに、任意の文字列（変数）を１度だけ表示させる事に成功。

【試してみた事補足】
r := gin.Default()
の後、
r.Run()
を実施するまえに

time.Sleep(3 * time.Second) // 3秒休む
r.GET("/", func(c *gin.Context) {
		c.HTML(200, "index.html", gin.H{
			"message": "Hello World　★何らかの異なる文字★",
		})

をmain関数内部に、上から複数並べても、画面更新には至らず。
サーバー内に配置されたCSVファイルを、自身がポーリングして情報更新するため、REST APIのように別プログラムからURLを叩くような作りは想定していません。
そもそも、この考え方が間違っているのか？とも考え始めています。

【現在進行形で試している事】
CSVファイルから読み取ったデータをTableタグに入れてテンプレートに表示させる方法を模索。
CSVファイルのポーリングは、ゴルーチンで実現。
※データは取得できても、Webページ反映の書き方がわからず

Comments

[hoshi-takanori]

サーバー上のファイルをクライアントが直接ポーリングするのは不可能なので、サーバー側で変更を監視して、WebSocket などで通知すればよいのでは。

[kamuycikap]

あ・・・
サーバーとクライアントが同居しているようなアプリケーションを考えていたのですが、、。

そうではなくて、クライアントからのリクエストでCSVファイルの内容を返すようなサーバーを作り、同時に定期的にリクエストを投げるクライアントも作成するというイメージでしょうか？

■サーバー（Go言語によるサーバーアプリ）
クライアントからの指示を常に待ち続ける（REST API等）
指示を受けたら、CSVファイルをReadし、内容をクライアントに応答させる

■クライアント（Go言語によるWebアプリ）
サーバーに対し、定期的に要求を投げ続ける（５～１０秒間隔）

[nobonobo]

クライアントとはブラウザのことを指していますか？

「■クライアント（Go言語によるWebアプリ）」この書き方だとそうではないように見えます。
ブラウザ＝JS/WASMしか動かないので「Go言語による」ものをブラウザで動かすにはかなりレアなやり方になってしまいます。GoでJS/WASMを作る方法をおたずねでしょうか？

[kamuycikap]

「クライアントとはブラウザのことを指していますか？」　→　はい。そのとおりです。

質問を投稿した当初、ブラウザ側の何かを開発する想定ではありませんでした。
ブラウザに、Goで作ったサーバーアプリのIPアドレス入力してWebページを開けば、定期的に画面内容が更新されれば良いくらいの発想でした。

でしたので、クライアント側に何か知らの仕組みが必要だとは思っていなかったのです。
Ginのサンプルプログラムをアレコレ試しているのですが、画面更新を実現する為に、同じサーバーURLを繰り返し何度も叩く必要があると理解しはじめたところです。

[kamuycikap]

Goサーバー側で

・CSVファイルの情報を収集（ゴルーチンA）　→　チャネルD
・画面表示機能（ゴルーチンB）　←　チャネルD

を動かしておき、クライアント（Webブラウザ）で、画面表示機能を呼び出すURLを叩けばOK。
を実現できないかと考えた次第です。

[nobonobo]

「画面表示機能（ゴルーチンB）」という記述から画面表示機能をGoが受け持つというのはどういうものを想定しているのかがなかなか伝わってきません・・・。Ginはサーバーであり、コンテンツやデータをクライアントに返すだけであって、実際に画面表示をしているのはブラウザです。表示に関して一般的なGoの実装が介入できるところはありません（GoをJS化したりWASM化することで介入する方法はありますが一般的ではありません）。

なので、Goのチャネルがつなげられるのは同じホストの同じプロセス内のgoroutine間だけですので、
異なる処理系（GoとJS）間の通信をチャネルのように行うには何らかのプロトコルに則った別の仕掛けを利用するしかありません。その例が「WebSockets」と「Server Sent Events」です。

従来のHTTPではクライアントからの能動的な要求に対しサーバーが受動的に応答を返すという手順しかありません。
つまり、「CSVファイル監視ー＞変更検出ー＞サーバーからクライアントにイベントを通知ー＞画面を更新」という流れをまともに作るためには、WSやSSEなどでサーバーから能動的にクライアントにメッセージを渡す仕掛けが必要となり、それらをハンドリングする実装がサーバー、クライアントともに必要です。
そしてクライアント側でその実装を行うにはJS用に用意されたWSやSSEのAPIを利用する以外の実装方法はありません。

Answer 1

この手の処理を実現するには一般的にフロントエンドのノウハウが必要です。
フロントエンドのノウハウさえあれば、GoもGinも極めてシンプルな実装で実現できます。

Gin側は静的ファイルのサーブさえしていればよく（Ginすら特に必要なく）

Webサーバー実装

package main

import (
	"github.com/gin-gonic/gin"
)

func main() {
	r := gin.Default()
	r.Static("/", "./assets")
	r.Run()
}

./assetsフォルダーの下に以下のindex.htmlとdata.csvがおいてあればよいわけです。

index.html例

<h1>hello world!</h1>
<table id="data"></table>
<script>
  async function update() {
    let res = await fetch("data.csv");
    let csv = await res.text();
    let lines = csv.split("\n");
    let table = document.createElement("table");
    for (let i = 0; i < lines.length; i++) {
      let line = lines[i];
      let cells = line.split(",");
      let tr = document.createElement("tr");
      for (let j = 0; j < cells.length; j++) {
        let td = document.createElement("td");
        td.innerHTML = cells[j];
        tr.appendChild(td);
      }
      table.appendChild(tr);
    }
    document.getElementById("data").replaceChildren(table);
  }
  update();
  setInterval(update, 5000);
</script>

#＃＃ CSVファイル例

hoge1, moge1, 21, address1
hoge2, moge2, 22, address2
hoge2, moge2, 22, address2

表示例

Webサーバー実装を実行して、ブラウザでhttp://localhost:8080/を開いてみましょう。以下のような表示になると思います。

この状態で./assets/data.csvを編集してみましょう。5秒以内に反映されることがわかると思います。

まとめ

• JSを学びましょう
• index.htmlのscriptタグ内のコードが読み書きできるようになれば簡単に実現できます

Comments

[nobonobo]

index.htmlをGinテンプレートを使ってCSVを読み込んだ結果を埋め込んで返すようにして置き、ブラウザ側で何秒か置きにページリロードを掛けるというやり方でもOKです。

[nobonobo]

ここから先リアルタイム性を高くしたい場合には「WebSockets」や「Server Sent Events」といった技術が必要になってきます。（実装例のままインターバルを小さくしていくと、一般公開したときサーバー負荷がひどく高くなってしまうからです。）