looking the problem with realtime

Author: georgiy.rusanov

.github/workflows/ci.yml

@@ -123,19 +123,22 @@ jobs:
 
       - name: Debug Supabase connectivity
         run: |
-          echo "Checking HTTP endpoint with curl..."
+          echo "Checking HTTP endpoint with curl"
           curl -v http://127.0.0.1:54321 || echo "curl failed"
 
-          echo "Testing WebSocket connection to supabase realtime..."
-          # Test WebSocket connection using curl (which supports WebSocket)
-          curl -i -N -H "Connection: Upgrade" -H "Upgrade: websocket" -H "Sec-WebSocket-Version: 13" -H "Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==" http://127.0.0.1:54321/realtime/v1/websocket || echo "WS connection failed"
+          echo "Testing WebSocket connection to supabase realtime with auth"
+          # Test WebSocket connection with proper authentication parameters
+          curl -i -N -H "Connection: Upgrade" -H "Upgrade: websocket" -H "Sec-WebSocket-Version: 13" -H "Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==" "http://127.0.0.1:54321/realtime/v1/websocket?apikey=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0&vsn=1.0.0" || echo "WS connection failed"
 
-          echo "Testing realtime endpoint directly..."
+          echo "Testing realtime endpoint directly"
           curl -v http://127.0.0.1:54321/realtime/v1/ || echo "Realtime endpoint failed"
 
-          echo "Testing realtime health check..."
+          echo "Testing realtime health check"
           curl -v http://127.0.0.1:54321/realtime/v1/api/ping || echo "Realtime ping failed"
 
+          echo "Testing realtime health check with auth"
+          curl -v -H "apikey: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0" http://127.0.0.1:54321/realtime/v1/api/ping || echo "Realtime ping with auth failed"
+
           docker ps --format '{{.Names}}'
 
           echo "docker logs"
@@ -147,7 +150,13 @@ jobs:
           echo "Checking realtime container specifically..."
           docker logs supabase_realtime_supabase-js --tail 50 || echo "No realtime logs"
 
+          echo "Checking Kong logs for WebSocket requests..."
+          docker logs supabase_kong_supabase-js --tail 20 || echo "No Kong logs"
+
       - name: Build and test expo
+        env:
+          SUPABASE_URL: http://127.0.0.1:54321
+          SUPABASE_ANON_KEY: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0
         run: |
           npm clean-install
           npm run build

examples/expo-app/__tests__/Index.test.tsx

@@ -8,6 +8,10 @@ describe('Index', () => {
 
   it('should display SUBSCRIBED status when realtime connection is established', async () => {
     console.log('Starting realtime connection test...')
+    console.log('Environment variables:')
+    console.log('- SUPABASE_URL:', process.env.SUPABASE_URL || 'not set')
+    console.log('- SUPABASE_ANON_KEY:', process.env.SUPABASE_ANON_KEY ? 'set' : 'not set')
+
     const { getByTestId, unmount } = render(<Index />)
 
     // Initially, the text should be empty
@@ -26,6 +30,12 @@ describe('Index', () => {
         onTimeout: (error) => {
           const currentStatus = getByTestId('realtime_status').props.children
           console.error('Test timeout. Current status:', currentStatus)
+          console.error('Environment check:')
+          console.error('- SUPABASE_URL:', process.env.SUPABASE_URL)
+          console.error(
+            '- SUPABASE_ANON_KEY:',
+            process.env.SUPABASE_ANON_KEY ? 'present' : 'missing'
+          )
           throw new Error(
             `Timeout waiting for SUBSCRIBED status. Current status: ${currentStatus}. ${error.message}`
           )

examples/expo-app/app/index.tsx

@@ -2,17 +2,30 @@ import { Text, View } from 'react-native'
 import { useState, useEffect } from 'react'
 import { createClient } from '@supabase/supabase-js'
 
-const SUPABASE_URL = 'http://127.0.0.1:54321'
+// Use environment variables with fallbacks for local development
+const SUPABASE_URL = process.env.SUPABASE_URL || 'http://127.0.0.1:54321'
 const ANON_KEY =
+  process.env.SUPABASE_ANON_KEY ||
   'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0'
 
-const supabase = createClient(SUPABASE_URL, ANON_KEY)
+console.log('Using Supabase URL:', SUPABASE_URL)
+console.log('Using Supabase Key:', ANON_KEY.substring(0, 20) + '...')
+
+const supabase = createClient(SUPABASE_URL, ANON_KEY, {
+  realtime: {
+    params: {
+      eventsPerSecond: 10,
+    },
+  },
+})
 
 export default function Index() {
   const [realtimeStatus, setRealtimeStatus] = useState<string | null>(null)
 
   useEffect(() => {
     console.log('Setting up realtime connection...')
+    console.log('Realtime URL:', supabase.realtime.endPoint)
+
     const channel = supabase.channel('realtime:public:todos')
 
     channel.subscribe((status) => {