Write and read userData from dailyParticipant

isra
isra Member

Hello daily bros, I've been using the setUserData() method to set custom information of the user in the app.

The flow is this, let's say there are 2 users, User A, User B. When they are joining in the room, they use in their own perspective the joined-meeting event. Here is a code example for user A and B

User A and B do this :

const handleJoinedMeeting = (event) => {
updateUser({ // a method to update the user
id: event?.participants.local.user_id,
.... some more props
}})
// set the userData with the user object updated 
dailyCallObject.setUserData(JSON.stringify(user));
}

And then, each user listens the participant-joined event because the remote participant (A or B, depending on the perspective of the user) has joined the room. So here is where i use the userData of the remote participant, like this:

const handleParticipantJoined = (event) => {
    console.log('REMOTE PARTICIPANT JOINED', event);
const dataUser = JSON.parse(dailyCallObject.participants()[
            event.participant.user_id]?.userData)
// now dataUser has the custom props of the remote participant and I can use it
// for something else like this
addParticipant({
id: event?.participant.user_id,
role: dataUser.role,
permissions: dataUser.permissions 
});
}

At the beginning, this didn't work because if I was the user B and the user A was joining the room and updating his own userData, when I listened the participant-joined event and I tried to access to the userData of the user A(the remote participant), this userData didn't exist.

I handled this situation with a setTimeout, the code changed to this:

const handleParticipantJoined = (event) => {
    console.log('REMOTE PARTICIPANT JOINED', event);
setTimeout(()=> {

const dataUser = JSON.parse(dailyCallObject.participants()[
            event.participant.user_id]?.userData)
// now dataUser has the custom props of the remote participant and I can use it
// for something else like this
addParticipant({
id: event?.participant.user_id,
role: dataUser.role,
permissions: dataUser.permissions 
});
}, 2000)

}

And it worked, the setTimeout gave me some time, so the remote participant could update his userData . But this isn't always works, some users (the real world now) have errors when they tried to use the userData , "JSON is not defined, can't access undefined etc etc" typical JSON.parse errors. I don't know why they have problems sometimes.

Please, any help will be useful is there is a better approach to update and read the userData of the participants in the room with no problem. What I did was the hacky way.

Thank you dailyBros. Have a nice day

Answers

  • chad
    chad Community Manager, Moderator, Dailynista admin
    edited March 2023

    this is the part where I normally make not-very-funny jokes about special relativity and the relativity of simultaneity and stuff :) TLDR: It's probably not safe to assume that you'll get someone's userData as part of the participant-joined event, which you've already discovered. You should probably listen for the participant-updated event - https://docs.daily.co/reference/daily-js/events/participant-events#participant-updated as well. In that handler, you can check for the presence of the userData object, and once you get it, do all your setup there.

  • isra
    isra Member

    Thanks for the response @chad , I've been thinking about that event too but I wasn't sure because that event also it's fire if any user turn on/off their devices or the screen sharing. I already use that event for those cases. That would be the only way to handle this? because the participant-updated happens more times than the participant-joined event u.u

  • chad
    chad Community Manager, Moderator, Dailynista admin

    well, if you want to be especially tidy, you could use callObject.off() to clean up after yourself, like this:


          function handleUserData(e) {
            console.log("Did I get user data?");
            if (e.participant.userData) {
              console.log("I did! It's ", e.participant.userData)
              call.off("participant-updated", handleUserData);
            }
          }
    
          call.on("participant-updated", handleUserData);