Refactor ChatPopup to update WebRTC userId upon authentication, enhance identifier logic for message comparison, and localize guest label. Update useWebRTC to include userId update function and adjust API request headers for guestId handling based on authentication status.

This commit is contained in:
2025-10-31 14:40:49 +05:00
parent 000c4caacb
commit 712448b1c5
7 changed files with 51 additions and 15 deletions
+16 -6
View File
@@ -22,17 +22,27 @@ export default function ChatPopup({ sessionId: sessionIdProp }: ChatPopupProps =
chatMessages: realtimeMessages,
sendMessage,
currentUserId,
updateUserId,
} = useWebRTC();
// Получаем данные текущего пользователя (если авторизован)
// Получаем данные текущего пользователя
// React Query кэширует результат, поэтому множественные вызовы useMe() не приводят к множественным запросам
const { data: user } = useMe();
// currentUserId содержит либо userId (если авторизован), либо guestId (если гость)
// Это и есть наш идентификатор для сравнения с senderId в сообщениях
const myIdentifier = currentUserId;
// Обновляем userId в WebRTC сервисе при авторизации
useEffect(() => {
if (user?.id && updateUserId) {
console.log("[ChatPopup] User authenticated, updating WebRTC userId to:", user.id);
updateUserId(user.id);
}
}, [user?.id, updateUserId]);
// Определяем идентификатор для сравнения с senderId в сообщениях
// Приоритет: реальный userId (если авторизован), затем currentUserId (guestId)
const myIdentifier = user?.id || currentUserId;
console.log("[ChatPopup] Rendering with sessionId:", sessionId);
console.log("[ChatPopup] My identifier:", myIdentifier, "isAuthenticated:", !!user);
console.log("[ChatPopup] My identifier:", myIdentifier, "isAuthenticated:", !!user, "user.id:", user?.id, "currentUserId:", currentUserId);
// Загружаем историю через REST API
const { data: historyMessages = [], isLoading, error } = useChatHistory(sessionId);
@@ -209,7 +219,7 @@ function MessageItem({
<div className="break-words text-s 2xl:space-y-[0.278vw] space-y-1">
{!isFromMe && (
<div className="caption-s text-[#7B60F3]">
{senderName || "Guest"}
{senderName || "Гость"}
</div>
)}
<div className="whitespace-pre-wrap">{content}</div>
+6
View File
@@ -225,6 +225,11 @@ export const useWebRTC = (roomId?: string, autoJoin = false) => {
webrtcServiceInstance.updateSpeakingState(isSpeaking);
};
const updateUserId = (newUserId: string) => {
if (!webrtcServiceInstance) return;
webrtcServiceInstance.updateUserId(newUserId);
};
return {
localStream,
participants,
@@ -238,6 +243,7 @@ export const useWebRTC = (roomId?: string, autoJoin = false) => {
toggleVideo,
sendMessage,
updateSpeakingState,
updateUserId,
joinRoom,
leaveRoom,
};
+4 -4
View File
@@ -15,11 +15,11 @@ export const api = ky.create({
if (token) {
request.headers.set("Authorization", `Bearer ${token}`);
} else {
// Добавляем guestId только если пользователь НЕ авторизован
const guestId = getOrCreateGuestId();
request.headers.set("X-Guest-Id", guestId);
}
// Автоматически добавляем guestId для всех запросов
const guestId = getOrCreateGuestId();
request.headers.set("X-Guest-Id", guestId);
},
],
},
+12 -1
View File
@@ -146,6 +146,12 @@ export function createWebRTCService(callbacks: WebRTCCallbacks = {}) {
leaveRoom,
sendChatMessage,
updateSpeakingState,
updateUserId: (newUserId: string) => {
if (state) {
console.log("[WebRTC] Updating userId from", state.userId, "to", newUserId);
state.userId = newUserId;
}
},
getChatMessages: () => state?.chatMessages || [],
getCurrentUserId: () => state?.userId || "",
getParticipants: () => Array.from(state?.participants.values() || []),
@@ -856,11 +862,16 @@ function sendChatMessage(content: string, senderName?: string, isAuthenticated?:
if (!state || !content.trim() || !state.roomId) return;
console.log("📤 Sending message via Socket.IO:", content);
console.log("📤 isAuthenticated:", isAuthenticated, "state.userId:", state.userId);
// Определяем userId и guestId
// Определяем userId и guestId на основе реальной авторизации
// Если пользователь авторизован, state.userId содержит настоящий userId
// Если нет - state.userId содержит guestId
const userId = isAuthenticated ? state.userId : null;
const guestId = !isAuthenticated ? state.userId : null;
console.log("📤 Sending with userId:", userId, "guestId:", guestId);
// Отправляем сообщение через Socket.IO
state.socket.emit("chat-message", {
roomId: state.roomId,
+5
View File
@@ -27,10 +27,15 @@ import { useWebRTC } from "../hooks/useWebRTC";
import MicrophoneOffFilledIcon from "../components/icons/MicrophoneOffFilledIcon";
import VideoFilledIcon from "../components/icons/VideoFilledIcon";
import clsx from "clsx";
import { useMe } from "../hooks/useAuth";
function SessionPage() {
const { setPopup } = usePopupStore();
// Загружаем данные пользователя сразу при входе на страницу сессии
// React Query закэширует результат для использования в других компонентах
useMe();
const [isFullscreen, setIsFullscreen] = useState(false);
function toggleFullscreen() {
+2
View File
@@ -1,4 +1,6 @@
DATABASE_URL=postgres://postgres:v1sq3vD5faXL@194.26.138.94:5432/stream
JWT_SECRET=b5cf2bd3894fb24191f13dc9dddaeecccc92d0ee298e7ee41c2d0aab51c28fa1
# PORT=6000
# SOCKET_PORT=6001
PORT=3000
SOCKET_PORT=3001
+6 -4
View File
@@ -263,7 +263,7 @@ io.on("connection", (socket) => {
try {
// Определяем имя отправителя
const finalSenderName = senderName || "Guest";
const finalSenderName = senderName || "Гость";
console.log(
`[Chat] Preparing to save message with senderName: "${finalSenderName}"`
@@ -307,10 +307,11 @@ io.on("connection", (socket) => {
}
// Сохраняем сообщение в БД
// Приоритет: сначала userId (если авторизован), затем guestId (если гость)
const messageData = {
sessionId: roomId,
userId: userId || null, // null для анонимных пользователей
guestId: guestId || null, // ID гостя для неавторизованных
userId: userId || null, // userId для авторизованных пользователей
guestId: userId ? null : (guestId || null), // guestId только если нет userId
senderName: finalSenderName, // Имя отправителя
content,
type: "text" as const,
@@ -324,9 +325,10 @@ io.on("connection", (socket) => {
console.log(`[Chat] Message saved successfully:`, savedMessage);
// Формируем сообщение для отправки клиентам
// senderId - это либо userId (приоритет), либо guestId
const messageToSend = {
id: savedMessage.id,
senderId: userId || guestId,
senderId: savedMessage.userId || savedMessage.guestId,
senderName: savedMessage.senderName,
content: savedMessage.content,
timestamp: savedMessage.createdAt,