fix: update subscriber role cache in real-time via EventSub events

[servusrene]

Description of the Change

The subscriber cache was only populated at startup and conditionally on chat reconnect, causing $userRoles to not reflect new or expired subs until restart. Now the cache is updated immediately on sub/resub/gift sub/upgrade events, refreshed on stream online and chat reconnect, and subscribers are removed via onChannelSubscriptionEnd.

Applicable Issues

Fixes #3462

Testing

Just subscribe to a channel and do not restart the app

[servusrene]

@zunderscore fyi

[zunderscore]

@zunderscore fyi

No need to tag me. Someone from the dev team will review when one of us has a chance.

[servusrene]

No need to tag me. Someone from the dev team will review when one of us has a chance.

Sorry, I didn't know that. I just assumed that since you'd looked at the PR from @A-iko, you were in charge of that area.

[ebiggz]

Hi @servusrene,

Thank you for the contribution!

This largely looks to be a good fix to the stale subscriber data issue.

I do have one ask, though. With this change to always load the full subscriber list when connecting to chat, we are concerned about high network load / API rate limit usage in the case of rapid chat disconnects / reconnects for channels with large subscriber counts.

To resolve this, I would like to see a staleness / refresh interval check added to the TwitchRolesManager.loadSubscribers() method to prevent the app from loading the full subscriber list too frequently.

Something as simple as the following would suffice, but feel free to implement your own solution!

class TwitchRolesManager extends TypedEmitter<Events> {
    private _subscribersLastLoadedAt: number | null = null;

   // ...

  async loadSubscribers(): Promise<void> {
        // Only reload subscribers if it's been more than 30 minutes since they were last loaded
        if (this.getMinutesSinceSubscribersLoaded() < 30) {
            return;
        }
        this._subscribers = (await TwitchApi.subscriptions.getSubscriptions())
            .map(m => ({
                id: m.userId,
                username: m.userName,
                displayName: m.userDisplayName,
                subTier: this.getRoleForSubTier(m.tier)
            }));
        this._subscribersLastLoadedAt = Date.now();
    }

    private getMinutesSinceSubscribersLoaded(): number {
        if (this._subscribersLastLoadedAt == null) {
            return Infinity;
        }
        return (Date.now() - this._subscribersLastLoadedAt) / 1000 / 60;
    }
}

Let me know if you have any questions or additional thoughts 👍🏻