# GaoBinYou 前端 POC

這是一個簡單的前端應用，用於測試 GaoBinYou 聊天系統的完整功能。

## 功能

- ✅ 匿名登入
- ✅ Token 刷新
- ✅ 隨機配對
- ✅ 即時訊息（WebSocket）
- ✅ 歷史訊息載入
- ✅ 自動狀態輪詢
- ✅ CORS 支持（後端已配置）

## 使用方式

### 方法 1：使用啟動腳本（推薦）

```bash
cd frontend
./start.sh 3000
```

然後在瀏覽器打開 `http://localhost:3000`

### 方法 2：手動啟動 HTTP 服務器

```bash
# 在 frontend 目錄下啟動一個簡單的 HTTP 服務器
cd frontend

# 使用 Python
python3 -m http.server 3000

# 或使用 Node.js
npx http-server -p 3000
```

然後在瀏覽器打開 `http://localhost:3000`

### 方法 3：使用 Live Server（VS Code 擴展）

1. 安裝 Live Server 擴展
2. 右鍵點擊 `index.html`
3. 選擇 "Open with Live Server"

## 配置

在 `app.js` 中修改以下配置：

```javascript
const API_BASE_URL = 'http://localhost:8888/api/v1';  // 後端 API 地址
const CENTRIFUGO_WS_URL = 'ws://localhost:8001/connection/websocket';  // Centrifugo WebSocket 地址
```

## 使用流程

1. **登入**：輸入暱稱（可選），點擊「開始聊天」
2. **配對**：點擊「加入配對」，等待系統匹配
3. **聊天**：配對成功後自動進入聊天室，可以發送和接收訊息
4. **刷新 Token**：如果 Token 即將過期，點擊「刷新 Token」按鈕

## 注意事項

1. 確保後端服務正在運行（`http://localhost:8888`）
2. 確保 Centrifugo 服務正在運行（`ws://localhost:8001`）
3. 後端已配置 CORS，允許所有來源（開發環境）
4. 生產環境建議限制 CORS 來源

## 瀏覽器兼容性

- Chrome/Edge (推薦)
- Firefox
- Safari

## 專案結構

```
frontend/
├── index.html      # 主頁面
├── styles.css      # 樣式表
├── app.js          # 應用邏輯
├── start.sh        # 啟動腳本
├── README.md       # 說明文檔
└── .gitignore      # Git 忽略文件
```

## 未來改進

- [ ] 自動重連機制（已部分實現）
- [ ] 訊息已讀狀態
- [ ] 打字指示器
- [ ] 表情符號支持
- [ ] 圖片/文件上傳
- [ ] 使用 Centrifugo 官方 JavaScript SDK