96 lines
2.2 KiB
Markdown
96 lines
2.2 KiB
Markdown
|
# 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
|