Qwik Resumability Pub Sub Architecture — ออกแบบ

Qwik Pub/Sub

Qwik Resumability Pub/Sub Architecture Event-driven WebSocket SSE Real-time Redis NATS Lazy Loading Fine-grained TTI

Transport	Direction	Use Case	Complexity
SSE (Server-Sent Events)	Server → Client	Notification, Live Feed, Price	ง่าย
WebSocket	Bidirectional	Chat, Collaboration, Gaming	ปานกลาง
Long Polling	Client → Server	Legacy Fallback	ง่าย (แต่ Inefficient)
WebTransport	Bidirectional	Low Latency Gaming	สูง (ใหม่)

Qwik Component Design

// === Qwik Pub/Sub Component === // import { component$, useSignal, useVisibleTask$ } from '@builder.io/qwik'; // // interface Message { // id: string; // topic: string; // data: any; // timestamp: number; // } // // export const LiveFeed = component$(() => { // const messages = useSignal([]); // const connected = useSignal(false); // // useVisibleTask$(({ cleanup }) => { // // SSE Connection - Only runs on client, only when visible // const eventSource = new EventSource('/api/subscribe?topic=prices'); // // eventSource.onopen = () => { // connected.value = true; // }; // // eventSource.onmessage = (event) => { // const msg: Message = JSON.parse(event.data); // messages.value = [msg, ...messages.value.slice(0, 49)]; // }; // // eventSource.onerror = () => { // connected.value = false; // // Auto-reconnect built into EventSource // }; // // cleanup(() => { // eventSource.close(); // connected.value = false; // }); // }); // // return ( //

// {connected.value ? 'Connected' : 'Disconnected'} // {messages.value.map((msg) => ( //

{msg.topic}: {JSON.stringify(msg.data)}

// ))} //

// ); // }); // === Benefits of Resumability + Pub/Sub === // 1. Zero JS until user scrolls to LiveFeed component (Lazy) // 2. SSE connection only starts when component is visible // 3. cleanup() automatically closes connection on unmount // 4. useSignal provides fine-grained reactivity (no re-render entire tree) from dataclasses import dataclass @dataclass class QwikPattern: pattern: str api: str when_runs: str use_case: str patterns = [ QwikPattern("Server Data Load", "routeLoader$()", "Server-side (SSR)", "Initial Data, SEO Content, DB Query"), QwikPattern("Client Subscription", "useVisibleTask$()", "Client-side เมื่อ Component Visible", "WebSocket SSE Connection, Timer"), QwikPattern("Reactive State", "useSignal() / useStore()", "ทั้ง Server และ Client", "UI State, Message List, Connection Status"), QwikPattern("Server Action", "server$()", "Server-side (เรียกจาก Client)", "Publish Message, DB Write, API Call"), QwikPattern("Form Mutation", "routeAction$()", "Server-side (จาก Form Submit)", "Send Message, Create Post, Update Settings"), ] print("=== Qwik Patterns ===") for p in patterns: print(f" [{p.pattern}] API: {p.api}") print(f" Runs: {p.when_runs}") print(f" Use: {p.use_case}")