An Introduction to the Client

The taClient(client for short) is how most of the actions will be carried out. It is used when you want to query the database, connect to servers, and listen to things that are not saved in the state, such as live data

The stateManager is the way you would fetch tournaments, get matches, or do anything related to getting specific data that does not require a database query. It is best if you are familiar with what methods it has and how you can use them.

Standard Response Object

There are a couple of important notes for client responses. Since most client responses are async, they will return a promise. This will be shown as Promise<Response> in IntelliSense. In reality, what happens under the hood is that ProtoBuf sends back a packet of the form:

{
    details: {
        packetType: data,
        oneofKind: 'packetType'
    },
    respondingToPacketId: 'packet-guid-uuidv4',
    type: Response_ResponseType
}

For the definition of the Response_ResponseType look at the Modals -> Response_ResponseType.

Generally for responses details.packetType will contain the actual data of the response. In order to retreive data from the response in TypeScript, we have to use the as any syntax.

const response = await client.doAction();

let data = (response as any).details.doAction;

Where doAction is the same as the response.details.oneofKind.

question_mark

Why is this important? TypeScript DOES NOT recognise these `packetType` objects, hence when dealing with responses we often use `as any` to get rid of type errors.

Let me provide an example of how the client is used in ShyyTAUI:

onMount(async() => {
    // Check if the user is logged in
    if ($authTokenStore) {
        // Using the client listen for events that will not be stored in the state, 
        // such as scores and song finish events
        client.on('realtimeScore', handleRealtimeScoreUpdate);
        client.on('songFinished', handleSongFinished);
    } else {
        // If the user is not authenticated, 
        // they will be thrown to the discord authentication page
        window.location.href = "/discordAuth"
    }
});

onDestroy(() => {
    // Remove the listeners that were added on mount
    client.removeListener('realtimeScore', handleRealtimeScoreUpdate);
    client.removeListener('songFinished', handleSongFinished);
});

info

Example: This is an example from the page of ShyyTAUI within the match coorination page.

2.7 KiB Raw Blame History

An Introduction to the Client

Standard Response Object

2.7 KiB

Raw Blame History