I am having some trouble connecting to the realtim...
# off-topic
m
I am having some trouble connecting to the realtime api in NodeJS and I am unsure why. I followed the
Creating a Socket connection
section from the docs here: https://github.com/supabase/realtime-js My code looks like this:
Copy code
import { RealtimeClient } from '@supabase/realtime-js'

var client = new RealtimeClient("wss://<project_ref>.supabase.co/realtime/v1")
client.connect()

client.onOpen(() => console.log('Socket opened.'))
client.onClose(() => console.log('Socket closed.'))
client.onError((e) => console.log('Socket error', e))
The error I am getting is:
Copy code
mike@workstation:~/workspace/scheduler$ node src/index.js
Socket error _Event {
  type: 'error',
  isTrusted: false,
  _yaeti: true,
  target: W3CWebSocket {
    _listeners: {},
    addEventListener: [Function: _addEventListener],
    removeEventListener: [Function: _removeEventListener],
    dispatchEvent: [Function: _dispatchEvent],
    _url: 'wss://<project_ref_here>.supabase.co/realtime/v1/websocket?vsn=1.0.0',
    _readyState: 3,
    _protocol: undefined,
    _extensions: '',
    _bufferedAmount: 0,
    _binaryType: 'arraybuffer',
    _connection: undefined,
    _client: WebSocketClient {
      _events: [Object: null prototype] {},
      _eventsCount: 0,
      _maxListeners: undefined,
      config: [Object],
      _req: null,
      protocols: [],
      origin: null,
      url: [Url],
      secure: true,
      base64nonce: 'jOMp0ZkpTIVvP0M37rUqCw==',
      [Symbol(kCapture)]: false
    },
    onopen: [Function (anonymous)],
    onerror: [Function (anonymous)],
    onmessage: [Function (anonymous)],
    onclose: [Function (anonymous)]
  },
  cancelable: true,
  stopImmediatePropagation: [Function (anonymous)]
}
Socket closed.
Note: I did replace
<project_ref>
with my actual project id
Any ideas?
I was able to connect with
supabase-js
, but in this particular microservice i only need access to the realtime api, so it feels wasteful to import the entire client library only to get access to the
realtime-js
wrapper
g
Probably because realtime server requires an apikey when running in RLS mode which is how Supabase has it set on their servers. Need to add at least your anon key. (url,{ params: { apikey: 'token123' }}). Just a guess.
m
I remember trying that as well yesterday and getting the same result
let me check
yep
error:
Copy code
mike@workstation:~/workspace/scheduler$ node src/index.js
Socket error _Event {
  type: 'error',
  isTrusted: false,
  _yaeti: true,
  target: W3CWebSocket {
    _listeners: {},
    addEventListener: [Function: _addEventListener],
    removeEventListener: [Function: _removeEventListener],
    dispatchEvent: [Function: _dispatchEvent],
    _url: 'wss://<project_ref>.supabase.co/websocket?apikey=<anon_key>&vsn=1.0.0',
    _readyState: 3,
    _protocol: undefined,
    _extensions: '',
    _bufferedAmount: 0,
    _binaryType: 'arraybuffer',
    _connection: undefined,
    _client: WebSocketClient {
      _events: [Object: null prototype] {},
      _eventsCount: 0,
      _maxListeners: undefined,
      config: [Object],
      _req: null,
      protocols: [],
      origin: null,
      url: [Url],
      secure: true,
      base64nonce: 'qMVi2jFMfYO4FxIzX4RDYw==',
      [Symbol(kCapture)]: false
    },
    onopen: [Function (anonymous)],
    onerror: [Function (anonymous)],
    onmessage: [Function (anonymous)],
    onclose: [Function (anonymous)]
  },
  cancelable: true,
  stopImmediatePropagation: [Function (anonymous)]
}
Socket closed.
code:
Copy code
var supabase_url = "wss://<project_ref>.supabase.co"
var supabase_anon_key = "<anon_key>"
var client = new RealtimeClient(supabase_url, {
    params: {
        apikey: supabase_anon_key
    }
})
client.connect()
I also tried the
service_role
key and it didn't change anything 😦
g
Does the url for the socket go out on the net?
m
what do you mean?
g
Are you running this on server or client?
m
server
g
When you ran realtime with supabase was it also on the server?
m
yep
same setup
g
Well, your call with key looks correct. I don't run Supabase on node or a server.
m
huh... nevermind. it seems to not be working with
supabase-js
now either
idk what i did yesterday to get it working lol
nope, i am stupid. I passed the wss:// url to
supabase-js
instead of https
supabase-js is working
realtime-js seems to not be working
at least not by following the quickstart guide
g
Without seeing the actual network request for the websocket and what the error actually is (I find no real message in the error block) not sure what to tell you at the moment.
m
> I find no real message in the error block yeah, that's what's bugging me too
i will look into it some more i guess
i will try to dig into the supabase-js working code
and see if i can extract the url or something
and compare them
g
@User Wow, you think we have problems with our apps.... over hour discord crash... I'm seeing no connection also in a client just using realtime.js. I'm looking at differences between two now and there are some socket object differences.
Edit. Stand alone realtime.js is working on a browser with the apikey parameter add for me. At first I had a typo.
m
I think I must have had a typo or something too, because I managed to get it working eventually. I printed the realtime url from supabase-js and copy pasted from there and it worked. After that, I tried again with the details copy pasted from my supabase instance and it is still working
I genuinely have no clue what happened
I refuse to believe I spent 3h yesterday unable to identify a bad copy paste or smth
sorry to have wasted your time 😅
g
Glad it is working
m
thanks again for being responsive!
a good takeaway from here could be that there is room for improvement in the error messages of realtime-js, i guess :))