Duplicate and unknown users while trying out presence on supabase project

[const_var]

Bug report

Describe the bug

While trying out presence code snippet from the official documentation, I get duplicate and unknown users as online users even though I am loading only a single page.

To Reproduce

I ran following code snipeet

        const supabase = createClient(supabaseUrl, anonKey);
        const channel = supabase.channel('online-users')
        channel
          .on('presence', {event: 'sync'}, () => {
              console.log('currently online users', channel.presenceState())
          })
          .on('presence', {event: 'join'}, ({newUser}) => {
              console.log('a new user has joined', newUser)
          })
          .on('presence', {event: 'leave'}, ({leftUser}) =>
            console.log('a user has left', leftUser)
          )
          .subscribe(async (status) => {
              if (status === 'SUBSCRIBED') {
                  const user_name = getRandomUser();
                  console.log(`user_name`, user_name);
                  const status = await channel.track({user_name})
                  console.log(status)
              }
          })

Expected behavior

I was expecting a single user Bob as an online user

Screenshots

System information

• OS: MacOs
• Browser (if applies): chrome
• Version of supabase-js: 2.0.0-rc.6
• Version of Node.js: v18.7

Additional Context

The number of users keep changing. Not sure if this is to do with some lingering connections. I tried to reload the page after few min. Still get the same result.

[Wen Bo Xie]

@bhvngt Can you please share how you're cleaning up the channel? I'm assuming you're using React.

[const_var]

@w3b6x9 I am just reloading the page without using any explicit code to cleanup channel. I am using svelte. Code snippet given is the only code running on the page.

[Wen Bo Xie]

@bhvngt I want to preface this by writing that I haven't used Svelte at all. I think you should clean up the channel in onDestroy by calling supabase.removeChannel(channel).

[const_var]

Thanks @w3b6x9. I tried with supabase.removeChannel(channel) inside onDestroy and now it is working as expected.