進捗が生で届く!SSEで作るリアルタイム通知
P
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).
VISTA DE CÓDIGO
エディタを読み込み中…
AIとの対話に追加する一言
プロンプトと一緒にコピーして、AIがより正確に意図を汲み取れるようにします
このコードをそのまま使いたいので、CDNリンクも含めた完全なHTMLファイルとして出力してください。
初心者なので、各行にコメントを追加して、何をしているか説明してください。
このコードをWordPressのテーマに組み込む方法も教えてください。
動作確認済みのコードをお願いします。エラーが出る場合の対処法も含めて。
このデモは、長時間実行されるタスク(例:ファイル処理)をシミュレートし、Server-Sent Events(SSE)を介してライブ進捗状況を表示します。▶ Start Taskをクリックして開始します。プログレスバーがリアルタイムで更新され、各ステップがログに表示されます。赤いボタンでいつでもキャンセル可能です。タスクが完了するとアラートが表示されます。
本番環境では、シミュレートされたインターバルを、サーバーのSSEエンドポイント(例:/progress-stream)を指す実際のEventSourceに置き換えてください。コードは自己完結型で、バックエンドなしで動作します。
¿Te resultó útil este prompt?
Comentarios
Los comentarios aparecen después de la moderación
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選