54 lines
1.8 KiB
Markdown
54 lines
1.8 KiB
Markdown
# Schnellstart
|
|
|
|
## Voraussetzungen
|
|
|
|
1. **Node.js herunterladen**: [nodejs.org](https://nodejs.org) - LTS-Version installieren
|
|
2. **VSCode herunterladen**: [code.visualstudio.com](https://code.visualstudio.com) - Stabile Version installieren
|
|
|
|
[ZIP herunterladen](https://github.com/Growheads-de/shopFrontEnd/archive/refs/heads/live.zip)
|
|
|
|
Entpacken & Doppelklick auf `start-dev-seedheads.bat` - das Skript wird:
|
|
- Abhängigkeiten automatisch installieren falls nötig
|
|
- Entwicklungsserver mit API-Proxy zu seedheads.de starten
|
|
- Browser öffnen auf http://localhost:9500
|
|
|
|
## Socket Connection Optimization
|
|
|
|
The application uses Socket.IO for real-time communication with the server. To improve initial loading performance, sockets are now connected lazily:
|
|
|
|
- Sockets are created with `autoConnect: false` and only establish a connection when:
|
|
- The first `emit` is called on the socket
|
|
- An explicit connection is requested via the context methods
|
|
|
|
### Usage
|
|
|
|
```jsx
|
|
// In a component
|
|
import React, { useContext, useEffect } from 'react';
|
|
import SocketContext from '../contexts/SocketContext';
|
|
import { emitAsync } from '../utils/socketUtils';
|
|
|
|
const MyComponent = () => {
|
|
const { socket, socketB } = useContext(SocketContext);
|
|
|
|
useEffect(() => {
|
|
// The socket will automatically connect when emit is called
|
|
socket.emit('someEvent', { data: 'example' });
|
|
|
|
// Or use the utility for Promise-based responses
|
|
emitAsync(socket, 'getData', { id: 123 })
|
|
.then(response => console.log(response))
|
|
.catch(error => console.error(error));
|
|
}, [socket]);
|
|
|
|
return <div>My Component</div>;
|
|
};
|
|
```
|
|
|
|
### Benefits
|
|
|
|
- Reduced initial page load time
|
|
- Connections established only when needed
|
|
- Automatic fallback to polling if WebSocket fails
|
|
- Promise-based utilities for easier async/await usage
|