Watch It Happen! Server-Sent Events for Live Progress
Prompt
Create a single HTML page that demonstrates Server-Sent Events (SSE) for live progress updates. The page should simulate a long-running task (e.g., file processing) and show a progress bar that updates in real-time using SSE. Use a simple Node.js-like backend simulation via JavaScript's EventSource (or a mock that works without a server). Include a start button, a progress bar, a status message, and a completion alert. Use clean, modern UI with minimal CSS. Ensure the code is self-contained and works in a browser without external dependencies (except CDN for any library if needed).
CODE PREVIEW
AIとの対話に追加する一言
プロンプトと一緒にコピーして、AIがより正確に意図を汲み取れるようにします
このコードをそのまま使いたいので、CDNリンクも含めた完全なHTMLファイルとして出力してください。
初心者なので、各行にコメントを追加して、何をしているか説明してください。
このコードをWordPressのテーマに組み込む方法も教えてください。
動作確認済みのコードをお願いします。エラーが出る場合の対処法も含めて。
このデモは、長時間実行されるタスク（例：ファイル処理）をシミュレートし、Server-Sent Events（SSE）を介してライブ進捗状況を表示します。▶ Start Taskをクリックして開始します。プログレスバーがリアルタイムで更新され、各ステップがログに表示されます。赤いボタンでいつでもキャンセル可能です。タスクが完了するとアラートが表示されます。
本番環境では、シミュレートされたインターバルを、サーバーのSSEエンドポイント（例：/progress-stream）を指す実際のEventSourceに置き換えてください。コードは自己完結型で、バックエンドなしで動作します。
Prompt Overview
This demo simulates a long-running task (e.g., file processing) and displays live progress updates via Server-Sent Events. Click ▶ Start Task to begin. The progress bar fills in real time, and a log shows each step. You can cancel at any time with the red button. A completion alert notifies you when the task finishes.
In production, replace the simulated interval with a real EventSource pointing to your server's SSE endpoint (e.g., /progress-stream). The code is self-contained and works without any backend.
Was this prompt helpful?
Comments
Comments appear after moderation
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選