القائمة
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يبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
عرض SKILL.md
استنادا إلى تصنيف SOC المهني
| 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 |