JavaScript examples don't work for me

[retendo]

Hey,

just wanted to let you know that there seems to be an error in the JS examples.
I'm trying to get this to work on a node.js server. (not a JS expert)
The below code block does not work for me.

import { Socket } = '@supabase/realtime-js'

const REALTIME_URL = process.env.REALTIME_URL || 'http://localhost:4000'

var socket = new Socket(REALTIME_URL)
socket.connect()

// Listen to only INSERTS on the 'users' table in the 'public' schema
var allChanges = this.socket.channel('realtime:public:users')
  .join()
  .on('INSERT', payload => { console.log('Update received!', payload) })

what does instead work is the following:

const { Socket } = require('@supabase/realtime-js'); // related to node/browser difference?

const REALTIME_URL = process.env.REALTIME_URL || 'http://localhost:4000/socket' // "/socket" had to be added

var socket = new Socket(REALTIME_URL) 
socket.connect()

var allChanges = socket.channel('realtime:public:users') // removed "this." here (related to node/browser difference?)
  .join()
  .channel // added ".channel" because "join()" returns Push object
  .on('INSERT', payload => { console.log('Record inserted!', payload) })

Thanks for the great lib :)

[kiwicopple]

Hey @retendo ! Thanks for persisting long enough to make it work.

// related to node/browser difference?

You nailed it. The example at the the top is for "browser" JS and the one at the bottom is for "server" JS.

As a short (not entirely accurate) history of JS: at the start Javascript was only really used to do little things in the browser (little animations). Then people started building whole websites with it.

Then google thought.. perhaps we can run this JS on a server too, not just in a browser? So they created a "subset" of Javascript - nodejs, and they created an "engine" which could run it called v8.

But NodeJS doesn't really have the same "dialect". (Look up CommonJS vs AMD vs UMD.) This is why tools like babel exist. They "translate" JS between the different JS dialects.

Anyhow - you nailed it with the require('@supabase/realtime-js'); for Node

If you have a nice simple example working, perhaps you could even add it as a node-js example in the /examples folder? We're very open to contributors.

[retendo]

I think the more important change should be the ".channel" in between join() and on( ... ).
This seems unrelated to node.js/browser differences.
Or is this somehow working in the browser?
It seems that .join() returns a Push object instead of a Channel.

[kiwicopple]

I'll have to check this out. Do you have an existing repo that I can fork? If it's private no probs, I'll create a small express demo in this repo

[retendo]

Got some example code right here:
https://gist.github.com/retendo/3e2ddb90a29dfd0f5a2ab81729c7ed29

This works with the adjusted sample code

[Overdozed]

in addition to that wildcart paths doest work on channel path.
socket.channel('realtime:public:users') -> works
socket.channel('') -> broken
socket.channel('realtime:') -> broken
socket.channel('realtime:public:*') -> broken

[retendo]

socket.channel('realtime:public') works, though. Just omit the last colon.

[kiwicopple]

Hey @retendo sorry for the incommunicado - I'm looking at this & building a basic nodejs example now, but probably won't finish until tomorrow morning my time.

FYI: These shouldn't work

socket.channel('') -> broken
socket.channel('realtime:') -> broken
socket.channel('realtime:public:*') -> broken (see realtime:public below)

But these should

socket.channel('realtime:*') -> listen to changes in the database
socket.channel('realtime:public') -> listen to changes in the public schema
socket.channel('realtime:public:users') -> listen to changes in the users table

Use the "on" to listen to different "event types". Using the code in your gist:

// INSERTS
socket.channel('realtime:public')
  .join()
  .channel
  .on('INSERT', payload => {});

// UPDATES
socket.channel('realtime:public')
  .join()
  .channel
  .on('UPDATE', payload => {});

// DELETES
socket.channel('realtime:public')
  .join()
  .channel
  .on('DELETE', payload => {});

// ALL 
socket.channel('realtime:public')
  .join()
  .channel
  .on('*', payload => {});

Hope that helps a bit! I haven't tested your code yet but it looks great! I see exactly where you're going with it - creating a proxy (maybe for auth purposes?)

[retendo]

For auth, specialized socket APIs that hide the underlying database structure and some payload modifications.

[kiwicopple]

Small example pushed for you @retendo. I used your code as a baseline so thanks for contributing

think the more important change should be the ".channel" in between join() and on( ... ).

Check out the difference between my first commit and my second: d4c9ece

Basically socket.channel() returns the channel, and socket.channel.join() returns the join event. So you were "accessing" the channel through the join event.

Please keep me update on your proxy - if you can keep it generic enough I'll add it to the examples folder.

[retendo]

That makes sense. In the original browser based example it was all chained together, so I tried to replicate it that way. But the changes in your second commit actually make it clearer.

Regarding the proxy example: I’ll see what I can do. You are probably most interested in how authentication fits into the picture, right? Because the other things that I mentioned should be straightforward.

[kiwicopple]

Yeah especially in authorization. We are working on it now, so it's good to get more perspectives/approaches.

Thanks for pitching in here. If you get stuck with anything else just let us know. I'll leave this to close unless you have anything remaining

[kiwicopple]

Closing now, feel free to reopen at any stage