How to fix REALTIME_TIMEOUT: Connection to Realtime server timed out in Supabase

# Test WebSocket connectivity using wscat
   npm install -g wscat
   wscat -c "wss://YOUR_PROJECT_REF.supabase.co/realtime/v1"

   # Alternative using curl for WebSocket handshake test
   curl -i -N -H "Connection: Upgrade" -H "Upgrade: websocket" -H "Host: YOUR_PROJECT_REF.supabase.co" -H "Origin: https://YOUR_PROJECT_REF.supabase.co" https://YOUR_PROJECT_REF.supabase.co/realtime/v1

// Check if WebSocket is supported
   if (window.WebSocket) {
     console.log('WebSocket supported');
   } else {
     console.error('WebSocket not supported - use a modern browser');
   }

   // Test basic WebSocket connection
   const testSocket = new WebSocket('wss://echo.websocket.org');
   testSocket.onopen = () => console.log('Test WebSocket connected');
   testSocket.onerror = (e) => console.error('Test WebSocket error:', e);

// Correct initialization
   import { createClient } from '@supabase/supabase-js'

   const supabaseUrl = 'https://YOUR_PROJECT_REF.supabase.co'
   const supabaseKey = 'YOUR_ANON_KEY' // Not service role key for client-side

   const supabase = createClient(supabaseUrl, supabaseKey, {
     realtime: {
       params: {
         eventsPerSecond: 10 // Adjust based on needs
       }
     }
   })

-- Enable Realtime for a specific table
   alter publication supabase_realtime add table your_table_name;

   -- Enable Realtime for all tables (not recommended for production)
   alter publication supabase_realtime add table all_tables;

   -- Check which tables have Realtime enabled
   select * from pg_publication_tables where pubname = 'supabase_realtime';

// If behind a corporate proxy, you may need to configure it
   // Note: Most browsers use system proxy settings automatically

   // For Node.js environments, you might need:
   const { createClient } = require('@supabase/supabase-js');
   const { HttpsProxyAgent } = require('https-proxy-agent');

   const proxyAgent = new HttpsProxyAgent('http://proxy.company.com:8080');

   const supabase = createClient(supabaseUrl, supabaseKey, {
     global: {
       fetch: (url, options) => {
         return fetch(url, {
           ...options,
           agent: proxyAgent
         });
       }
     }
   });

# Test DNS resolution
   nslookup YOUR_PROJECT_REF.supabase.co

   # Test HTTPS connectivity
   curl -I https://YOUR_PROJECT_REF.supabase.co

   # Test WebSocket endpoint specifically
   curl -i -N      -H "Connection: Upgrade"      -H "Upgrade: websocket"      -H "Sec-WebSocket-Key: SGVsbG8sIHdvcmxkIQ=="      -H "Sec-WebSocket-Version: 13"      https://YOUR_PROJECT_REF.supabase.co/realtime/v1

// WARNING: Only for testing in development
   process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0';

class RealtimeConnection {
     constructor(supabase, channelName, options = {}) {
       this.supabase = supabase;
       this.channelName = channelName;
       this.maxRetries = options.maxRetries || 5;
       this.retryCount = 0;
       this.channel = null;
     }

     async connect() {
       try {
         this.channel = this.supabase.channel(this.channelName);

         // Subscribe to events
         this.channel
           .on('broadcast', { event: 'test' }, (payload) => {
             console.log('Received:', payload);
           })
           .subscribe((status) => {
             if (status === 'SUBSCRIBED') {
               console.log('Connected to Realtime');
               this.retryCount = 0; // Reset on success
             } else if (status === 'CHANNEL_ERROR') {
               this.handleError();
             } else if (status === 'TIMED_OUT') {
               this.handleTimeout();
             }
           });

       } catch (error) {
         this.handleError(error);
       }
     }

     handleError(error) {
       console.error('Realtime error:', error);

       if (this.retryCount < this.maxRetries) {
         const delay = Math.pow(2, this.retryCount) * 1000; // 1s, 2s, 4s, 8s, 16s
         this.retryCount++;

         console.log(`Retrying in ${delay}ms (attempt ${this.retryCount}/${this.maxRetries})`);

         setTimeout(() => {
           this.connect();
         }, delay);
       } else {
         console.error('Max retries reached. Giving up.');
         // Implement fallback logic or notify user
       }
     }

