Phần 5: UI Trực Quan Hóa Lộ Trình Bằng Mapbox & Deck.gl

new PathLayer({
  id: 'route-layer',
  data: routesData,
  parameters: {
    depthTest: true,
    depthFunc: WebGLRenderingContext.LEQUAL,
    polygonOffset: true,
    polygonOffsetFactor: -1.0, // Đẩy layer lộ trình nhích nhẹ về phía camera trong clip space
    polygonOffsetUnits: -4.0
  }
});

// Package main cung cấp máy chủ nạp luồng dữ liệu toạ độ nhị phân cho Deck.gl chuẩn Go 1.25
package main

import (
	"bytes"
	"context"
	"encoding/binary"
	"fmt"
	"iter"
	"log/slog"
	"math/rand/v2"
	"net/http"
	"os"
	"runtime"
	"sync"
	"time"
)

// VehicleTelemetry đại diện cho một gói tin định vị 4 chiều (4D Vector)
type VehicleTelemetry struct {
	VehicleID uint32  `json:"vehicle_id"`
	Latitude  float32 `json:"lat"`       // Float32 tối ưu dung lượng VRAM GPU
	Longitude float32 `json:"lon"`
	AltitudeM float32 `json:"alt"`
	Timestamp uint32  `json:"timestamp"` // Unix epoch (giây)
}

// StreamerConfig cấu hình tham số cho máy chủ phát luồng
type StreamerConfig struct {
	Port              int
	BroadcastInterval time.Duration
	MaxActiveVehicles int
}

// TelemetryBroadcaster quản lý kết nối và phát luồng toạ độ nhị phân tới Frontend
type TelemetryBroadcaster struct {
	cfg       StreamerConfig
	logger    *slog.Logger
	clients   map[chan []byte]bool
	clientsMu sync.RWMutex
}

// NewTelemetryBroadcaster khởi tạo broadcaster kèm cleanup hook Go 1.25
func NewTelemetryBroadcaster(cfg StreamerConfig, logger *slog.Logger) *TelemetryBroadcaster {
	if cfg.BroadcastInterval <= 0 {
		cfg.BroadcastInterval = 100 * time.Millisecond // 10 FPS cập nhật
	}
	if cfg.MaxActiveVehicles <= 0 {
		cfg.MaxActiveVehicles = 50000
	}

	b := &TelemetryBroadcaster{
		cfg:     cfg,
		logger:  logger,
		clients: make(map[chan []byte]bool),
	}

	// Đăng ký dọn dẹp tài nguyên với runtime.AddCleanup
	runtime.AddCleanup(b, func(m map[chan []byte]bool) {
		clear(m)
	}, b.clients)

	return b
}

// TelemetryBatchIterator tạo một Go 1.25 Iterator duyệt qua các lô toạ độ xe
func TelemetryBatchIterator(vehicles []VehicleTelemetry, batchSize int) iter.Seq2[int, []VehicleTelemetry] {
	return func(yield func(int, []VehicleTelemetry) bool) {
		total := len(vehicles)
		batchIndex := 0
		for i := 0; i < total; i += batchSize {
			end := i + batchSize
			if end > total {
				end = total
			}
			if !yield(batchIndex, vehicles[i:end]) {
				return
			}
			batchIndex++
		}
	}
}

// PackBinaryTelemetry đóng gói danh sách toạ độ xe thành mảng nhị phân phẳng (Flat ArrayBuffer)
// Mỗi xe tốn đúng: 4 bytes (ID) + 4 (Lat) + 4 (Lon) + 4 (Alt) + 4 (Time) = 20 Bytes!
func PackBinaryTelemetry(vehicles []VehicleTelemetry) []byte {
	buf := new(bytes.Buffer)
	buf.Grow(len(vehicles) * 20)

	for _, v := range vehicles {
		binary.Write(buf, binary.LittleEndian, v.VehicleID)
		binary.Write(buf, binary.LittleEndian, v.Latitude)
		binary.Write(buf, binary.LittleEndian, v.Longitude)
		binary.Write(buf, binary.LittleEndian, v.AltitudeM)
		binary.Write(buf, binary.LittleEndian, v.Timestamp)
	}

	return buf.Bytes()
}

