[bug] Too many cursor show up in Multiplayer mode.

tldraw / tldraw-v1

A tiny little drawing app. This is the original 2021-2022 version, released under MIT.

https://old.tldraw.com

MIT License

64 stars 35 forks source link

[bug] Too many cursor show up in Multiplayer mode. #245

Closed lichin-lin closed 2 years ago

lichin-lin commented 2 years ago

First of all, thanks for making the multiplayer feature, it works in most cases!

Here is one bug I found: If you try to refresh a tab with an element selected, somehow the removeuser function in useMultiplayerState.ts will not be triggered, so in other user's views, they will see more and more cursors show up (but actually, they all indicate the same user.)

I am not sure if this has to do with how Liveblock sends the event to a room, or, we didn't really clean up the userID in our storage so that we can't show the correct amount of cursor in a room 🙌

https://user-images.githubusercontent.com/10290616/154104177-8a26a71b-d30f-48c0-bd48-afdd73ed907f.mov

a-type commented 2 years ago

If you're using Liveblocks I'd recommend this improvement we made in our app vs the example code for tracking active users:

liveBlocks.subscribe('others', (others, event) => {
  if (event.type === 'leave') {
    if (event.user.presence) {
      app.removeUser(event.user.presence.id);
    }
  } else {
    app.updateUsers(
      others.map((p) => p.presence)
    );
  }
})

Assuming you're storing TLDraw user data directly in Liveblocks presence, presence.id will be the TLDraw user ID.

By listening explicitly for Liveblocks user leave events, which are delivered reliably, you can drop the beforeunload handlers and the use of broadcast events to tell peers you're leaving.