update komponen

config/websocket.js

@@ -0,0 +1,185 @@
+// ~/config/websocket.js
+
+// Helper function untuk mendeteksi environment
+const detectEnvironment = () => {
+  // Jika ada environment variable NODE_ENV
+  if (process.env.NODE_ENV) {
+    return process.env.NODE_ENV;
+  }
+  
+  // Deteksi berdasarkan hostname/URL jika di browser
+  if (typeof window !== 'undefined') {
+    const hostname = window.location.hostname;
+    
+    // Local development
+    if (hostname === 'localhost' || hostname === '127.0.0.1') {
+      return 'development';
+    }
+    
+    // Server di jaringan lokal (IP private)
+    if (hostname.match(/^192\.168\./) || 
+        hostname.match(/^10\./) || 
+        hostname.match(/^172\.(1[6-9]|2[0-9]|3[0-1])\./)) {
+      return 'staging';
+    }
+    
+    // Production (domain atau IP public)
+    return 'production';
+  }
+  
+  // Default fallback
+  return 'development';
+};
+
+export const websocketConfig = {
+  // Local Development (localhost)
+  development: {
+    url: 'ws://localhost:8084/api/v1/ws',
+    // Alternative untuk development
+    // url: 'ws://localhost:8084/api/v1/ws',
+    queryParams: {
+      user_id: 'QRIS',
+      room: 'BANKJATIM'
+    },
+    options: {
+      transports: ['websocket', 'polling'],
+      timeout: 15000,
+      reconnection: true,
+      reconnectionAttempts: 3,
+      reconnectionDelay: 1000,
+      reconnectionDelayMax: 3000,
+    }
+  },
+  
+  // Staging/Network Server (IP jaringan)
+  staging: {
+    url: 'ws://10.10.150.68:8084/api/v1/ws',
+    queryParams: {
+      user_id: 'QRIS',
+      room: 'BANKJATIM'
+    },
+    options: {
+      transports: ['websocket', 'polling'],
+      timeout: 20000,
+      reconnection: true,
+      reconnectionAttempts: 5,
+      reconnectionDelay: 1000,
+      reconnectionDelayMax: 5000,
+    }
+  },
+  
+  // Production (domain atau IP public)
+  production: {
+    url: 'wss://your-production-server.com/api/v1/ws',
+    queryParams: {
+      user_id: 'QRIS',
+      room: 'BANKJATIM'
+    },
+    options: {
+      transports: ['websocket', 'polling'],
+      timeout: 30000,
+      reconnection: true,
+      reconnectionAttempts: 10,
+      reconnectionDelay: 2000,
+      reconnectionDelayMax: 10000,
+      // Additional production settings
+      secure: true,
+      rejectUnauthorized: true,
+    }
+  },
+  
+  // Testing Environment
+  test: {
+    url: 'ws://test-server:8084/api/v1/ws',
+    queryParams: {
+      user_id: 'QRIS_TEST',
+      room: 'BANKJATIM_TEST'
+    },
+    options: {
+      transports: ['websocket'],
+      timeout: 10000,
+      reconnection: false,
+    }
+  }
+};
+
+// Helper function untuk build URL dengan query parameters
+export const buildWebSocketUrl = (baseUrl, queryParams = {}) => {
+  const url = new URL(baseUrl);
+  Object.entries(queryParams).forEach(([key, value]) => {
+    url.searchParams.append(key, value);
+  });
+  return url.toString();
+};
+
+// Helper function untuk mendapatkan config berdasarkan environment
+export const getWebSocketConfig = () => {
+  const env = detectEnvironment();
+  const config = websocketConfig[env] || websocketConfig.development;
+  
+  // Build URL dengan query parameters
+  const fullUrl = buildWebSocketUrl(config.url, config.queryParams);
+  
+  console.log(`🌍 Detected environment: ${env}`);
+  console.log(`🔗 WebSocket URL: ${fullUrl}`);
+  
+  return {
+    ...config,
+    fullUrl,
+    environment: env
+  };
+};
+
+// Helper untuk override manual dengan custom query params
+export const getCustomWebSocketConfig = (customUrl, customQueryParams = {}, customOptions = {}) => {
+  const baseConfig = getWebSocketConfig();
+  
+  const mergedQueryParams = {
+    ...baseConfig.queryParams,
+    ...customQueryParams
+  };
+  
+  const fullUrl = buildWebSocketUrl(customUrl, mergedQueryParams);
+  
+  return {
+    ...baseConfig,
+    url: customUrl,
+    queryParams: mergedQueryParams,
+    fullUrl,
+    options: {
+      ...baseConfig.options,
+      ...customOptions
+    },
+    environment: 'custom'
+  };
+};
+
+// Environment detection helpers
+export const isProduction = () => detectEnvironment() === 'production';
+export const isDevelopment = () => detectEnvironment() === 'development';
+export const isStaging = () => detectEnvironment() === 'staging';
+
+// Advanced configuration berdasarkan kondisi khusus
+export const getAdvancedConfig = () => {
+  const baseConfig = getWebSocketConfig();
+  
+  // Tambah konfigurasi khusus berdasarkan browser atau device
+  if (typeof window !== 'undefined') {
+    // Mobile device adjustments
+    if (navigator.userAgent.match(/Mobile|Android|iPhone|iPad/)) {
+      baseConfig.options.timeout = Math.min(baseConfig.options.timeout, 15000);
+      baseConfig.options.reconnectionDelay = 2000;
+    }
+    
+    // Connection type adjustments
+    if ('connection' in navigator) {
+      const connection = navigator.connection;
+      if (connection.effectiveType === 'slow-2g' || connection.effectiveType === '2g') {
+        baseConfig.options.timeout = 30000;
+        baseConfig.options.reconnectionDelay = 3000;
+      }
+    }
+  }
+  
+  return baseConfig;
+};