587 lines
20 KiB
JavaScript
587 lines
20 KiB
JavaScript
// API 配置
|
||
const API_BASE_URL = 'http://localhost:8888/api/v1';
|
||
// Centrifugo WebSocket URL - 默認使用 8000 端口（與 HTTP API 同端口）
|
||
// 如果配置了不同的 WebSocket 端口，請修改此處
|
||
const CENTRIFUGO_WS_URL = 'ws://localhost:8000/connection/websocket';
|
||
|
||
// 應用狀態
|
||
let appState = {
|
||
uid: null,
|
||
token: null,
|
||
centrifugoToken: null,
|
||
expireAt: null,
|
||
roomID: null,
|
||
centrifugoClient: null,
|
||
matchStatus: null,
|
||
wsRetryCount: 0
|
||
};
|
||
|
||
// 工具函數
|
||
function log(message, type = 'info') {
|
||
const logContainer = document.getElementById('logContainer');
|
||
const entry = document.createElement('div');
|
||
entry.className = `log-entry ${type}`;
|
||
entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
|
||
logContainer.appendChild(entry);
|
||
logContainer.scrollTop = logContainer.scrollHeight;
|
||
console.log(`[${type.toUpperCase()}]`, message);
|
||
}
|
||
|
||
function showSection(sectionId) {
|
||
document.querySelectorAll('.section').forEach(section => {
|
||
section.classList.add('hidden');
|
||
});
|
||
document.getElementById(sectionId).classList.remove('hidden');
|
||
}
|
||
|
||
// API 調用函數
|
||
async function apiCall(endpoint, method = 'GET', body = null, needAuth = false) {
|
||
const options = {
|
||
method,
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
}
|
||
};
|
||
|
||
if (needAuth && appState.token) {
|
||
options.headers['Authorization'] = `Bearer ${appState.token}`;
|
||
}
|
||
|
||
if (body) {
|
||
options.body = JSON.stringify(body);
|
||
}
|
||
|
||
try {
|
||
const response = await fetch(`${API_BASE_URL}${endpoint}`, options);
|
||
|
||
// 先讀取響應文本
|
||
const text = await response.text();
|
||
|
||
// 嘗試解析 JSON
|
||
let data;
|
||
try {
|
||
data = text ? JSON.parse(text) : {};
|
||
} catch (parseError) {
|
||
// 如果不是有效的 JSON，使用原始文本作為錯誤信息
|
||
log(`響應不是有效的 JSON: ${text}`, 'error');
|
||
if (!response.ok) {
|
||
throw new Error(text || `HTTP ${response.status}`);
|
||
}
|
||
data = {};
|
||
}
|
||
|
||
if (!response.ok) {
|
||
const errorMsg = data.message || data.error || data.error?.message || text || `HTTP ${response.status}`;
|
||
log(`API 錯誤: ${errorMsg}`, 'error');
|
||
throw new Error(errorMsg);
|
||
}
|
||
|
||
return data;
|
||
} catch (error) {
|
||
if (error instanceof TypeError && error.message.includes('fetch')) {
|
||
log(`網路錯誤: ${error.message}`, 'error');
|
||
throw new Error('網路連接失敗，請檢查後端服務是否運行');
|
||
}
|
||
log(`API 錯誤: ${error.message}`, 'error');
|
||
throw error;
|
||
}
|
||
}
|
||
|
||
// 匿名登入
|
||
async function handleLogin() {
|
||
const userName = document.getElementById('userName').value || 'Anonymous';
|
||
const btn = document.getElementById('loginBtn');
|
||
|
||
btn.disabled = true;
|
||
btn.textContent = '登入中...';
|
||
|
||
try {
|
||
log('開始匿名登入...', 'info');
|
||
const response = await apiCall('/auth/anon', 'POST', { name: userName });
|
||
|
||
// 調試：檢查響應內容
|
||
log(`登入響應: uid=${response.uid}, hasToken=${!!response.token}, hasCentrifugoToken=${!!response.centrifugo_token}`, 'info');
|
||
|
||
appState.uid = response.uid;
|
||
appState.token = response.token;
|
||
appState.centrifugoToken = response.centrifugo_token;
|
||
appState.expireAt = response.expire_at;
|
||
|
||
// 驗證 token 是否正確獲取
|
||
if (!appState.centrifugoToken) {
|
||
log('警告：未獲取到 Centrifugo token，請檢查後端響應', 'error');
|
||
log(`完整響應: ${JSON.stringify(response)}`, 'error');
|
||
} else {
|
||
const tokenPreview = appState.centrifugoToken.substring(0, 20) + '...';
|
||
log(`已獲取 Centrifugo token (前20字符): ${tokenPreview}`, 'info');
|
||
}
|
||
|
||
document.getElementById('userUID').textContent = appState.uid;
|
||
log(`登入成功！UID: ${appState.uid}`, 'success');
|
||
|
||
showSection('matchingSection');
|
||
} catch (error) {
|
||
log(`登入失敗: ${error.message}`, 'error');
|
||
alert('登入失敗，請重試');
|
||
} finally {
|
||
btn.disabled = false;
|
||
btn.textContent = '開始聊天';
|
||
}
|
||
}
|
||
|
||
// 加入配對
|
||
async function handleJoinMatch() {
|
||
const btn = document.getElementById('joinMatchBtn');
|
||
|
||
btn.disabled = true;
|
||
btn.textContent = '配對中...';
|
||
|
||
try {
|
||
log('加入配對佇列...', 'info');
|
||
const response = await apiCall('/matchmaking/join', 'POST', null, true);
|
||
|
||
appState.matchStatus = response.status;
|
||
document.getElementById('matchStatus').textContent = response.status === 'waiting' ? '等待配對中...' : '已配對！';
|
||
|
||
log(`配對狀態: ${response.status}`, response.status === 'matched' ? 'success' : 'info');
|
||
|
||
if (response.status === 'matched') {
|
||
// 如果立即配對成功，需要查詢 roomID
|
||
await handleCheckStatus();
|
||
} else {
|
||
// 開始輪詢狀態
|
||
startStatusPolling();
|
||
}
|
||
} catch (error) {
|
||
log(`加入配對失敗: ${error.message}`, 'error');
|
||
} finally {
|
||
btn.disabled = false;
|
||
btn.textContent = '加入配對';
|
||
}
|
||
}
|
||
|
||
// 檢查配對狀態
|
||
async function handleCheckStatus() {
|
||
try {
|
||
const response = await apiCall('/matchmaking/status', 'GET', null, true);
|
||
|
||
appState.matchStatus = response.status;
|
||
document.getElementById('matchStatus').textContent =
|
||
response.status === 'waiting' ? '等待配對中...' : '已配對！';
|
||
|
||
if (response.status === 'matched' && response.room_id) {
|
||
appState.roomID = response.room_id;
|
||
document.getElementById('roomID').textContent = response.room_id;
|
||
log(`配對成功！房間 ID: ${response.room_id}`, 'success');
|
||
|
||
// 停止輪詢，進入聊天室
|
||
stopStatusPolling();
|
||
await enterChatRoom();
|
||
}
|
||
} catch (error) {
|
||
log(`檢查狀態失敗: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
// 開始狀態輪詢
|
||
let pollingInterval = null;
|
||
|
||
function startStatusPolling() {
|
||
if (pollingInterval) return;
|
||
|
||
log('開始輪詢配對狀態...', 'info');
|
||
pollingInterval = setInterval(async () => {
|
||
await handleCheckStatus();
|
||
}, 2000); // 每 2 秒檢查一次
|
||
}
|
||
|
||
function stopStatusPolling() {
|
||
if (pollingInterval) {
|
||
clearInterval(pollingInterval);
|
||
pollingInterval = null;
|
||
log('停止輪詢配對狀態', 'info');
|
||
}
|
||
}
|
||
|
||
// 進入聊天室
|
||
async function enterChatRoom() {
|
||
showSection('chatSection');
|
||
|
||
// 進入聊天室前先刷新 token，以確保獲取到最新的房間權限
|
||
// 因為匿名登入時還不知道房間ID，所以當時的 token 沒有房間權限
|
||
await handleRefreshToken();
|
||
|
||
// 連接到 Centrifugo
|
||
connectToCentrifugo();
|
||
|
||
// 載入歷史訊息
|
||
await loadHistoryMessages();
|
||
}
|
||
|
||
// 連接到 Centrifugo
|
||
function connectToCentrifugo() {
|
||
if (!appState.centrifugoToken || !appState.roomID) {
|
||
log(`無法連接 Centrifugo：缺少 token 或 roomID (token: ${appState.centrifugoToken ? '存在' : '不存在'}, roomID: ${appState.roomID || '不存在'})`, 'error');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
// 關閉舊連接
|
||
if (appState.centrifugoClient) {
|
||
appState.centrifugoClient.close();
|
||
}
|
||
|
||
// 檢查 token 是否過期
|
||
if (appState.expireAt) {
|
||
const now = Math.floor(Date.now() / 1000);
|
||
if (now >= appState.expireAt) {
|
||
log('Centrifugo token 已過期，請先刷新 token', 'error');
|
||
return;
|
||
}
|
||
const timeUntilExpiry = appState.expireAt - now;
|
||
log(`Centrifugo token 將在 ${Math.floor(timeUntilExpiry / 60)} 分鐘後過期`, 'info');
|
||
}
|
||
|
||
// 記錄 token 前幾個字符用於調試（不記錄完整 token 以保護安全）
|
||
const tokenPreview = appState.centrifugoToken.substring(0, 20) + '...';
|
||
log(`正在連接 Centrifugo，使用 token: ${tokenPreview}`, 'info');
|
||
|
||
// Centrifugo WebSocket 連線（使用 JSON 格式）
|
||
// Centrifugo v5: 必須先發送 connect 命令進行認證
|
||
const wsUrl = `${CENTRIFUGO_WS_URL}?format=json`;
|
||
log(`WebSocket URL: ${wsUrl}`, 'info');
|
||
const ws = new WebSocket(wsUrl);
|
||
|
||
let messageId = 1;
|
||
let isConnected = false;
|
||
|
||
ws.onopen = () => {
|
||
log('WebSocket 連接已建立，正在發送認證請求...', 'info');
|
||
// 重置重試計數
|
||
appState.wsRetryCount = 0;
|
||
|
||
// Centrifugo v5: 必須先發送 connect 命令進行認證
|
||
const connectMsg = {
|
||
id: messageId++,
|
||
connect: {
|
||
token: appState.centrifugoToken
|
||
}
|
||
};
|
||
ws.send(JSON.stringify(connectMsg));
|
||
log('已發送 connect 認證請求', 'info');
|
||
};
|
||
|
||
ws.onmessage = (event) => {
|
||
try {
|
||
const data = JSON.parse(event.data);
|
||
|
||
// 跳過空回應（心跳 pong）和只有 id 的回應
|
||
const isEmptyOrPong = Object.keys(data).length === 0 ||
|
||
(Object.keys(data).length === 1 && data.id);
|
||
|
||
// 只記錄有意義的訊息（非心跳、非空回應）
|
||
if (!isEmptyOrPong && !data.subscribe) {
|
||
log(`收到 Centrifugo 訊息: ${JSON.stringify(data)}`, 'info');
|
||
}
|
||
|
||
// Centrifugo v5 JSON 協議回應格式
|
||
// 處理 connect 回應
|
||
if (data.connect) {
|
||
isConnected = true;
|
||
appState.wsRetryCount = 0; // 重置重連計數
|
||
log(`已成功連接到 Centrifugo，client: ${data.connect.client}`, 'success');
|
||
|
||
// 設置心跳定時器（Centrifugo 要求客戶端發送 ping）
|
||
const pingInterval = (data.connect.ping || 25) * 1000;
|
||
if (appState.pingTimer) {
|
||
clearInterval(appState.pingTimer);
|
||
}
|
||
appState.pingTimer = setInterval(() => {
|
||
if (ws.readyState === WebSocket.OPEN) {
|
||
// 發送空物件作為 ping
|
||
ws.send('{}');
|
||
}
|
||
}, pingInterval);
|
||
log(`已設置心跳間隔: ${pingInterval / 1000} 秒`, 'info');
|
||
|
||
// 檢查是否已經通過 token 自動訂閱了房間頻道
|
||
const roomChannel = `room:${appState.roomID}`;
|
||
if (data.connect.subs && data.connect.subs[roomChannel]) {
|
||
log(`已通過 token 自動訂閱頻道: ${roomChannel}`, 'success');
|
||
} else {
|
||
// 需要手動訂閱
|
||
const subscribeMsg = {
|
||
id: messageId++,
|
||
subscribe: {
|
||
channel: roomChannel
|
||
}
|
||
};
|
||
ws.send(JSON.stringify(subscribeMsg));
|
||
log(`已發送訂閱請求: ${roomChannel}`, 'info');
|
||
}
|
||
}
|
||
// 處理 subscribe 回應
|
||
else if (data.subscribe) {
|
||
log(`成功訂閱頻道`, 'success');
|
||
}
|
||
// 處理錯誤
|
||
else if (data.error) {
|
||
// code 105 = already subscribed，這不是真正的錯誤
|
||
if (data.error.code === 105) {
|
||
log(`頻道已訂閱 (這是正常的)`, 'info');
|
||
} else {
|
||
log(`Centrifugo 錯誤: code=${data.error.code}, message=${data.error.message}`, 'error');
|
||
if (data.error.code === 109) {
|
||
log('Token 驗證失敗，請檢查 token 是否正確', 'error');
|
||
} else if (data.error.code === 103) {
|
||
log('頻道訂閱權限不足', 'error');
|
||
}
|
||
}
|
||
}
|
||
// 處理 push 訊息（新訊息推送）
|
||
else if (data.push) {
|
||
const push = data.push;
|
||
if (push.pub) {
|
||
// 收到發布的訊息
|
||
const message = push.pub.data;
|
||
if (message && typeof message === 'object') {
|
||
displayMessage(message);
|
||
log(`收到新訊息: ${message.content || JSON.stringify(message)}`, 'info');
|
||
}
|
||
} else if (push.join) {
|
||
log(`用戶 ${push.join.user} 加入了房間`, 'info');
|
||
} else if (push.leave) {
|
||
log(`用戶 ${push.leave.user} 離開了房間`, 'info');
|
||
}
|
||
}
|
||
// 處理 disconnect
|
||
else if (data.disconnect) {
|
||
log(`Centrifugo 服務器主動斷開連接: ${data.disconnect.reason}`, 'error');
|
||
}
|
||
} catch (error) {
|
||
log(`處理 WebSocket 訊息錯誤: ${error.message}`, 'error');
|
||
log(`原始訊息: ${event.data}`, 'error');
|
||
}
|
||
};
|
||
|
||
ws.onerror = (error) => {
|
||
log(`WebSocket 錯誤: ${error.message || error}`, 'error');
|
||
// 記錄更多錯誤信息
|
||
if (error.target && error.target.readyState === WebSocket.CLOSED) {
|
||
log('WebSocket 連接已關閉', 'error');
|
||
}
|
||
};
|
||
|
||
ws.onclose = (event) => {
|
||
const reason = event.reason || '無';
|
||
log(`WebSocket 連線已關閉 (code: ${event.code}, reason: ${reason})`, 'info');
|
||
|
||
// 清除心跳定時器
|
||
if (appState.pingTimer) {
|
||
clearInterval(appState.pingTimer);
|
||
appState.pingTimer = null;
|
||
}
|
||
|
||
// 1000 表示正常關閉（主動斷開）
|
||
const normalCloseCodes = [1000];
|
||
|
||
if (event.code === 1006) {
|
||
log('WebSocket 異常關閉，可能是網路問題或服務中斷', 'error');
|
||
}
|
||
|
||
// 非正常關閉且還在房間中，自動重連
|
||
if (!normalCloseCodes.includes(event.code) && appState.roomID && appState.centrifugoToken) {
|
||
const retryCount = appState.wsRetryCount || 0;
|
||
const maxRetries = 10; // 增加最大重試次數
|
||
if (retryCount < maxRetries) {
|
||
appState.wsRetryCount = retryCount + 1;
|
||
// 使用指數退避策略，最長等待 30 秒
|
||
const delay = Math.min(1000 * Math.pow(1.5, retryCount), 30000);
|
||
log(`將在 ${Math.round(delay / 1000)} 秒後重新連接... (${retryCount + 1}/${maxRetries})`, 'info');
|
||
setTimeout(() => {
|
||
if (appState.roomID && appState.centrifugoToken) {
|
||
connectToCentrifugo();
|
||
}
|
||
}, delay);
|
||
} else {
|
||
log('WebSocket 重連次數已達上限，請刷新頁面重試', 'error');
|
||
}
|
||
}
|
||
};
|
||
|
||
appState.centrifugoClient = ws;
|
||
} catch (error) {
|
||
log(`連接 Centrifugo 失敗: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
// 載入歷史訊息
|
||
async function loadHistoryMessages() {
|
||
try {
|
||
log('載入歷史訊息...', 'info');
|
||
// 使用查詢參數傳遞 page_size 和 page_index
|
||
const response = await apiCall(
|
||
`/rooms/${appState.roomID}/messages?page_size=20&page_index=1`,
|
||
'GET',
|
||
null,
|
||
true
|
||
);
|
||
|
||
const messages = response.data || [];
|
||
messages.reverse(); // 從舊到新顯示
|
||
|
||
messages.forEach(msg => {
|
||
displayMessage(msg);
|
||
});
|
||
|
||
log(`已載入 ${messages.length} 條歷史訊息`, 'success');
|
||
} catch (error) {
|
||
log(`載入歷史訊息失敗: ${error.message}`, 'error');
|
||
// 即使載入失敗也不影響聊天功能
|
||
}
|
||
}
|
||
|
||
// 顯示訊息
|
||
function displayMessage(message) {
|
||
const container = document.getElementById('messagesContainer');
|
||
const messageDiv = document.createElement('div');
|
||
messageDiv.className = `message ${message.uid === appState.uid ? 'own' : ''}`;
|
||
|
||
const date = new Date(message.timestamp);
|
||
messageDiv.innerHTML = `
|
||
<div class="message-header">
|
||
<span>${message.uid === appState.uid ? '我' : '對方'}</span>
|
||
<span>${date.toLocaleTimeString()}</span>
|
||
</div>
|
||
<div class="message-content">${escapeHtml(message.content)}</div>
|
||
`;
|
||
|
||
container.appendChild(messageDiv);
|
||
container.scrollTop = container.scrollHeight;
|
||
}
|
||
|
||
// 發送訊息
|
||
async function handleSendMessage() {
|
||
const input = document.getElementById('messageInput');
|
||
const content = input.value.trim();
|
||
|
||
if (!content) {
|
||
alert('請輸入訊息內容');
|
||
return;
|
||
}
|
||
|
||
if (!appState.roomID) {
|
||
alert('尚未加入房間');
|
||
return;
|
||
}
|
||
|
||
const btn = document.getElementById('sendBtn');
|
||
btn.disabled = true;
|
||
|
||
try {
|
||
const clientMsgID = `msg_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
|
||
|
||
await apiCall(
|
||
`/rooms/${appState.roomID}/messages`,
|
||
'POST',
|
||
{
|
||
content: content,
|
||
client_msg_id: clientMsgID
|
||
},
|
||
true
|
||
);
|
||
|
||
log(`訊息已發送: ${content}`, 'success');
|
||
input.value = '';
|
||
} catch (error) {
|
||
log(`發送訊息失敗: ${error.message}`, 'error');
|
||
alert('發送訊息失敗，請重試');
|
||
} finally {
|
||
btn.disabled = false;
|
||
input.focus();
|
||
}
|
||
}
|
||
|
||
// 刷新 Token
|
||
async function handleRefreshToken() {
|
||
if (!appState.token) {
|
||
alert('請先登入');
|
||
return;
|
||
}
|
||
|
||
const btn = document.getElementById('refreshTokenBtn');
|
||
btn.disabled = true;
|
||
btn.textContent = '刷新中...';
|
||
|
||
try {
|
||
log('刷新 Token...', 'info');
|
||
const response = await apiCall('/auth/refresh', 'POST', {
|
||
token: appState.token
|
||
});
|
||
|
||
appState.token = response.token;
|
||
appState.centrifugoToken = response.centrifugo_token;
|
||
appState.expireAt = response.expire_at;
|
||
|
||
// 驗證新 token 是否正確獲取
|
||
if (!appState.centrifugoToken) {
|
||
log('警告：刷新後未獲取到 Centrifugo token', 'error');
|
||
} else {
|
||
const tokenPreview = appState.centrifugoToken.substring(0, 20) + '...';
|
||
log(`已獲取新的 Centrifugo token: ${tokenPreview}`, 'info');
|
||
}
|
||
|
||
log('Token 刷新成功！', 'success');
|
||
|
||
// 重新連接 Centrifugo
|
||
if (appState.centrifugoClient) {
|
||
appState.centrifugoClient.close();
|
||
}
|
||
if (appState.roomID) {
|
||
connectToCentrifugo();
|
||
}
|
||
} catch (error) {
|
||
log(`刷新 Token 失敗: ${error.message}`, 'error');
|
||
alert('Token 刷新失敗，請重新登入');
|
||
} finally {
|
||
btn.disabled = false;
|
||
btn.textContent = '刷新 Token';
|
||
}
|
||
}
|
||
|
||
// 鍵盤事件處理
|
||
function handleKeyPress(event) {
|
||
if (event.key === 'Enter') {
|
||
handleSendMessage();
|
||
}
|
||
}
|
||
|
||
// HTML 轉義
|
||
function escapeHtml(text) {
|
||
const div = document.createElement('div');
|
||
div.textContent = text;
|
||
return div.innerHTML;
|
||
}
|
||
|
||
// 檢查 Token 過期
|
||
function checkTokenExpiry() {
|
||
if (appState.expireAt) {
|
||
const now = Math.floor(Date.now() / 1000);
|
||
const timeUntilExpiry = appState.expireAt - now;
|
||
|
||
if (timeUntilExpiry < 0) {
|
||
log('Token 已過期', 'error');
|
||
alert('Token 已過期，請刷新或重新登入');
|
||
} else if (timeUntilExpiry < 300) { // 5 分鐘內過期
|
||
log(`Token 將在 ${Math.floor(timeUntilExpiry / 60)} 分鐘後過期，建議刷新`, 'info');
|
||
}
|
||
}
|
||
}
|
||
|
||
// 定期檢查 Token 過期
|
||
setInterval(checkTokenExpiry, 60000); // 每分鐘檢查一次
|
||
|
||
// 初始化
|
||
log('應用程式已載入', 'info');
|
||
|