Real-time: WebSocket & SSE — chat, notification, live dashboard

WebSocket vs SSE: chọn cái nào?

SSE: đơn giản nhất cho notification & live feed

// File: sse-server.ts
// Server: gửi event stream
app.get("/api/events", (req, res) => {
  res.setHeader("Content-Type", "text/event-stream")
  res.setHeader("Cache-Control", "no-cache")
  res.setHeader("Connection", "keep-alive")

  // Gửi event mỗi 5 giây
  const interval = setInterval(() => {
    const data = JSON.stringify({
      type: "notification",
      message: "Có đơn hàng mới!",
      time: new Date().toISOString(),
    })
    res.write(`data: ${data}

`)
  }, 5000)

  req.on("close", () => clearInterval(interval))
})

// File: sse-client.ts
// Client: nhận event stream
const source = new EventSource("/api/events")

source.onmessage = (event) => {
  const data = JSON.parse(event.data)
  showNotification(data.message)
}

source.onerror = () => {
  // Tự động reconnect — SSE handle sẵn
  console.log("Reconnecting...")
}

WebSocket: khi cần 2 chiều (chat)

// File: ws-server.ts
import { WebSocketServer } from 'ws'

const wss = new WebSocketServer({ port: 8080 })

wss.on("connection", (ws) => {
  ws.on("message", (message) => {
    // Broadcast cho tất cả client khác
    wss.clients.forEach((client) => {
      if (client !== ws && client.readyState === 1) {
        client.send(message.toString())
      }
    })
  })
})

• Triển khai SSE endpoint cơ bản
• Kết nối EventSource từ client
• Biết khi nào SSE vs WebSocket
• Xử lý connection cleanup