// RegisterClient đăng ký một kết nối frontend mới
func (b *TelemetryBroadcaster) RegisterClient(ch chan []byte) {
	b.clientsMu.Lock()
	defer b.clientsMu.Unlock()
	b.clients[ch] = true
	b.logger.Info("Frontend client kết nối thành công", slog.Int("tong_clients", len(b.clients)))
}

// UnregisterClient hủy đăng ký kết nối
func (b *TelemetryBroadcaster) UnregisterClient(ch chan []byte) {
	b.clientsMu.Lock()
	defer b.clientsMu.Unlock()
	delete(b.clients, ch)
	close(ch)
	b.logger.Info("Frontend client ngắt kết nối", slog.Int("tong_clients", len(b.clients)))
}

// BroadcastBatch gửi dữ liệu nhị phân tới toàn bộ trình duyệt đang kết nối
func (b *TelemetryBroadcaster) BroadcastBatch(data []byte) {
	b.clientsMu.RLock()
	defer b.clientsMu.RUnlock()

	for ch := range b.clients {
		select {
		case ch <- data:
		default:
			// Bỏ qua nếu client bị nghẽn mạng để không làm nghẽn các client khác
		}
	}
}

// StartSimulationEngine chạy luồng mô phỏng 50,000 xe di chuyển trên bản đồ TP.HCM
func (b *TelemetryBroadcaster) StartSimulationEngine(ctx context.Context) {
	b.logger.Info("Bắt đầu khởi động cỗ máy mô phỏng 50,000 phương tiện",
		slog.Int("vehicle_count", b.cfg.MaxActiveVehicles),
		slog.Duration("interval", b.cfg.BroadcastInterval),
	)

	// Khởi tạo toạ độ ban đầu cho 50,000 xe quanh khu vực trung tâm
	fleet := make([]VehicleTelemetry, b.cfg.MaxActiveVehicles)
	now := uint32(time.Now().Unix())
	for i := 0; i < b.cfg.MaxActiveVehicles; i++ {
		fleet[i] = VehicleTelemetry{
			VehicleID: uint32(i + 1),
			Latitude:  10.7769 + (rand.Float32()-0.5)*0.15,
			Longitude: 106.7009 + (rand.Float32()-0.5)*0.15,
			AltitudeM: 5.0 + rand.Float32()*15.0,
			Timestamp: now,
		}
	}

	ticker := time.NewTicker(b.cfg.BroadcastInterval)
	defer ticker.Stop()

	for {
		select {
		case <-ctx.Done():
			b.logger.Info("Dừng cỗ máy mô phỏng phát luồng")
			return
		case t := <-ticker.C:
			currTime := uint32(t.Unix())
			// Cập nhật toạ độ xe (mô phỏng di chuyển)
			for i := range fleet {
				fleet[i].Latitude += (rand.Float32() - 0.5) * 0.0002
				fleet[i].Longitude += (rand.Float32() - 0.5) * 0.0002
				fleet[i].Timestamp = currTime
			}

			// Đóng gói nhị phân siêu tốc
			binaryPayload := PackBinaryTelemetry(fleet)

			// Phát luồng tới frontend
			b.BroadcastBatch(binaryPayload)

			b.logger.Debug("Đã phát luồng toạ độ nhị phân",
				slog.Int("vehicles", len(fleet)),
				slog.Int("payload_bytes", len(binaryPayload)),
			)
		}
	}
}

