AIGPAIGP

進捗が生で届く!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選

見る
Inicioヘルプ