seb/reactShop
1
0
Fork 0
Code Issues Pull Requests Activity

refactor: optimize socket connection handling by removing polling transport and implementing lazy connection strategy in SocketManager for improved performance

Browse Source
This commit is contained in:
sebseb7
2025-07-23 07:29:15 +02:00
parent d8f438c3f3
commit bbd1371eb2
44 changed files with 206 additions and 407 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/App.js
View File

@@ -15,8 +15,6 @@ import Tooltip from "@mui/material/Tooltip";
import SmartToyIcon from "@mui/icons-material/SmartToy";
import PaletteIcon from "@mui/icons-material/Palette";
import SocketProvider from "./providers/SocketProvider.js";
import SocketContext from "./contexts/SocketContext.js";
import { CarouselProvider } from "./contexts/CarouselContext.js";
import config from "./config.js";
import ScrollToTop from "./components/ScrollToTop.js";
@@ -33,13 +31,9 @@ import MainPageLayout from "./components/MainPageLayout.js";
// TEMPORARILY DISABLE ALL LAZY LOADING TO ELIMINATE CircularProgress
import Content from "./components/Content.js";
import ProductDetailWithSocket from "./components/ProductDetailWithSocket.js";
import ProfilePageWithSocket from "./pages/ProfilePage.js";
import ProductDetail from "./components/ProductDetail.js";
import ProfilePage from "./pages/ProfilePage.js";
import ResetPassword from "./pages/ResetPassword.js";
// const Content = lazy(() => import(/* webpackChunkName: "content" */ "./components/Content.js"));
// const ProductDetailWithSocket = lazy(() => import(/* webpackChunkName: "product-detail" */ "./components/ProductDetailWithSocket.js"));
// const ProfilePageWithSocket = lazy(() => import(/* webpackChunkName: "profile" */ "./pages/ProfilePage.js"));
// const ResetPassword = lazy(() => import(/* webpackChunkName: "reset-password" */ "./pages/ResetPassword.js"));
// Lazy load admin pages - only loaded when admin users access them
const AdminPage = lazy(() => import(/* webpackChunkName: "admin" */ "./pages/AdminPage.js"));
@@ -77,26 +71,6 @@ const deleteMessages = () => {
window.chatMessages = [];
};
// Component to initialize telemetry service with socket
const TelemetryInitializer = ({ socket }) => {
const telemetryServiceRef = useRef(null);
useEffect(() => {
if (socket && !telemetryServiceRef.current) {
//telemetryServiceRef.current = new TelemetryService(socket);
//telemetryServiceRef.current.init();
}
return () => {
if (telemetryServiceRef.current) {
telemetryServiceRef.current.destroy();
telemetryServiceRef.current = null;
}
};
}, [socket]);
return null; // This component doesn't render anything
};
const AppContent = ({ currentTheme, onThemeChange }) => {
// State to manage chat visibility
@@ -164,9 +138,6 @@ const AppContent = ({ currentTheme, onThemeChange }) => {
// Check if we're in development mode
const isDevelopment = process.env.NODE_ENV === "development";
const {socket,socketB} = useContext(SocketContext);
console.log("AppContent: socket", socket);
return (
<Box
sx={{
@@ -179,7 +150,6 @@ const AppContent = ({ currentTheme, onThemeChange }) => {
}}
>
<ScrollToTop />
<TelemetryInitializer socket={socket} />
<Header active categoryId={categoryId} key={authVersion} />
<Box sx={{ flexGrow: 1 }}>
<Suspense fallback={
@@ -213,19 +183,19 @@ const AppContent = ({ currentTheme, onThemeChange }) => {
{/* Category page - Render Content in parallel */}
<Route
path="/Kategorie/:categoryId"
element={<Content socket={socket} socketB={socketB} />}
element={<Content/>}
/>
{/* Single product page */}
<Route
path="/Artikel/:seoName"
element={<ProductDetailWithSocket />}
element={<ProductDetail/>}
/>
{/* Search page - Render Content in parallel */}
<Route path="/search" element={<Content socket={socket} socketB={socketB} />} />
<Route path="/search" element={<Content/>} />
{/* Profile page */}
<Route path="/profile" element={<ProfilePageWithSocket />} />
<Route path="/profile" element={<ProfilePage/>} />
{/* Payment success page for Mollie redirects */}
<Route path="/payment/success" element={<PaymentSuccess />} />
@@ -233,17 +203,17 @@ const AppContent = ({ currentTheme, onThemeChange }) => {
{/* Reset password page */}
<Route
path="/resetPassword"
element={<ResetPassword socket={socket} socketB={socketB} />}
element={<ResetPassword/>}
/>
{/* Admin page */}
<Route path="/admin" element={<AdminPage socket={socket} socketB={socketB} />} />
<Route path="/admin" element={<AdminPage/>} />
{/* Admin Users page */}
<Route path="/admin/users" element={<UsersPage socket={socket} socketB={socketB} />} />
<Route path="/admin/users" element={<UsersPage/>} />
{/* Admin Server Logs page */}
<Route path="/admin/logs" element={<ServerLogsPage socket={socket} socketB={socketB} />} />
<Route path="/admin/logs" element={<ServerLogsPage/>} />
{/* Legal pages */}
<Route path="/datenschutz" element={<Datenschutz />} />
@@ -257,7 +227,7 @@ const AppContent = ({ currentTheme, onThemeChange }) => {
<Route path="/widerrufsrecht" element={<Widerrufsrecht />} />
{/* Grow Tent Configurator */}
<Route path="/Konfigurator" element={<GrowTentKonfigurator socket={socket} socketB={socketB} />} />
<Route path="/Konfigurator" element={<GrowTentKonfigurator/>} />
{/* Separate pages that are truly different */}
<Route path="/presseverleih" element={<PresseverleihPage />} />
@@ -285,7 +255,6 @@ const AppContent = ({ currentTheme, onThemeChange }) => {
<ChatAssistant
open={isChatOpen}
onClose={handleChatClose}
socket={socket}
/>
</Suspense>
)}
@@ -390,34 +359,10 @@ const App = () => {
<LanguageProvider i18n={i18n}>
<ThemeProvider theme={dynamicTheme}>
<CssBaseline />
<SocketProvider
url={config.apiBaseUrl}
fallback={
typeof window !== "undefined" && window.__PRERENDER_FALLBACK__ ? (
<div
dangerouslySetInnerHTML={{
__html: window.__PRERENDER_FALLBACK__.content,
}}
/>
) : (
<Box
sx={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100vh",
}}
>
<CircularProgress color="primary" />
</Box>
)
}
>
<AppContent
currentTheme={currentTheme}
onThemeChange={handleThemeChange}
/>
</SocketProvider>
</ThemeProvider>
</LanguageProvider>
);