Updating Client Side with Async Empirica Callbacks

[Alan-Qiao]

Hey @npaton

We want our client side code to wait for an asynchronous callback on the server side to finish, before displaying content, but it never seems to update.

We are using a video conference library which requires an access key to connect a client. The access key is being generated on the server side given a username from the client side.

We trigger the server-side callback by setting roomName parameter on the player object from our react component.

useEffect(() => {
    console.log("Setting room name to player ID")
    player.set('roomName', round.id);

    return () => {
        player.set('roomName', null) // done with this room, close it
    }
  }, []);

The callback then computes the access key using an asynchronous call to a third-party API. The returned key is then set as a parameter on the player object.

Empirica.onChange("player", "roomName", async function ({ isNew, player }) {
  if (player.get("roomName")) {
    const access_key = await GetRoomKey(player.get("nickname"), player.get('roomName'));
    player.set('accessKey', access_key);
    console.log(`Set access key for player ${player.participant.identifier} in room ${player.get("roomName")} to ${player.get('accessKey')}`);
  } else {
    player.set('accessKey', null);
    console.log(`Player ${player.participant.identifier} leaving room. Setting access key to null.`);
  }
});

However, the react component does not seem to receive the update to the player object unless the entire webpage is refreshed.

export default function VideoCheck({next}) {
    
    const player = usePlayer()
    const accessKey = player.get("accessKey")
    console.log("Access Key:", accessKey)
    //...
}

The following screenshot is from first loading the Video Check Intro Step:

Notice that in the console log we see that the player object refreshes a few times, but the access key is still null. Even if we wait for a long time after the callback is finished, there is no change to the display.

The next screenshot is after refreshing the same webpage:

Notice that in the console log, the access key is now found, and the video component is connecting.

We see the same issue in both the intro stages and the game body. It seems that what is happening is that the change to the player object as a result of the asynchronous callback is not triggering a screen refresh. Is this because we aren't using the callback properly? Or is it that we need to do something else on the client side?

CC: @JamesPHoughton

[npaton]

This should be fixed.