Realtime - Unable to communicate with host when running client within WSL

[Zendrex]

Bug report

• I confirm this is a bug with Supabase, not with my own application.
• I confirm I have searched the Docs, GitHub Discussions, and Discord.

Describe the bug

It seems that the supabase client is unable to communicate with the realtime wss api beyond initial connection. Furthermore, there is no provided error as to why the issue is occurring via status CHANNEL_ERROR.
NOTE: This is for a backend application, not front-end.

I was able to successfully connect to the realtime api and receive updates by doing the following below outside of the package by utilizing wscat. This shows that my WSL configuration is valid and able to communicate normally with the API.

Initial command.
wscat --connect "wss://<project_id>.supabase.co/realtime/v1/websocket?apikey=<apikey>&vsn=1.0.0"

Sent message(s)

{
  "topic": "realtime:custom-all-channel",
  "event": "phx_join",
  "payload": {
    "config": {
      "broadcast": {
        "ack": false,
        "self": false
      },
      "presence": {
        "key": ""
      },
      "postgres_changes": [
        {
          "event": "*",
          "schema": "public",
          "table": "<table_here>"
        }
      ]
    },
    "access_token": "<api_key>"
  },
  "ref": "1",
  "join_ref": "1"
}

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

Create a basic nodejs & supabase application within WSL
Try connecting to the realtime api

Expected behavior

Connection and successful subscription to realtime events.

Screenshots

If applicable, add screenshots to help explain your problem.

System information

• OS: Windows - 10.0.22621 Build 22621
• WSL 2 - Ubuntu 22.04.3 LTS
• Version of supabase-js: 2.33.2
• Version of Node.js: v20.6.1
• Version of Bun 1.0.2 (additional tests were done with this before posting)

Additional context

Code being used to test.

import { REALTIME_SUBSCRIBE_STATES, createClient } from '@supabase/supabase-js'

const SUPABASE_REALTIME_URL = 'https://<project_id>.supabase.co'
const SUPABASE_KEY = 'public-anon-key'
const supabase = createClient(SUPABASE_REALTIME_URL, SUPABASE_KEY, {
    realtime: {
        params: {
            eventsPerSecond: 1000,
        },
    },
})

const channel = supabase.channel('custom-all-channel')
    .on(
        'postgres_changes',
        { event: '*', schema: 'public', table: '<table_name>' },
        (payload) => {
            console.log('Change received!', payload)
        },
    )

channel.subscribe((status: `${REALTIME_SUBSCRIBE_STATES}`, err) => {
    if (status === REALTIME_SUBSCRIBE_STATES.SUBSCRIBED)
        console.log('Subscribed to channel!')

    if (status === REALTIME_SUBSCRIBE_STATES.CHANNEL_ERROR)
        // # err returns undefined?!?!
        console.log('Error subscribing to channel!', err)
})

[kevinco26]

Facing the same issue for one of my projects but not for the other.

Also same with err being undefined https://github.com/orgs/supabase/discussions/19263

I also opened a ticket as well

[filipecabaco]

@Zendrex could you please open a ticket? That way I might be able to unblock your project.

We might have an issue when we're creating some of the data on our side to connect to the project database. Already checking with the relevant teams 👀