func main() {
	handler := slog.NewTextHandler(os.Stdout, &slog.HandlerOptions{Level: slog.LevelInfo})
	logger := slog.New(handler)

	cfg := StreamerConfig{
		Port:              8080,
		BroadcastInterval: 200 * time.Millisecond, // 5 lần cập nhật mỗi giây
		MaxActiveVehicles: 50000,
	}

	broadcaster := NewTelemetryBroadcaster(cfg, logger)

	// Mô phỏng 1 Frontend Client kết nối nhận luồng
	clientCh := make(chan []byte, 10)
	broadcaster.RegisterClient(clientCh)

	ctx, cancel := context.WithTimeout(context.Background(), 2*time.Second)
	defer cancel()

	// Goroutine đọc luồng phía client
	go func() {
		for packet := range clientCh {
			logger.Info("Frontend nhận gói tin nhị phân",
				slog.Int("dung_luong_bytes", len(packet)),
				slog.String("dinh_dang", "Float32 ArrayBuffer (Zero JSON Overhead)"),
			)
		}
	}()

	// Chạy cỗ máy phát luồng
	broadcaster.StartSimulationEngine(ctx)
}

> 🔥 **[Production Failure]: Mất Ngữ Cảnh WebGL Context Và Đóng Băng Tab Trình Duyệt Điều Phối Viên**
> **Thời gian xảy ra:** 10:30 - 11:45 UTC+7, Ngày 15/08/2025.
> **Phạm vi ảnh hưởng:** Toàn bộ trung tâm điều hành vận tải (Command Center); 45 máy tính của các điều phối viên trưởng bị đóng băng trình duyệt Chrome; mất quyền kiểm soát giám sát lộ trình của 35,000 tài xế.
> **Triệu chứng (Symptom):** Tab trình duyệt ngốn vọt lên 3.8 GB RAM; thông báo lỗi `Error: WebGL: CONTEXT_LOST_WEBGL` xuất hiện trên console; màn hình bản đồ chuyển sang màu trắng xóa; trình duyệt hiện thông báo `He's Dead, Jim!` (Out-Of-Memory Crash).
> 
> **Nguyên nhân gốc rễ (Root Cause):**
> 1. Khi mở rộng phạm vi giám sát lên 50,000 phương tiện, frontend tạo mới một đối tượng layer Deck.gl `new ScatterplotLayer()` và `new TripsLayer()` sau mỗi thông điệp WebSocket mà không tái sử dụng đối tượng layer cũ.
> 2. Mỗi layer mới cấp phát một tập hợp WebGL Vertex Buffer Objects (VBOs) riêng biệt trên bộ nhớ VRAM.
> 3. Cơ chế thu gom rác WebGL không kịp giải phóng tài nguyên GPU, dẫn tới rò rỉ VRAM (VRAM Memory Leak). Khi VRAM chạm mốc giới hạn 4GB của GPU tích hợp trên máy trạm điều phối viên, card đồ họa kích hoạt ngắt bảo vệ `webglcontextlost` và chấm dứt tiến trình GPU của Chrome.
> 
> 📊 **Hậu quả (Impact):** Tê liệt năng lực can thiệp thủ công đối với các cuốc xe bất thường trong 1 giờ 15 phút; điều phối viên phải khởi động lại máy tính vật lý.
> 
> 📈 **Khắc phục & Kiến trúc phòng ngừa (Resolution & Prevention Architecture):**
> 1. **Khắc phục tức thời:** Yêu cầu các điều phối viên chuyển sang chế độ hiển thị đơn giản hóa (lọc theo từng quận thay vì hiển thị toàn quốc) và khởi động lại Chrome với cờ `--disable-gpu-watchdog`.
> 2. **Kiến trúc Buffer Tái Sử Dụng (In-Place GPU Buffer Updates):** Không bao giờ khởi tạo lại layer Deck.gl. Thay vào đó, giữ nguyên layer và chỉ cập nhật dữ liệu thông qua thuộc tính `data: binaryBuffer` kết hợp với cờ `dataComparator`. Deck.gl sẽ tái sử dụng nguyên vẹn các VBOs trên GPU mà không cấp phát thêm một byte bộ nhớ mới.
> 3. **Cơ chế Tự Khôi Phục Ngữ Cảnh (Automatic Context Restoration):** Lắng nghe sự kiện `webglcontextlost` trên canvas bản đồ, gọi `event.preventDefault()` và kích hoạt quy trình khởi tạo lại ngữ cảnh sạch sau 500ms khi card đồ họa ổn định.