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
|