[Web + Amity SDK] About Follow with multiple registerSession

Currently we’re trying to implement Follow with Amity SDK on our UGC profile page
Example: Whynottravel | Creator Profile at TrueID In-Trend

Here are our use cases

  • When both non logged in & logged in user visit the page, the following & followers count should show up.
  • Our site can’t know at the first load that user already logged in or not, need to wait for a moment. so on the first load page will be non logged in user.

Non Logged In

  • When non logged in user visit the page, Follow Button should show as “Follow” (If user click at follow button, login modal will show up).

Logged In

  • If logged in user already followed the creator in the profile page, Follow Button should show as “Following”
  • Logged in user should be able to click to Follow/Unfollow.

So here’re the way we decided to do

  • At the first load page, we generate random string and registerSession with that randomString, so the page can load followings/followers count, and It’ll get for the count.
  • After 1-2 secs our site will know if there’s logged in user or not. In-case there’s logged in user, so our site will do log-in automatically. then our site will unregisterSession the generatedString. then it’ll registerSession with correct userId (ssoid)
  • After registered with correct userId, our site will try to check if logged in user is following the creator on the page.

Here are the problems we found

  1. After we tried to check if logged in user is following the creator on the page, sometimes it checked with generated string user, not correct userId. even if we already unregistered generated string.
  2. We tried to log and it showed that registerSession with correct userId is success (connectionStatus = ‘connected’). But after we click to follow user, it showed that generated string user make follow request to user on profile page. not correct userId make request to follow user.

This image shows step to register, unregister, querying data, receiving data

This image shows that the last query is check if generatedString is following 71657211.
But what it should be is, it should check if 21996792 is following 71657211. Because it tried to get follow status after registered 21996792.

Any idea about this?

Hi @tlezip - we would strongly advise against generating random user ID every time a page is loaded - this causes unnecessary workload especially in production when you have Secure Mode( https://docs.amity.co/console/settings/security#secure-mode ) turned on since every page load will incur 1-2 calls to your backend to generate authToken+ another 1-2 calls to init session on our side. This also will cause your user IDs to be very bloated.

May I advise you to only init the SDK when the page has finished checking the identity of the user

I’m not sure if we can do that. I’ll talk with team about that.

But If we can do it, for non logged in user, we’ll still have to register with generated string anyway. So we’ll be able to show followings/followers count. And that’ll cause the same problem right?

Also if user still not log-in yet, So our system will register with generated string. But If user click log in button after that, after logged in success. we’ll have to call registerSession one more time, and I think it might have problem like I mentioned above.

I think my question are how come the case above happened? and how can I fix it?

hi @tlezip !
I implemented for you simple playground JS SDK debugging doodle - JSFiddle - Code Playground. There I connect with not existed user1 (random user id), then call unregisterSession and connect with user2 (existing). So, on second connection followInfo status changed. Could you tell if this works for you ? If not could you provide more details ?

As I tried, sometimes it works, sometimes it’s not.
you can see at this log example.

This step it register with randomString and try to get follow count data

Then our system can detect logged in user so it unregister randomString

21996792 is correct user, so log seem correct right?
but when I click to follow user here are the response

It’s showing that randomString just followed the target user, not 21996792

@tlezip thank you for reply. Could you show the code that relates to sending follow request ?

@tlezip could you also check if you see correct connection inside Network tab. When you do registerSession each call of this function create new socket connection.

As I tried, most of it will create only one socket. it should be 2 sockets right? (one for randomString, one for actual user)

If so, do you have any idea why it create only one socket?

here is the code for registering/unregistering

here is the code for making follow request / getting follow count

here is the code when we call 2 files above

Also at Follow Button component, we tried to get FollowStatus like this

@tlezip could you try to move AmityClient.on(‘connectionStatusChanged’) handler out of useEffect ? This can be an issue.

When I moved
AmityClient.on(‘connectionStatusChanged’) and const AmityClient out of useEffect

Then I got error
ASCWebSDK: Only one instance of the SDK Web Client can be created

I think it’s because of the useAmity state has been updated, so It’ll try to create Amity instance again.

So I tried to put both of that into another useEffect that will be run only one time and store client into state.

When I try to test again. I still see that there’s only one socket.

@tlezip thank you for detailed report. Finally I reproduced the issue. I will try to find the solution.

Do you have any updates?

Hi @tlezip the team is still working on it, we will update you asap when there is an update. We’re sorry for the inconvenience :pray:t2:

Hello @tlezip we have found a bug on our side and we are addressing it. We will inform you once it is fixed. However, we still advise that this is not the effective way to implement :pray:t2::blush: Thank you.

Hello @tlezip we have released the fix for this bug, thank you :pray: