feat: implement shared port configuration and dynamic port selection for WebSocket server

Author: H1B0B0

.github/workflows/python-package.yml

@@ -121,111 +121,53 @@ jobs:
           prerelease: ${{ steps.get_version.outputs.IS_PRERELEASE }}
 
           body: |
-            # 🚀 KickViewerBOT Beta V3 - Major Architecture Upgrade
-
-            ## 🏗️ Revolutionary Architecture Redesign
-
-            **Beta V3 introduces a complete architectural overhaul** that separates the frontend and backend into distinct services, bringing enterprise-grade reliability and developer flexibility to KickViewerBOT!
-
-            ### ⚡ New Client-Server Architecture
-
-            **What Changed:**
-            - **Frontend:** Now runs as a standalone web server (Next.js)
-            - **Backend:** Operates as a local service on your PC
-            - **Communication:** Real-time WebSocket connection between frontend and backend
-            - **Result:** Modern, scalable, and incredibly responsive architecture
-
-            ### 🎯 Why This Matters for You
-
-            **Enhanced Reliability:**
-            - 🔒 **More Stable Connections:** WebSocket-based communication ensures consistent real-time updates
-            - 🔄 **Auto-Reconnection:** Frontend automatically reconnects if connection drops
-            - 📊 **Better Error Handling:** Isolated services mean one component failure doesn't crash the entire app
-            - ⚡ **Faster Response Times:** Dedicated server processes improve overall performance
-
-            **Superior Developer Experience:**
-            - 🛠️ **Independent Updates:** Frontend and backend can be updated separately
-            - 🧪 **Easier Testing:** Each component can be tested in isolation
-            - 🚀 **Faster Development:** Hot reload and modern dev tools for quicker iterations
-            - 🎨 **Better UI Framework:** Next.js provides cutting-edge web capabilities
-
-            **Future-Proof Foundation:**
-            - 📱 **Multi-Platform Ready:** Architecture supports future mobile apps or web dashboard
-            - 🌐 **Remote Access Potential:** Foundation for future remote monitoring features
-            - 🔌 **Plugin System Ready:** Modular design enables future extensibility
-            - 📈 **Scalability:** Can handle more viewers and features without performance degradation
-
-            ### 🔧 Technical Highlights
-
-            **Backend Service:**
-            - Python-based local service handling all bot operations
-            - WebSocket server on port 8080 for real-time communication
-            - Improved proxy management and connection stability
-            - Enhanced logging and debugging capabilities
-
-            **Frontend Application:**
-            - Next.js 15 with React 18 for modern UI
-            - Real-time WebSocket client for instant updates
-            - Beautiful glassmorphism design with smooth animations
-            - Dark/Light theme support with automatic detection
-            - Responsive design for all screen sizes
-
-            **Communication Layer:**
-            - Bidirectional WebSocket protocol
-            - JSON-based message format for clarity
-            - Automatic reconnection with exponential backoff
-            - Health monitoring and status indicators
-
-            ### 🎨 User Experience Improvements
-
-            **Visual Enhancements:**
-            - ✨ Smooth page transitions and animations
-            - 🎯 Real-time stats updates with no lag
-            - 📊 Better data visualization
-            - 🔔 Smart update notifications (non-intrusive toasts)
-            - 🌈 Adaptive theming for better readability
-
-            **Monitoring Features:**
-            - 📈 Live viewer count tracking
-            - 🔄 Connection status indicators
-            - ⚙️ Advanced settings panel
-            - 📊 Performance metrics dashboard
-            - 🎮 Streamlined bot controls
-
-            ### 🐛 Bug Fixes & Improvements
-
-            - ✅ Fixed connection stability issues
-            - ✅ Improved error recovery mechanisms
-            - ✅ Enhanced proxy rotation logic
-            - ✅ Better memory management
-            - ✅ Resolved UI state synchronization issues
-            - ✅ Fixed update checker notification persistence
-
-            ### ⚠️ Breaking Changes
-
-            **Important Notes:**
-            - This is a **beta release** - please report any issues on GitHub
-            - The new architecture requires both frontend and backend to run together
+            # 🚀 KickViewerBOT – Smarter, Simpler, More Reliable!
+
+            ## ✨ What’s New in This Release?
+
+            ### 🔥 Next-Level Connectivity & User Experience
+
+            - **Automatic Port Discovery:** No more port conflicts! The backend now scans and selects an available port for you. The frontend instantly detects and connects—no manual setup, no headaches.
+            - **Seamless Frontend-Backend Sync:** Both parts of the app share a single, smart configuration. You can move, restart, or run multiple instances—KickViewerBOT adapts instantly.
+            - **Crystal-Clear Error Messages:** If a port is busy, you get a friendly message and a clear solution. No more cryptic errors!
+            - **Zero Config, Zero Stress:** All connection URLs and ports are generated and synchronized automatically. Just launch and go!
+            - **Rock-Solid Reliability:** Even if your environment changes, KickViewerBOT keeps running and reconnects without user intervention.
+
+            ### 🔧 Under the Hood
+
+            - **Unified Port Management:** Both backend and frontend use a shared config for all connection logic. No more mismatches or manual edits.
+            - **Smarter Startup:** The backend tries a list of recommended ports and picks the first available. The frontend scans the same list, so you always connect on the first try.
+            - **Enhanced Logging:** Startup and error logs are now clear, actionable, and user-friendly.
+
+            ### 🔍 Why You’ll Love This Update
+
+            - **Plug & Play:** Download, run, and you’re online—no technical skills required.
+            - **No More “Port Already in Use” Errors:** The app handles everything for you, even if you have other services running.
+            - **Future-Proof:** This foundation makes future updates, remote access, and multi-instance support a breeze.
 
             ---
 
