chat/frontend

GaoBinYou 前端 POC

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

功能

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

使用方式

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

cd frontend
./start.sh 3000

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

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

# 在 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 中修改以下配置：

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