Application with Nginx, NodeJs and React Very Slow - Impossible to Use

[tallesfsilva]

Hi guys,

I was trying to deploy an application using NGINX, React and NodeJS and it gets very slow when many clients are connected. The application consists in one page which list all chats and receives updates and other which is opened when the client clicks on the chat and open it. When the client clicks on the chat it gets very slow to connect and retrieve the data. I have a provider with socket io for the rest of applicaiton and one local instance of socketio connection inside the chat page. I have tried many approaches (namespaces for chats), set up NGINX config for high load, refactor the function in reac which connects to the sockett, but nothing worked.

So, I'd like to ask. for help, because I think the issue could be in the React hook. We used Firestore Cloud, so the application was very fast, after migrating to socket io and many changings and approaches, nothing seems to work.

Socke function:

 

let socket = null as any;

 

export const getSocketInstance = (): Socket | any => {
 
 
  const token = localStorage.getItem('@UserData:accessToken');
  const user = localStorage.getItem('@UserData:user');

 
    const ns = user ? JSON.parse(user).company_id : null;
    const URL = import.meta.env.VITE_API_URL+ns;


  if(socket && socket?.connected){
  
    return socket
  } 
   
  if (!socket) {   
    socket = io(URL, { 
      reconnection: true,
      reconnectionDelay: 1000,  
      reconnectionDelayMax : 5000,
      transports: ['websocket'],
      forceNew: false,
      reconnectionAttempts: Infinity,
      auth: {
        token: token,
        company_id: user? JSON.parse(user).company_id : null
      } ,

    });

    socket.on('connect', ()=>{
      console.log("Connected with: ", socket.id)
 
    })
 
    return socket as Socket
}
  


}


export const disconnectSocket = (namespace:string) => {
   
  
  if (socket && namespace) {

   
        socket.disconnect();
        socket = null;
      
    }
 
  };`
  
  Hook who uses it:

`
 


export const useMessage = (chatId: string) => {
  const [messages, setMessages] = useState<IMessages[]>([]);
  const [chat, setChat] = useState<any>([]);
 
 
 
  const [filtersMongo, setFiltersMongo] = useState<any>();
  const [eventType, setEventType] = useState<string>(WhisperType.AllMessages);
  const events = [
    WhisperType.AllMessages,
    WhisperType.ChannelTransfer,
    WhisperType.ReadMessage,
    WhisperType.ResponsibleTransfer,
    WhisperType.ScheduleEvent,
    WhisperType.SectorTransfer,
  ];
  const [isLoading, setIsLoading] = useState<boolean>(false);
  
  
 
  const socket = getSocketInstance();

 
  useEffect(() => {
   
 
    
    if (!chatId) {
  
       return;
    }
  
   

    const handleSubscribedChat =  (data: any) => {
    
      if (data && data.chat != null && data.chat.id === chatId) {
      
        setChat(data.chat);
      } else {
        return;
      }
    };
 

 
      socket.emit('SUBSCRIBE_TO_CHAT', { chat_id: chatId });
      const unsubscribe =  () => {
    
        socket.on('SUBSCRIBED_TO_CHAT', handleSubscribedChat);
   
   
 
  

  
  }
  unsubscribe();
    return () => {
 
        socket.off('SUBSCRIBED_TO_CHAT', handleSubscribedChat);
   
   

   
    };
  }, [chatId]);

  const convertToTime = (time: any) => {
 
    if (time) {
      const date = new Date(time as string);
      const timeFormat = isToday(date) ? 'HH:mm' : 'HH:mm';
      return format(date, timeFormat);
    }
 

 

    const date = new Date(time);
    const timeFormat = isToday(date) ? 'HH:mm' : 'HH:mm';
    return format(date, timeFormat);
  };
  const buildMessageWithSection = (
    messages: Array<IMessages & { created_at: string }>,
  ) => {
    const messageWithSection = messages?.map((message, index, arr) => {
      const previousMessage = arr[index - 1];
   

      const firebaseTimestampCurrent =  new Date(message?.created_at as string)

      const firebaseTimestampPrevious =  new Date(previousMessage?.created_at as string);

      const previousDate = firebaseTimestampPrevious ;

      const currentDate =  firebaseTimestampCurrent;

      const shouldSection =  !isSameDay(previousDate, currentDate);
      
 

      if (shouldSection) {
        if (isToday(currentDate)) {
          return {
            ...message,
            section: 'Hoje',
          };
        }
        if ( isYesterday(currentDate)) {
          return {
            ...message,
            section: 'Ontem',
          };
        }

        return {
          ...message,
          section:format(currentDate, 'dd/MM/yyyy'),
        };
      }

      return message;
    });

    return messageWithSection;
  };

  const useSocketEmitter = (socket: any, query: any) => {
    if (socket) {
      socket.emit('SUBSCRIBE_CHAT_MESSAGES', query);
 
    }
  };


  useEffect(() => {

 
 
    if (!chat || !socket) {
      return;
    }

 
 
    let filtersMongo = {} as any;

    if (
      eventType &&
      eventType != WhisperType.AllMessages &&
      eventType != undefined &&
      eventType != WhisperType.AllEvents
    ) {
      filtersMongo = {
        chat_id: chatId,
        whisper_type: eventType,
      };
    } else if (eventType && eventType == WhisperType.AllEvents) {
      filtersMongo = {
        chat_id: chatId,
        whisper_type: { $in: events },
      };
    } else {
      filtersMongo = {
        chat_id: chatId,
      };
    }

    setFiltersMongo(filtersMongo);

    const handleChatMessages = (data: any) => {
      
   
      if (eventType != WhisperType.AllMessages && data.messages.length === 0) {
        setIsLoading(true);
        return;
      } 
 
 
      if (data.messages.length > 0) {
 

        const sortedMessagesWithSection =
          buildMessageWithSection(data.messages);

        const mappedMessages = sortedMessagesWithSection?.map(
          (message: any) => ({
            ...message,
            created_at: convertToTime(message.created_at),
          }),
        );

        setMessages(mappedMessages);

    
      }
    };
 
    useSocketEmitter(socket, filtersMongo);
    const unsubscribe = () => {
 
      socket.once('SUBSCRIBED_CHAT_MESSAGES', handleChatMessages);
       
    }

    unsubscribe();

 
   
  
 
 
    return () => {
 


     
    
        socket.off('SUBSCRIBED_CHAT_MESSAGES', handleChatMessages);
       
      
   

    };
  }, [chat, eventType]);
 

  useEffect(()=>{

      return()=>{
        if(socket){
          socket?.emit('LEAVE_CHAT', { chat_id: chatId });
         
            
        }
    
   
      }


  },[])


  return {
    setMessages,
    eventType,
    setChat,
    setEventType,
    messages,
    chat,
    isLoading,
    setIsLoading,
    filtersMongo,
  
   
 
  };
};

Edit by @darrachequesne: format

[darrachequesne]

Hi! Your client code seems reasonable.

I'd say it could come:

• from your connection: latency? bandwidth?
• from your server: load? number of messages received/sent per second?

Edit: I see the discussion is closed, were you able to find the culprit?