進捗が生で届く！SSEで作るリアルタイム通知
CODE PREVIEW
P
プロンプト
Server-Sent Events（SSE）を使った進捗通知を実装するシングルHTMLページを作成してください。長時間実行されるタスク（例：ファイル処理）をシミュレートし、SSEを使ってリアルタイムで更新されるプログレスバーを表示します。JavaScriptのEventSource（またはサーバーなしで動作するモック）を使ってシンプルなバックエンドをシミュレートしてください。開始ボタン、プログレスバー、ステータスメッセージ、完了アラートを含めてください。クリーンでモダンなUI、最小限のCSSにします。コードは自己完結型で、外部依存なし（必要な場合はCDNライブラリ可）でブラウザで動作するようにしてください。
このデモは、長時間実行されるタスク（例：ファイル処理）をシミュレートし、Server-Sent Events（SSE）を介してライブ進捗状況を表示します。▶ Start Taskをクリックして開始します。プログレスバーがリアルタイムで更新され、各ステップがログに表示されます。赤いボタンでいつでもキャンセル可能です。タスクが完了するとアラートが表示されます。
本番環境では、シミュレートされたインターバルを、サーバーのSSEエンドポイント（例：/progress-stream）を指す実際のEventSourceに置き換えてください。コードは自己完結型で、バックエンドなしで動作します。
このプロンプトは役に立ちましたか？
コメント
コメントは承認後に表示されます