     handleTimeout() {
       console.log('Realtime connection timed out');
       this.handleError(new Error('Connection timeout'));
     }
   }

// Monitor connection state
   const channel = supabase.channel('room1');

   channel.on('system', { event: 'disconnect' }, () => {
     console.log('Disconnected from Realtime');
     // Attempt reconnection
   });

   channel.on('system', { event: 'reconnect' }, () => {
     console.log('Reconnected to Realtime');
   });

   channel.subscribe((status) => {
     console.log('Channel status:', status);

     switch(status) {
       case 'SUBSCRIBED':
         console.log('Successfully subscribed');
         break;
       case 'CHANNEL_ERROR':
         console.error('Channel error occurred');
         break;
       case 'TIMED_OUT':
         console.error('Connection timed out');
         break;
       case 'CLOSED':
         console.log('Channel closed');
         break;
     }
   });

// Send periodic pings to keep connection alive
   let heartbeatInterval;

   channel.subscribe((status) => {
     if (status === 'SUBSCRIBED') {
       // Start heartbeat
       heartbeatInterval = setInterval(() => {
         channel.send({
           type: 'broadcast',
           event: 'heartbeat',
           payload: { timestamp: Date.now() }
         });
       }, 30000); // Every 30 seconds
     } else if (status === 'CLOSED' || status === 'CHANNEL_ERROR') {
       // Clear heartbeat
       clearInterval(heartbeatInterval);
     }
   });

-- Check active Realtime connections
   SELECT count(*) as active_connections
   FROM pg_stat_activity
   WHERE application_name LIKE '%supabase_realtime%';

// Share channels instead of creating new ones
   const sharedChannel = supabase.channel('shared-channel');

   // Multiple components can listen to the same channel
   sharedChannel.on('postgres_changes', {
     event: 'INSERT',
     schema: 'public',
     table: 'messages'
   }, (payload) => {
     // Update all components listening for new messages
   });

   // Instead of:
   // const channel1 = supabase.channel('comp1');
   // const channel2 = supabase.channel('comp2');
   // const channel3 = supabase.channel('comp3');

class ConnectionPool {
     constructor() {
       this.connections = new Map();
     }

     getChannel(name) {
       if (!this.connections.has(name)) {
         const channel = supabase.channel(name);
         this.connections.set(name, channel);
       }
       return this.connections.get(name);
     }

     cleanup() {
       this.connections.forEach((channel, name) => {
         if (channel.subscription) {
           supabase.removeChannel(channel);
         }
       });
       this.connections.clear();
     }
   }

// Enable verbose logging
   const supabase = createClient(supabaseUrl, supabaseKey, {
     auth: {
       persistSession: true,
       autoRefreshToken: true,
     },
     realtime: {
       params: {
         eventsPerSecond: 10,
       },
       logLevel: 'debug' // Enable debug logging
     }
   });

# Test with simple WebSocket client
   # Install: npm install -g wscat
   wscat -c "wss://YOUR_PROJECT_REF.supabase.co/realtime/v1" -H "Authorization: Bearer YOUR_ANON_KEY"

   # Send a test message
   {"topic":"realtime:public:messages","event":"phx_join","payload":{},"ref":"1"}

<!-- Minimal test HTML file -->
   <!DOCTYPE html>
   <html>
   <head>
     <script src="https://unpkg.com/@supabase/supabase-js@2"></script>
   </head>
   <body>
     <script>
       const supabaseUrl = 'https://YOUR_PROJECT_REF.supabase.co';
       const supabaseKey = 'YOUR_ANON_KEY';

       const supabase = window.supabase.createClient(supabaseUrl, supabaseKey);

       const channel = supabase.channel('test-channel');

       channel.subscribe((status) => {
         console.log('Status:', status);
         document.body.innerHTML += `<p>Status: ${status}</p>`;
       });

       setTimeout(() => {
         supabase.removeChannel(channel);
       }, 10000);
     </script>
   </body>
   </html>