メニュー
POST-based Server-Sent Events streaming for Azure Functions — HTTP streaming, chunked response parsing, reconnection
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/fabioc-aloha/ChessCoach --skill sse-streamingコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SOC 職業分類に基づく
SKILL.md を表示中
| type | skill |
| lifecycle | stable |
| inheritance | inheritable |
| name | sse-streaming |
| description | POST-based Server-Sent Events streaming for Azure Functions — HTTP streaming, chunked response parsing, reconnection |
| tier | extended |
| applyTo | **/*sse*,**/*streaming*,**/*server-sent*,**/*real-time* |
| metadata | {"version":"1.0.0","category":"web-development","tags":["sse","streaming","azure-functions","http-streaming","readablestream","real-time"],"activation":{"triggers":["SSE","streaming","server-sent events","HTTP streaming","ReadableStream","chunked response","real-time"],"context":"Working on real-time streaming from Azure Functions to client"},"prerequisites":[]} |
| currency | 2026-04-22T00:00:00.000Z |
POST-based Server-Sent Events pattern for Azure Functions. Solves the gap where native EventSource (GET-only) can't send request bodies, and Azure Static Web Apps don't proxy WebSocket to the API layer.
| Option | SWA API Support? | POST body? | Limitation |
|---|---|---|---|
| WebSocket | No | N/A | SWA doesn't proxy WebSocket to Functions |
| EventSource | Yes | GET only | Can't send context in request body |
| POST + ReadableStream | Yes | Yes | Recommended pattern |
// host.json
{
"version": "2.0",
"extensions": {
"http": {
"enableHttpStream": true
}
}
}
import { app, HttpRequest, HttpResponseInit, InvocationContext } from '@azure/functions';
app.http('stream-response', {
methods: ['POST'],
authLevel: 'anonymous', // SWA handles auth via EasyAuth
: ,
: (: , : ): <> => {
payload = req.();
stream = ({
() {
{
aiStream = (payload);
( chunk aiStream) {
sseData = ;
controller.( ().(sseData));
}
controller.(
().()
);
} (error) {
controller.(
().()
);
} {
controller.();
}
},
});
{
: ,
: {
: ,
: ,
: ,
: ,
},
: stream,
};
},
});
interface SSEMessage {
text?: string;
done: boolean;
error?: string;
}
async function streamResponse(
payload: unknown,
onChunk: (text: string) => void,
onComplete: () => void,
onError: (error: string) => void,
): Promise<void> {
const response = await fetch('/api/stream', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload),
});
if (!response.ok) {
onError(`HTTP ${response.status}: ${response.statusText}`);
return;
}
const reader = response.body!.getReader();
const decoder = new TextDecoder();
let buffer = '';
while (true) {
const { done, value } = await reader.read();
if (done) break;
buffer += decoder.decode(value, { stream: true });
// Parse SSE messages from buffer
const messages = buffer.split('\n\n');
buffer = messages.pop() || ''; // Keep incomplete message in buffer
for (const msg of messages) {
if (!msg.startsWith('data: ')) continue;
const json = msg.slice(6); // Remove 'data: ' prefix
try {
const parsed: SSEMessage = JSON.parse(json);
if (parsed.error) { onError(parsed.error); return; }
if (parsed.text) { onChunk(parsed.text); }
if (parsed.done) { onComplete(); return; }
} catch {
// Ignore malformed messages
}
}
}
onComplete();
}
function useStreamedResponse() {
const [text, setText] = useState('');
const [isStreaming, setIsStreaming] = useState(false);
const [error, setError] = useState<string | null>(null);
const stream = useCallback(async (payload: unknown) => {
setText('');
setIsStreaming(true);
setError(null);
await streamResponse(
payload,
(chunk) => setText(prev => prev + chunk),
() => setIsStreaming(false),
(err) => { setError(err); setIsStreaming(false); },
);
}, []);
return { text, isStreaming, error, stream };
}
async function streamWithAbort(
payload: unknown,
signal: AbortSignal,
onChunk: (text: string) => void,
): Promise<void> {
const response = await fetch('/api/stream', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload),
signal,
});
const reader = response.body!.getReader();
signal.addEventListener('abort', () => reader.cancel());
// ... same parsing logic
}
// Usage
const controller = new AbortController();
streamWithAbort(payload, controller.signal, onChunk);
controller.abort(); // To cancel
Azure Static Web Apps has a 45-second API timeout. For long operations, use multi-phase streaming:
// Instead of one long stream, report progress in phases
app.http('long-operation', {
methods: ['POST'],
handler: async (req, context) => {
const stream = new ReadableStream({
async start(controller) {
const send = (data: object) =>
controller.enqueue(new TextEncoder().encode(`data: ${JSON.stringify(data)}\n\n`));
send({ phase: 'step-1', progress: 0.1 });
const result1 = await doStep1();
send({ phase: 'step-2', progress: 0.5 });
const result2 = await doStep2(result1);
send({ phase: 'complete', progress: 1.0, result: result2 });
controller.close();
},
});
return { body: stream, headers: { 'Content-Type': 'text/event-stream' } };
},
});
async function streamWithRetry(
payload: unknown,
onChunk: (text: string) => void,
maxRetries: number = 2,
): Promise<void> {
let lastError: string | undefined;
for (let attempt = 0; attempt <= maxRetries; attempt++) {
try {
await streamResponse(payload, onChunk, () => {}, (err) => { throw new Error(err); });
return;
} catch (error) {
lastError = error instanceof Error ? error.message : 'Unknown error';
if (attempt < maxRetries) {
await new Promise(resolve => setTimeout(resolve, 1000 * (attempt + 1)));
}
}
}
throw new Error(`Stream failed after ${maxRetries + 1} attempts: ${lastError}`);
}
| Trigger | Response |
|---|---|
| "SSE", "streaming", "server-sent events" | Full skill activation |
| "Azure Functions stream", "HTTP streaming" | Azure Functions Setup section |
| "ReadableStream", "chunked response" | Client Consumption section |
| "abort", "cancel stream" | Cancellation section |
| "SWA timeout", "45 second" | SWA Timeout Handling section |