SSE

SSE (Server-Sent Events) là một kỹ thuật trong HTML5 cho phép server chủ động gửi dữ liệu liên tục về client thông qua kết nối HTTP, mà không cần client phải liên tục gửi request.


💡 Hiểu đơn giản:

Khi bạn cần server "đẩy dữ liệu" về browser liên tục, như:

  • Cập nhật giá cổ phiếu theo thời gian thực

  • Hiển thị log realtime

  • Gửi thông báo mới

  • Cập nhật trạng thái đơn hàng

thì SSE là một trong những lựa chọn.


🔄 Cách hoạt động:

  1. Client mở một kết nối HTTP dài (long-lived connection) đến endpoint SSE

  2. Server sẽ giữ kết nối đó mở và liên tục gửi dữ liệu về client theo định dạng text/event-stream

  3. Client nhận sự kiện bằng JavaScript thông qua EventSource.


🧪 Ví dụ:

✅ Client-side (HTML + JS)

<script>
  const eventSource = new EventSource("/sse-endpoint");

  eventSource.onmessage = function(event) {
    console.log("New message:", event.data);
  };

  eventSource.onerror = function(error) {
    console.error("EventSource failed:", error);
  };
</script>

✅ Server-side (ví dụ với Go)

func sseHandler(w http.ResponseWriter, r *http.Request) {
    w.Header().Set("Content-Type", "text/event-stream")
    w.Header().Set("Cache-Control", "no-cache")
    w.Header().Set("Connection", "keep-alive")

    ticker := time.NewTicker(1 * time.Second)
    defer ticker.Stop()

    for {
        select {
        case <-r.Context().Done():
            return
        case t := <-ticker.C:
            fmt.Fprintf(w, "data: Current time is %s\n\n", t.Format(time.RFC3339))
            if f, ok := w.(http.Flusher); ok {
                f.Flush()
            }
        }
    }
}

✅ Ưu điểm:

  • Đơn giản, native support trong trình duyệt

  • Dựa trên HTTP nên không cần WebSocket, dễ dùng với reverse proxy (Nginx, Apache)

  • Tốt cho real-time one-way data (server → client)

❌ Nhược điểm:

  • Chỉ truyền 1 chiều: từ server → client

  • Không được hỗ trợ tốt trong các trình duyệt cũ

  • Không tối ưu bằng WebSocket cho 2 chiều hoặc băng thông cao

  • Chỉ dùng được với HTTP/1.1, không tương thích tốt với HTTP/2 multiplexing


🆚 So sánh với WebSocket:

Tính năng
SSE
WebSocket

Kết nối

HTTP

TCP (qua HTTP Upgrade)

Dữ liệu

1 chiều (Server → Client)

2 chiều (Client ↔ Server)

Hỗ trợ trình duyệt

Tốt (trừ IE)

Tốt

Cấu hình proxy

Dễ

Phức tạp hơn

Dễ sử dụng

Dễ, hỗ trợ sẵn JS

Cần thêm JS lib/socket


📌 Khi nào nên dùng SSE?

  • Khi bạn chỉ cần push dữ liệu từ server đến client

  • Tần suất cập nhật trung bình/thấp

  • Không cần truyền dữ liệu hai chiều

  • Cần dễ triển khai với HTTP/1.1 / Nginx / Apache


Last updated