admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Normalize SocketIO App wide.

Browse Source 
Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
2024-09-10 16:23:38 -04:00
parent ea0a717895
commit 9a0d973b26
6 changed files with 202 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
client/src/pages/manage/manage.page.component.jsx
View File

@@ -1,6 +1,6 @@
import { FloatButton, Layout, Spin } from "antd";
// import preval from "preval.macro";
import React, { lazy, Suspense, useEffect, useState } from "react";
import React, { lazy, Suspense, useContext, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { Link, Route, Routes } from "react-router-dom";
@@ -18,13 +18,12 @@ import LoadingSpinner from "../../components/loading-spinner/loading-spinner.com
import PartnerPingComponent from "../../components/partner-ping/partner-ping.component";
import PrintCenterModalContainer from "../../components/print-center-modal/print-center-modal.container";
import ShopSubStatusComponent from "../../components/shop-sub-status/shop-sub-status.component";
import { auth } from "../../firebase/firebase.utils";
import { selectBodyshop, selectInstanceConflict } from "../../redux/user/user.selectors";
import UpdateAlert from "../../components/update-alert/update-alert.component";
import InstanceRenderManager from "../../utils/instanceRenderMgr.js";
import "./manage.page.styles.scss";
import SocketIO from "socket.io-client";
import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
const JobsPage = lazy(() => import("../jobs/jobs.page"));
@@ -111,47 +110,7 @@ const mapDispatchToProps = (dispatch) => ({});
export function Manage({ conflict, bodyshop }) {
const { t } = useTranslation();
const [chatVisible] = useState(false);
const [socket, setSocket] = useState(null); // State for Socket.IO connection
useEffect(() => {
if (bodyshop && bodyshop.id) {
const endpoint = import.meta.env.PROD ? import.meta.env.VITE_APP_AXIOS_BASE_API_URL : "https://localhost:3000"; // Use Vite proxy in development
const socketInstance = SocketIO(endpoint, {
path: "/ws", // Ensure this matches the Vite proxy and backend path
withCredentials: true,
auth: async (callback) => {
const token = auth.currentUser && (await auth.currentUser.getIdToken());
callback({ token });
}
});
setSocket(socketInstance);
socketInstance.on("connect", () => {
console.log("Socket connected:", socketInstance.id);
socketInstance.emit("join-bodyshop-room", bodyshop.id);
});
socketInstance.on("bodyshop-message", (message) => {
console.log(`Received message for bodyshop ${bodyshop.id}:`, message);
});
socketInstance.on("connect_error", (err) => {
console.error("Socket connection error:", err);
});
socketInstance.on("disconnect", () => {
console.log("Socket disconnected");
});
return () => {
socketInstance.emit("leave-bodyshop-room", bodyshop.id);
socketInstance.off("bodyshop-message");
socketInstance.disconnect();
};
}
}, [bodyshop]);
const { socket, clientId } = useContext(SocketContext);
useEffect(() => {
document.title = InstanceRenderManager({
@@ -161,6 +120,27 @@ export function Manage({ conflict, bodyshop }) {
});
}, [t]);
useEffect(() => {
if (socket && bodyshop && bodyshop.id) {
const handleConnect = () => {
socket.emit("join-bodyshop-room", bodyshop.id);
};
const handleBodyshopMessage = (message) => {
console.log(`Received message for bodyshop ${bodyshop.id}:`, message);
};
socket.on("connect", handleConnect);
socket.on("bodyshop-message", handleBodyshopMessage);
return () => {
socket.emit("leave-bodyshop-room", bodyshop.id);
socket.off("connect", handleConnect);
socket.off("bodyshop-message", handleBodyshopMessage);
};
}
}, [socket, bodyshop]);
const AppRouteTable = (
<Suspense
fallback={
@@ -603,8 +583,8 @@ export function Manage({ conflict, bodyshop }) {
const broadcastMessage = () => {
if (socket && bodyshop && bodyshop.id) {
socket.emit("broadcast-to-bodyshop", bodyshop.id, "Hello");
console.log(`Broadcasting message to bodyshop ${bodyshop.id}: ${"hello"}`);
console.log(`Broadcasting message to bodyshop ${bodyshop.id}:`);
socket.emit("broadcast-to-bodyshop", bodyshop.id, `Hello from ${clientId}`);
}
};