Shadcn UI กับ Pub/Sub Architecture — วิธีสร้าง

Shadcn UI คืออะไร

Shadcn UI เป็นแนวคิดใหม่ของ Component Library ที่ไม่ใช่ npm Package แบบ MUI หรือ Ant Design แต่เป็น Collection ของ Beautifully Designed Components ที่ Copy Source Code ลงใน Project โดยตรง ใช้ Radix UI เป็น Headless Primitive สำหรับ Accessibility และ Tailwind CSS สำหรับ Styling ข้อดีคือเป็นเจ้าของ Code ทั้งหมด Customize ได้เต็มที่ ไม่ต้อง Override CSS ของ Library

เนื้อหาเกี่ยวข้อง — อ่านต่อ: đường lê trung nghĩa phường 12 quận tân bình

เมื่อรวมกับ Pub/Sub Architecture จะได้ Real-time UI ที่อัปเดตทันทีเมื่อมี Event เกิดขึ้นในระบบ เช่น Dashboard ที่แสดง Metrics ล่าสุด, Notification System ที่แจ้งเตือนทันที หรือ Collaborative Editor ที่หลายคนแก้ไขพร้อมกัน

เนื้อหาเกี่ยวข้อง — Prometheus PromQL Clean Architecture

ติดตั้ง Shadcn UI และ Project Setup

# สร้าง Next.js Project
npx create-next-app@latest realtime-dashboard --typescript --tailwind --eslint --app
cd realtime-dashboard

# ติดตั้ง Shadcn UI
npx shadcn-ui@latest init
# เลือก: New York style, Zinc color, CSS variables: yes

# เพิ่ม Components ที่ต้องการ
npx shadcn-ui@latest add card
npx shadcn-ui@latest add badge
npx shadcn-ui@latest add table
npx shadcn-ui@latest add alert
npx shadcn-ui@latest add toast
npx shadcn-ui@latest add tabs
npx shadcn-ui@latest add chart

# ติดตั้ง Dependencies สำหรับ Pub/Sub
npm install socket.io-client zustand

# โครงสร้าง Project
src/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   └── dashboard/
│       └── page.tsx
├── components/
│   ├── ui/              # Shadcn Components
│   ├── dashboard/
│   │   ├── MetricsCards.tsx
│   │   ├── EventsTable.tsx
│   │   ├── AlertsFeed.tsx
│   │   └── RealtimeChart.tsx
│   └── providers/
│       └── PubSubProvider.tsx
├── hooks/
│   ├── useWebSocket.ts
│   └── usePubSub.ts
├── lib/
│   ├── pubsub.ts
│   └── utils.ts
└── stores/
    └── dashboardStore.ts

Pub/Sub Server ด้วย Node.js

// server.ts — Pub/Sub Server ด้วย Socket.io
import { Server } from "socket.io";
import { createServer } from "http";

const httpServer = createServer();
const io = new Server(httpServer, {
  cors: { origin: "*", methods: ["GET", "POST"] },
});

// Track Subscriptions
const subscriptions = new Map<string, Set<string>>();

io.on("connection", (socket) => {
  console.log(`Client connected: `);

  socket.on("subscribe", ({ topic }) => {
    socket.join(topic);
    if (!subscriptions.has(topic)) {
      subscriptions.set(topic, new Set());
    }
    subscriptions.get(topic)!.add(socket.id);
    console.log(` subscribed to `);
  });

  socket.on("unsubscribe", ({ topic }) => {
    socket.leave(topic);
    subscriptions.get(topic)?.delete(socket.id);
  });

  socket.on("publish", ({ topic, payload }) => {
    io.to(topic).emit("message", { topic, payload });
  });

  socket.on("disconnect", () => {
    subscriptions.forEach((clients, topic) => {
      clients.delete(socket.id);
    });
  });
});

// Simulate Real-time Metrics
setInterval(() => {
  const metrics = [
    { name: "Active Users", value: Math.floor(Math.random() * 1000) + 500,
      change: +(Math.random() * 10 - 5).toFixed(1), trend: "up" },
    { name: "Requests/sec", value: Math.floor(Math.random() * 5000) + 2000,
      change: +(Math.random() * 8 - 4).toFixed(1), trend: "stable" },
    { name: "Error Rate", value: +(Math.random() * 2).toFixed(2),
      change: +(Math.random() * 1 - 0.5).toFixed(1), trend: "down" },
    { name: "Latency P95", value: Math.floor(Math.random() * 100) + 50,
      change: +(Math.random() * 6 - 3).toFixed(1), trend: "stable" },
  ];
  metrics.forEach((m) => {
    io.to("metrics").emit("message", { topic: "metrics", payload: m });
  });
}, 3000);

httpServer.listen(3001, () => console.log("PubSub server on :3001"));

Pub/Sub Patterns สำหรับ Production

• Topic Naming Convention: ใช้ Hierarchical Topics เช่น metrics.cpu.server-01, alerts.critical.database เพื่อ Subscribe แบบ Wildcard ได้
• Message Schema: กำหนด Schema ให้ทุก Message เช่น {topic, payload, timestamp, source} เพื่อ Consistency
• Backpressure: ถ้า Client ช้ากว่า Publisher ใช้ Buffer หรือ Drop Message เก่าเพื่อป้องกัน Memory Leak
• Dead Letter Queue: เก็บ Message ที่ส่งไม่สำเร็จไว้ใน Queue แยก สำหรับ Retry หรือ Debug
• Authentication: ใช้ JWT Token สำหรับ WebSocket Connection และตรวจสอบ Permission ต่อ Topic
• Rate Limiting: จำกัดจำนวน Message ต่อ Client ต่อวินาทีเพื่อป้องกัน Abuse

Shadcn UI คืออะไร

Shadcn UI เป็น Component Library สำหรับ React ที่ Copy Source Code ลง Project โดยตรง ใช้ Radix UI และ Tailwind CSS Customize ได้เต็มที่เพราะเป็นเจ้าของ Code ไม่เพิ่ม Bundle Size จาก External Library เหมาะกับ Project ที่ต้องการ Design ที่แตกต่าง

แนะนำเพิ่มเติม — คอร์สเทรด Forex ที่ iCafeForex

เนื้อหาเกี่ยวข้อง — บทความที่เกี่ยวข้อง: time series database คือ