The Power of Real-time Data Transfer of WebSockets in React

Example of WebSocket

import React, { useEffect, useState, useCallback, useRef } from "react";

const socketUrl = `wss://127.0.0.1:8080'127.0.0.1:8080/ws/chat/${appointment?.id}/`;

const Chat =(postChatDetails ) => {
 const [message, setMessage] = useState([]);
 const [messages_array, setMessagesArray] = useState([]);
 const [onMessage, setOnMessage] = useState(true);
 const [sender_array, setSenderMessagesArray] = useState([]);
 const [updated_chat, setUpdatedChat] = useState([]);
useEffect(() => {
// here you can set the any previous chat history

   setUpdatedChat(messages_array);
     const parsedData = JSON.parse(postChatDetails["message"]);
 
// Login as per Requirement
     if (parsedData) {
       parsedData.map(k => {
         updated_chat.push(k);
       });

       setMessagesArray(updated_chat);
     }
   //eslint-disable-next-line
 }, []);

useEffect(() => {
// Socket connection
   socket.onopen = () => {
     console.log("connected");
   };
   socket.onmessage = e => {
     const data = JSON.parse(e.data);
     setMessage(data);
     const text = data["message"];
 
// Login as per Requirement
     if (userData?.user != text["userId"]) {
       updateState(true);
     }

     if (onMessage && userData?.user != text["userId"]) {
       if (updated_chat) {
         updated_chat.push(text);
       }
       updateMessage(updated_chat);
     }
   };
// Calls if any Error occurs and socket close 
   socket.onerror = error => {
     console.log("WebSocket Error " + error);
     socket.close();
   };
 }, []);

// I have written separate useEffect for close connection as per condition you write in previous useEffect also 
 useEffect(() => {
   return () => {
     socket.close();

     if (updatedDate && current_date && updatedDate > current_date) {
       if (updated_chat && appointment?.chat_ids) {
         updateChatDetail(appointment?.chat_ids[0]["id"], sender_array);
       }
       window.location.reload();
     }
   };

   //eslint-disable-next-line
 }, [socket.close]);

// Design will be written as you can I’m skipping design code 
 return (
     <div>
// Some code here
         <Container fluid="md">
           {messages_array &&
             messages_array?.map((test, index) => {
               return (
                 <Row key={index}>
                   <Col>
                     <div
                       style={{
                         textAlign:
                      userData?.user == test.userId ? "right" : "left",
                       }}
                     >
               <span style={{ fontSize: "13px" }}>{test.name}</span>{" "}
                       <br />
                       <span
                         style={{
                           border: "1px solid",
                           padding: "2px 15px 3px 7px",
                           borderRadius: "6px",
                           color: "var(--icon-color)",
                           fontSize: "16px",
                           overflowWrap: "break-word",
                         }}
                       >
                    {test.isDocument ? (
                           <a href={test.message} target="_blank">
                             <AppointmentIcon type="documentIconAfterCall" />
                             {test.message?.split("/")?.pop()}
                           </a>
                         ) : (
                           test.message
                         )}
                       </span>
                       <br />
                       <span style={{ fontSize: "13px" }}>
                         {message &&
                           test.dateTime &&
                           format(
                             parseDateToLocal(test.dateTime),
                             "dd MMM HH:mm a"
                           )}
                       </span>
                     </div>
                   </Col>
                 </Row>
               );
             })}
         </Container>
// Some code here
     </div>
   )
}
 export default Chat;