Interactive Lab
Real-Time Streaming (SSE vs WebSockets) & Webhook Security
Master unidirectional Server-Sent Events, bidirectional WebSockets, and timing-safe HMAC-SHA256 webhook verification.
realtime-and-webhooks.ts
import crypto from 'node:crypto';
// 1. Server-Sent Events (SSE): Unidirectional HTTP/2 or HTTP/3 Stream
export function createSSEStream() {
const stream = new ReadableStream({
start(controller) {
const interval = setInterval(() => {
const payload = JSON.stringify({ price: (Math.random() * 100).toFixed(2), time: Date.now() });
controller.enqueue(new TextEncoder().encode(`data: ${payload}\n\n`));
}, 1000);
}
});
return new Response(stream, {
headers: {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
}
});
}
// 2. Webhook Signature Verification (Timing-Safe HMAC-SHA256)
export function verifyWebhookSignature(payload: string, signature: string, secret: string): boolean {
const expectedSignature = crypto
.createHmac('sha256', secret)
.update(payload)
.digest('hex');
// Prevent timing attacks by comparing hashes in constant time
return crypto.timingSafeEqual(
Buffer.from(signature, 'hex'),
Buffer.from(expectedSignature, 'hex')
);
}Architectural Comparison: SSE vs. WebSockets
| Protocol | Direction | Transport | Ideal Use Case |
|---|---|---|---|
| Server-Sent Events | Server → Client | Standard HTTP/2+ | AI completions, price tickers, dashboard telemetry |
| WebSockets | Bidirectional | WS / WSS upgrade | Multiplayer gaming, collaborative whiteboards, chat |
Server-Sent Events (SSE) Stream
Click "Connect SSE Stream" to receive data frames.
Webhook HMAC-SHA256 Signer Timing-Safe Guard
Calculated X-Signature-256:
a8f9b2d3e1...calculated