src/app/_providers/webSocketProvider/client/WebSocketProvider.tsx - master - viktorphp/front-socket

src/app/_providers/webSocketProvider/client/WebSocketProvider.tsx
131 строка5 KB
Viktorphp84
feature-socket: add docker files, fix middleware import errors
22 июн 2025, 11:39
22 июн 2025, 11:396d27fa4
'use client';

import { ReactNode, useEffect } from 'react';

import { useUserStore } from '@entities/user';
import { useWebSocketStore } from '@entities/webSocket';
import { socketService } from '@shared/api/socket';
import { IMessage } from '@shared/types';

export const WebSocketProvider = ({ children }: { children: ReactNode }) => {
  const { user } = useUserStore((state) => state);

  useEffect(() => {
    // Если пользователь залогинен и получен его id
    if (user?.id) {
      // Подключение к сокету
      socketService.connect((data) => {
        if (data.status === 'success') {
          useWebSocketStore.getState().setUserId(data.user.id);
        }
      });
    } else {
      // Удаление сокета
      socketService.disconnect();
    }

    // Подписка на connect
    const unsubscribeOnConnect = socketService.onConnect(() => {
      socketService.sendGetChats();
    });

    // Подписка на disconnect
    const unsubscribeOnDisconnect = socketService.onDisconnect(() => {
      socketService.sendGetChats();
    });

    // Подписка на получение списка чатов
    const unsubscribeOnChatList = socketService.onChatsList((data) => {
      if (data.status === 'success') {
        useWebSocketStore.getState().setChats(data.chats);

        const hasUnreadMessage = data.chats.some(
          (chat) => chat.unreadCount > 0
        );

        // Установка параметра, означающего, что получено новое сообщение
        if (hasUnreadMessage)
          useWebSocketStore.getState().setHasNewMessage(true);
      } else {
        console.error('Ошибка получения списка чатов', data);
      }
    });

    // Подписка на получение списка предыдущих сообщений.
    // Ожидаем, что сервер отправит данные в объекте { messages: [...] }
    const unsubscribeOnConversationList = socketService.onConversationList(
      (data: { status: string; messages: IMessage[] }) => {
        if (data.status === 'success') {
          useWebSocketStore.getState().setMessages(data.messages);
        } else {
          console.error('Ошибка получения истории сообщений', data);
        }
      }
    );

    const unsubscribeOnReceiptMessage = socketService.onReceiptMessage(
      (data) => {
        const { messages } = useWebSocketStore.getState();

        // Обновляем состояние с новыми сообщениями
        if (data.message) {
          useWebSocketStore
            .getState()
            .setMessages([...(messages ?? []), data.message]);

          socketService.sendGetChats();
        }
      }
    );

    const unsubscribeOnSendingMessage = socketService.onSendingMessage(
      (data) => {
        const { messages } = useWebSocketStore.getState();

        // Обновляем состояние с новыми сообщениями
        if (messages)
          useWebSocketStore.getState().setMessages([...messages, data.message]);
        // Сразу обновляем список чатов
        socketService.sendGetChats();
      }
    );

    // Подписка на результаты поиска пользователей
    const unsubscribeOnUserSearch = socketService.onUserSearch((data) => {
      if (data.status === 'success') {
        useWebSocketStore.getState().setFoundUsers(data.users);
      } else {
        console.error('Ошибка поиска пользователя', data);
      }
    });

    // Подписка на событие обновления в списке чатов поля isRead
    const unsubscribeOnUpdateIsRead = socketService.onUpdateIsRead((data) => {
      if (data.status === 'success') {
        // Обновляем список чатов
        socketService.sendGetChats();
      } else {
        console.error('Ошибка обновления поля isRead', data);
      }
    });

    // Запрашиваем список чатов сразу после подключения
    socketService.sendGetChats();

    return () => {
      /** Отмена подписок при размонтировании компонента */
      unsubscribeOnChatList();
      unsubscribeOnConversationList();
      unsubscribeOnReceiptMessage();
      unsubscribeOnSendingMessage();
      unsubscribeOnUserSearch();
      unsubscribeOnUpdateIsRead();
      unsubscribeOnConnect();
      unsubscribeOnDisconnect();
      /** Отключение от сокета при размонтировании компонента */
      socketService.disconnect();
    };
  }, [user?.id]);

  return <>{children}</>;
};