supabase · grdsdev · May 22, 2025 · May 22, 2025
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -42,3 +42,33 @@ jobs:
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           path-to-lcov: ./coverage/lcov.info
+
+  test-browser-example:
+    name: Test Browser Example
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Set up Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '20'
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+      - name: Install dependencies
+        working-directory: examples/browser
+        run: pnpm install
+      - name: Install Playwright browsers
+        working-directory: examples/browser
+        run: pnpm exec playwright install --with-deps
+      - uses: supabase/setup-cli@v1
+        with:
+          version: latest
+      - name: Start Supabase services
+        working-directory: examples/browser
+        run: supabase start
+      - name: Run browser example tests
+        working-directory: examples/browser
+        run: pnpm test
diff --git a/examples/browser/.gitignore b/examples/browser/.gitignore
@@ -0,0 +1 @@
+test-results/
diff --git a/examples/browser/index.html b/examples/browser/index.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Supabase Realtime Browser Example</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        .status {
+            padding: 10px;
+            margin: 10px 0;
+            border-radius: 4px;
+        }
+        .connected {
+            background-color: #d4edda;
+            color: #155724;
+        }
+        .disconnected {
+            background-color: #f8d7da;
+            color: #721c24;
+        }
+        .connecting {
+            background-color: #fff3cd;
+            color: #856404;
+        }
+        .button {
+            padding: 8px 16px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 500;
+            transition: background-color 0.2s;
+        }
+        .connect {
+            background-color: #28a745;
+            color: white;
+        }
+        .connect:hover {
+            background-color: #218838;
+        }
+        .disconnect {
+            background-color: #dc3545;
+            color: white;
+        }
+        .disconnect:hover {
+            background-color: #c82333;
+        }
+        .button:disabled {
+            background-color: #6c757d;
+            cursor: not-allowed;
+        }
+    </style>
+</head>
+<body>
+    <h1>Supabase Realtime Connection Status</h1>
+    <div id="status" class="status disconnected">Disconnected</div>
+    <button id="toggleConnection" class="button connect">Connect</button>
+    <div id="messages"></div>
+
+    <script type="module">
+        import { RealtimeClient } from 'https://cdn.jsdelivr.net/npm/@supabase/realtime-js/+esm'
+
+        const statusDiv = document.getElementById('status')
+        const messagesDiv = document.getElementById('messages')
+        const toggleButton = document.getElementById('toggleConnection')
+        let lastState = null
+
+        // Initialize the realtime client
+        const realtime = new RealtimeClient('http://127.0.0.1:54321/realtime/v1', {
+            params: {
+                apikey: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0'
+            }
+        })
+
+        // Function to update UI based on connection state
+        function updateConnectionState(state) {
+            if (state === lastState) return
+            lastState = state
+
+            switch (state) {
+                case 'open':
+                    statusDiv.textContent = 'Connected'
+                    statusDiv.className = 'status connected'
+                    toggleButton.textContent = 'Disconnect'
+                    toggleButton.className = 'button disconnect'
+                    toggleButton.disabled = false
+                    addMessage('Connected to Supabase Realtime')
+                    break
+                case 'closed':
+                    statusDiv.textContent = 'Disconnected'
+                    statusDiv.className = 'status disconnected'
+                    toggleButton.textContent = 'Connect'
+                    toggleButton.className = 'button connect'
+                    toggleButton.disabled = false
+                    addMessage('Disconnected from Supabase Realtime')
+                    break
+                case 'connecting':
+                    statusDiv.textContent = 'Connecting...'
+                    statusDiv.className = 'status connecting'
+                    toggleButton.disabled = true
+                    addMessage('Connecting to Supabase Realtime...')
+                    break
+                case 'closing':
+                    statusDiv.textContent = 'Closing...'
+                    statusDiv.className = 'status closing'
+                    toggleButton.disabled = true
+                    addMessage('Closing connection...')
+                    break
+            }
+        }
+
+        // Check connection state every 5 seconds
+        setInterval(() => {
+            const state = realtime.connectionState()
+            updateConnectionState(state)
+        }, 5000)
+
+        // Initial state check
+        updateConnectionState(realtime.connectionState())
+
+        // Handle button click
+        toggleButton.addEventListener('click', () => {
+            if (realtime.isConnected()) {
+                realtime.disconnect()
+            } else {
+                realtime.connect()
+            }
+        })
+
+        function addMessage(message) {
+            const messageElement = document.createElement('div')
+            messageElement.textContent = `${new Date().toLocaleTimeString()}: ${message}`
+            messagesDiv.prepend(messageElement)
+        }
+    </script>
+</body>
+</html> 
diff --git a/examples/browser/package-lock.json b/examples/browser/package-lock.json
diff --git a/examples/browser/package.json b/examples/browser/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "realtime-browser-example",
+  "version": "1.0.0",
+  "description": "Browser example for Supabase Realtime",
+  "scripts": {
+    "test": "playwright test",
+    "test:ui": "playwright test --ui"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.42.1"
+  }
+} 
diff --git a/examples/browser/playwright.config.js b/examples/browser/playwright.config.js
@@ -0,0 +1,18 @@
+import { defineConfig } from '@playwright/test'
+
+export default defineConfig({
+  testDir: './tests',
+  timeout: 30000,
+  expect: {
+    timeout: 10000
+  },
+  use: {
+    baseURL: 'http://localhost:8000',
+    trace: 'on-first-retry',
+  },
+  webServer: {
+    command: 'python -m http.server 8000',
+    url: 'http://localhost:8000',
+    reuseExistingServer: !process.env.CI,
+  },
+}) 
diff --git a/examples/browser/pnpm-lock.yaml b/examples/browser/pnpm-lock.yaml
diff --git a/examples/browser/supabase/.gitignore b/examples/browser/supabase/.gitignore
@@ -0,0 +1,8 @@
+# Supabase
+.branches
+.temp
+
+# dotenvx
+.env.keys
+.env.local
+.env.*.local