-            ## 📥 Download & Installation
+            ## 🐛 Bug Fixes & Improvements
 
-            **This is the biggest update to KickViewerBOT ever!**
+            - Improved connection stability and error handling
+            - Automatic frontend-backend sync for all connection settings
+            - Clearer logs and user feedback on startup
+            - Unified configuration for easier maintenance
+
+            ---
 
-            The new architecture provides a solid foundation for years of future improvements while delivering better performance and reliability today.
+            ## 📥 How to Get Started
 
-            ### Getting Started:
-            1. Download the appropriate version for your OS
-            2. Run the application (both services start automatically)
-            3. Access the interface (opens automatically in your browser)
-            4. Enjoy the enhanced experience!
+            1. Download the version for your OS
+            2. Run the app (both services start automatically)
+            3. The interface opens in your browser—no setup required!
+            4. Enjoy a smoother, smarter KickViewerBOT experience 🚀
 
-            **Need Help?** Check out our [GitHub Issues](https://github.com/H1B0B0/Kick-Viewerbot/issues) or join our community!
+            **Need help?** [Open an issue](https://github.com/H1B0B0/Kick-Viewerbot/issues) or join our community!
 
             ---
 
-            *Thank you for being part of the KickViewerBOT Beta program! Your feedback helps make this tool better for everyone.* 🙏
+            *Thank you for supporting KickViewerBOT! Your feedback drives every improvement.* 🙏
 
           draft: false
 

backend/main.py

@@ -382,23 +382,68 @@ def index():
 # Main
 # ============================================
 
+def find_available_port(preferred_ports, host='0.0.0.0'):
+    """Trouve un port disponible parmi la liste fournie"""
+    import socket
+
+    for port in preferred_ports:
+        try:
+            # Tester si le port est disponible
+            sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
+            sock.settimeout(1)
+            result = sock.connect_ex((host if host != '0.0.0.0' else 'localhost', port))
+            sock.close()
+
+            if result != 0:  # Port disponible
+                return port
+        except Exception as e:
+            logger.debug(f"Error testing port {port}: {e}")
+            continue
+
+    # Si aucun port de la liste n'est disponible, laisser le système en choisir un
+    return None
+
 if __name__ == '__main__':
     import argparse
     import webbrowser
     from threading import Timer
 
+    # Import shared port configuration
+    sys.path.insert(0, str(Path(__file__).parent.parent))
+    try:
+        from shared_config import AVAILABLE_PORTS, DEFAULT_HOST
+    except ImportError:
+        logger.warning("Could not import shared_config, using defaults")
+        AVAILABLE_PORTS = [8765, 9876, 7890, 6543, 5432, 8081, 8082, 8083]
+        DEFAULT_HOST = '0.0.0.0'
+
     parser = argparse.ArgumentParser()
-    parser.add_argument('--port', type=int, default=8080, help='Port to run on')
-    parser.add_argument('--host', default='0.0.0.0', help='Host to bind to')
+    parser.add_argument('--port', type=int, default=None, help='Port to run on (if not specified, will try from the available list)')
+    parser.add_argument('--host', default=DEFAULT_HOST, help='Host to bind to')
     parser.add_argument('--no-browser', action='store_true', help='Do not open browser')
     args = parser.parse_args()
 
+    # Trouver un port disponible
+    if args.port:
+        selected_port = args.port
+        logger.info(f"Using specified port: {selected_port}")
+    else:
+        selected_port = find_available_port(AVAILABLE_PORTS, args.host)
+        if selected_port is None:
+            logger.error("Could not find any available port from the configured list!")
+            print("❌ Aucun port disponible trouvé. Veuillez fermer certaines applications et réessayer.")
+            sys.exit(1)
+        logger.info(f"Found available port: {selected_port}")
+
     print("=" * 60)
     print("🚀 Kick Viewer Bot - WebSocket Server")
     print("=" * 60)
-    print(f"📡 WebSocket: ws://{args.host}:{args.port}/socket.io/")
-    print(f"🌐 HTTP: http://{args.host}:{args.port}")
-    print(f"✅ Health: http://{args.host}:{args.port}/health")
+    print(f"📡 WebSocket: ws://{args.host}:{selected_port}/socket.io/")
+    print(f"🌐 HTTP: http://{args.host}:{selected_port}")
+    print(f"✅ Health: http://{args.host}:{selected_port}/health")
+    print("=" * 60)
+    print(f"\n🔌 Port utilisé: {selected_port}")
+    print(f"💡 Le frontend essaiera automatiquement de se connecter à ce port")
     print("=" * 60)
 
     # Open browser after 1.5 seconds if not disabled
@@ -408,10 +453,17 @@ def index():
 
     print("\nPress Ctrl+C to stop\n")
 
-    socketio.run(
-        app,
-        host=args.host,
-        port=args.port,
-        debug=False,
-        use_reloader=False
-    )
+    try:
+        socketio.run(
+            app,
+            host=args.host,
+            port=selected_port,
+            debug=False,
+            use_reloader=False
+        )
+    except OSError as e:
+        if "Address already in use" in str(e):
+            logger.error(f"Port {selected_port} is already in use!")
+            print(f"❌ Le port {selected_port} est déjà utilisé. Réessayez ou spécifiez un autre port avec --port")
+        else:
+            raise

frontend/config/ports.ts

@@ -0,0 +1,28 @@
+/**
+ * Shared port configuration
+ * Must match the backend shared_config.py
+ */
+
+// Ports peu utilisés par défaut, dans l'ordre de préférence
+export const AVAILABLE_PORTS = [
+  8765, // Port peu commun
+  9876, // Rarement utilisé
+  7890, // Peu utilisé
+  6543, // Rarement occupé
+  5432, // Peut être occupé par PostgreSQL
+  8081, // Alternative à 8080
+  8082, // Alternative à 8080
+  8083, // Alternative à 8080
+];
+
+// Générer toutes les URLs possibles (localhost + 127.0.0.1)
+export const generateConnectionUrls = (): string[] => {
+  const urls: string[] = [];
+
+  for (const port of AVAILABLE_PORTS) {
+    urls.push(`http://localhost:${port}`);
+    urls.push(`http://127.0.0.1:${port}`);
+  }
+
+  return urls;
+};

frontend/services/LocalServiceConnector.ts

@@ -4,6 +4,7 @@
  */
 
 import { io, Socket } from "socket.io-client";
+import { generateConnectionUrls } from "../config/ports";
 
 export type ConnectionStatus =
   | "disconnected"
@@ -24,14 +25,8 @@ class LocalServiceConnector {
   private reconnectAttempts = 0;
   private maxReconnectAttempts = 5;
 
-  // Try multiple possible local addresses
-  private possibleUrls = [
-    "http://localhost:3001",
-    "http://localhost:443",
-    "https://localhost:443",
-    "http://127.0.0.1:3001",
-    "http://127.0.0.1:443",
-  ];
+  // Try multiple possible local addresses (from shared config)
+  private possibleUrls = generateConnectionUrls();
 
   private currentUrlIndex = 0;
 

frontend/services/WebSocketService.ts

@@ -2,6 +2,7 @@
  * WebSocket Service - Communication complète via WebSocket
  */
 import { io, Socket } from "socket.io-client";
+import { generateConnectionUrls } from "../config/ports";
 
 export type ConnectionStatus =
   | "disconnected"
@@ -51,13 +52,8 @@ class WebSocketService {
   private status: ConnectionStatus = "disconnected";
   private callbacks: Callbacks = {};
 
-  // URLs possibles pour le service local
-  private urls = [
-    "http://localhost:8080",
-    "http://localhost:3001",
-    "http://127.0.0.1:8080",
-    "http://127.0.0.1:3001",
-  ];
+  // URLs possibles pour le service local (générées depuis la config partagée)
+  private urls = generateConnectionUrls();
 
   private currentUrl = "";
 

shared_config.py

@@ -0,0 +1,18 @@
+"""
+Shared configuration between backend and frontend
+Liste de ports à essayer pour le serveur WebSocket
+"""
+
+# Ports peu utilisés par défaut, dans l'ordre de préférence
+AVAILABLE_PORTS = [
+    8765,  # Port peu commun
+    9876,  # Rarement utilisé
+    7890,  # Peu utilisé
+    6543,  # Rarement occupé
+    5432,  # Peut être occupé par PostgreSQL
+    8081,  # Alternative à 8080
+    8082,  # Alternative à 8080
+    8083,  # Alternative à 8080
+]
+
+DEFAULT_HOST = '0.0.0.0'