サーバーまたはクライアントをブロックせずに、ファイルのアップロードの進行状況をリアルタイムで監視するにはどうすればよいですか?

サーバーやクライアントをブロックせずに、ファイルのアップロードの進行状況をリアルタイムで監視するにはどうすればよいですか?

背景:
ファイルのアップロードが発生すると、サーバーに書き込まれるファイルの進行状況を追跡できます。これはサーバーやクライアントをブロックすることなく実行できるため、スムーズで効率的なユーザー エクスペリエンスが可能になります。

問題:
現在の実装では、File オブジェクトがフェッチの本体として設定されています。リクエスト。ただし、進行状況をリアルタイムで監視するには、別のアプローチが必要です。

要件:
サーバーに書き込まれているファイルのサイズをテキスト/イベントとして表示します。 -ストリーム。このプロセスは、クエリ文字列パラメータとして指定されたすべてのバイトが書き込まれるまで継続する必要があります。

解決策:

PHP 実装:

<code class="php">// stream.php
header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");
header("Connection: keep-alive");

$lastId = isset($_SERVER["HTTP_LAST_EVENT_ID"]) ? intval($_SERVER["HTTP_LAST_EVENT_ID"]) : 0;
$upload = $_GET["filename"];
$data = 0;
// Ignore file size if it's already there
$wasLess = $lastId != 0;
while ($data < $_GET["filesize"] || !$wasLess) {
    clearstatcache(true, $upload);
    $data = filesize($upload);
    $wasLess |= $data < $_GET["filesize"];
    if ($wasLess) {
        sendMessage($lastId, $data);
        $lastId++;
    }
    usleep(20000);
}

function sendMessage($id, $data)
{
    echo "id: $id\n";
    echo "data: $data\n\n";
    ob_flush();
}

JavaScript 実装:

<code class="javascript">const [url, stream, header] = ["data.php", "stream.php", "x-filename"];

input.addEventListener("change", (event) => {
  const [file] = input.files;
  const [{ size: filesize, name: filename }, headers, params] = [file, new Headers(), new URLSearchParams()];

  headers.append(header, filename);
  progress.value = 0;
  progress.max = filesize;
  const [request, source] = [
    new Request(url, { method: "POST", headers, body: file }),
    new EventSource(`${stream}?${params.toString()}`)
  ];

  source.addEventListener("message", (e) => {
    progress.value = e.data;
    // Close the source when the data equals the filesize
    if (e.data == filesize) {
      source.close();
    }
  });
  fetch(request);
});</code>

以上がサーバーまたはクライアントをブロックせずに、ファイルのアップロードの進行状況をリアルタイムで監視するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。