feat(socket): create socket.io connection b/w server for real time chat

app/components/SingleChat.tsx

@@ -8,13 +8,19 @@ import { SERVER_URL } from "@/utils/global";
 import { ChatState } from "@/contexts/ChatProvider";
 import ScrollableChat from "./ScrollableChat";
 import { MessageData } from "@/types";
+import io, { Socket } from "socket.io-client";
+
+const ENDPOINT = SERVER_URL;
+let socket: Socket;
 
 const SingleChat = () => {
   const { isDark } = useContext(DarkLightModeContext)!;
   const { user, selectedChat } = ChatState()!;
   const [messages, setMessages] = useState<MessageData[]>([]);
   const [loading, setLoading] = useState(false);
   const [newMessage, setNewMessage] = useState("");
+  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+  const [socketConnected, setSocketConnected] = useState(false);
 
   const sendMessage = async (event: React.KeyboardEvent<HTMLElement>) => {
     if (event.key === "Enter" && newMessage) {
@@ -70,6 +76,12 @@ const SingleChat = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedChat]);
 
+  useEffect(() => {
+    socket = io(ENDPOINT);
+    socket.emit("setup", user);
+    socket.on("connection", () => setSocketConnected(true));
+  }, [user]);
+
   return (
     <>
       {loading ? (