進捗が生で届く!SSEで作るリアルタイム通知
代码预览
エディタを読み込み中…
P
提示词
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).
このデモは、長時間実行されるタスク(例:ファイル処理)をシミュレートし、Server-Sent Events(SSE)を介してライブ進捗状況を表示します。▶ Start Taskをクリックして開始します。プログレスバーがリアルタイムで更新され、各ステップがログに表示されます。赤いボタンでいつでもキャンセル可能です。タスクが完了するとアラートが表示されます。
本番環境では、シミュレートされたインターバルを、サーバーのSSEエンドポイント(例:/progress-stream)を指す実際のEventSourceに置き換えてください。コードは自己完結型で、バックエンドなしで動作します。
这个提示对您有帮助吗?
评论
评论将在审核后显示
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選