IO-2935-Add-Enhanced-Websocket-Provider - Add another web socket provider, front end wiring, vite wiring (proxy and secure vite), bumped deps

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/contexts/SocketIO/socketContext.jsx

@@ -0,0 +1,13 @@
+import React, { createContext } from "react";
+import useSocket from "./useSocket"; // Import the custom hook
+
+// Create the SocketContext
+const SocketContext = createContext(null);
+
+export const SocketProvider = ({ children, bodyshop }) => {
+  const { socket, clientId } = useSocket(bodyshop);
+
+  return <SocketContext.Provider value={{ socket, clientId }}> {children}</SocketContext.Provider>;
+};
+
+export default SocketContext;

client/src/contexts/SocketIO/useSocket.js

@@ -0,0 +1,71 @@
+import { useEffect, useState } from "react";
+import SocketIO from "socket.io-client";
+import { auth } from "../../firebase/firebase.utils";
+
+const useSocket = (bodyshop) => {
+  const [socket, setSocket] = useState(null);
+  const [clientId, setClientId] = useState(null); // State to store unique identifier
+
+  useEffect(() => {
+    if (bodyshop && bodyshop.id) {
+      const endpoint = import.meta.env.PROD ? import.meta.env.VITE_APP_AXIOS_BASE_API_URL : "https://localhost:3000";
+
+      const socketInstance = SocketIO(endpoint, {
+        path: "/wss", // Ensure this matches the Vite proxy and backend path
+        withCredentials: true,
+        auth: async (callback) => {
+          const token = auth.currentUser && (await auth.currentUser.getIdToken());
+          callback({ token });
+        },
+        reconnectionAttempts: Infinity, // Try reconnecting forever
+        reconnectionDelay: 2000, // How long to wait between reconnection attempts
+        reconnectionDelayMax: 10000 // Maximum delay between attempts
+      });
+
+      setSocket(socketInstance);
+
+      const handleBodyshopMessage = (message) => {
+        console.log(`Received message for bodyshop ${bodyshop.id}:`, message);
+      };
+
+      const handleConnect = () => {
+        console.log("Socket connected:", socketInstance.id);
+        socketInstance.emit("join-bodyshop-room", bodyshop.id);
+        setClientId(socketInstance.id);
+      };
+
+      const handleReconnect = (attempt) => {
+        console.log(`Socket reconnected after ${attempt} attempts`);
+      };
+
+      const handleConnectionError = (err) => {
+        console.error("Socket connection error:", err);
+      };
+
+      const handleDisconnect = () => {
+        console.log("Socket disconnected");
+      };
+
+      socketInstance.on("connect", handleConnect);
+      socketInstance.on("reconnect", handleReconnect);
+      socketInstance.on("connect_error", handleConnectionError);
+      socketInstance.on("disconnect", handleDisconnect);
+      socketInstance.on("bodyshop-message", handleBodyshopMessage);
+
+      return () => {
+        socketInstance.emit("leave-bodyshop-room", bodyshop.id);
+        socketInstance.off("connect", handleConnect);
+        socketInstance.off("reconnect", handleReconnect);
+        socketInstance.off("connect_error", handleConnectionError);
+        socketInstance.off("disconnect", handleDisconnect);
+        socketInstance.off("bodyshop-message", handleBodyshopMessage);
+        socketInstance.disconnect();
+      };
+    }
+  }, [bodyshop]);
+
+  // Return both socket and clientId
+  return { socket, clientId };
+};
+
+export default useSocket;