docs/docs/snippets/rage-fw-rpc/0.3.0/snippets.md

::: code-group

// @filename: node_modules/@types/@entityseven/rage-fw-rpc/index.d.ts
<!--@include: @/snippets/rage-fw-rpc/0.3.0/declaration.md-->
// ---cut---
import { Rpc } from '@entityseven/rage-fw-rpc'
export const rpc = new Rpc(/* options */)

:::

::: code-group

// @filename: node_modules/@types/@entityseven/rage-fw-rpc/index.d.ts
<!--@include: @/snippets/rage-fw-rpc/0.3.0/declaration.md-->
// ---cut---
import { Rpc } from '@entityseven/rage-fw-rpc'
export const rpc = new Rpc(/* options */)
rpc.browser = mp.browsers.new('package://path-to-your-cef-assets/index.html')

:::

<!--@include: @/snippets/rage-fw-rpc/0.3.0/declaration.md-->
// ---cut---
// server-side
// @log: Server expects one argument and requires it to be an array

rpc.register('event', (player: PlayerMp, argument1: number[]) => {})

// client-side
// @log: Client sends two arguments 

rpc.callServer('event', [2, 3])

// @warn: But this call is satisfied by the following register, instead of what we wanted previously

rpc.register('event', (player: PlayerMp, argument1: number, argument2: number) => {})

// @log: To avoid such mismatches you have to properly type your arguments:

rpc.callServer('event', [2, 3]) // [!code --]
rpc.callServer<[number[]]>('event', [[2, 3]]) // [!code ++]

// @filename: node_modules/@types/@entityseven/rage-fw-rpc/index.d.ts
<!--@include: @/snippets/rage-fw-rpc/0.3.0/declaration.md-->
// ---cut---
import { Rpc } from '@entityseven/rage-fw-rpc'
export const rpc = new Rpc({
    forceBrowserDevMode: false,
    debugLogs: true
})

::: code-group

rpc.register('playerJoin', (player: PlayerMp) => {
    console.log(`Connected: ${player.socialClub}`)
})

<!--@include: @/snippets/rage-fw-rpc/0.3.0/declaration.md-->
// ---cut---
rpc.register<
    [player: PlayerMp], void, ServerEventNames
    >('playerJoin', (player) => {
        console.log(`Connected: ${player.socialClub}`)
    })

:::

::: code-group

rpc.unregister('playerJoin')

<!--@include: @/snippets/rage-fw-rpc/0.3.0/declaration.md-->
// ---cut---
rpc.unregister<ServerEventNames>('playerJoin')

:::

::: code-group

rpc.callClient('updatePlayerData', ['argument'])

const player = {} satisfies PlayerMp
rpc.callClient(player, 'updatePlayerData', ['argument'])

<!--@include: @/snippets/rage-fw-rpc/0.3.0/declaration.md-->
// ---cut---
rpc.callClient<
    [string], ClientEventNames
>('updatePlayerData', ['argument'])

<!--@include: @/snippets/rage-fw-rpc/0.3.0/declaration.md-->
// ---cut---
const player = {} satisfies PlayerMp
rpc.callClient<
    [string], ClientEventNames
>(player, 'updatePlayerData', ['argument'])

:::

::: code-group

rpc.callClientAsync('updatePlayerData', ['argument'])
    .then(response => {
        console.log(`Received: ${response}`)
    })

const player = {} satisfies PlayerMp
rpc.callClientAsync(player, 'updatePlayerData', ['argument'])
    .then(response => {
        console.log(`Received: ${response}`)
    })

<!--@include: @/snippets/rage-fw-rpc/0.3.0/declaration.md-->
// ---cut---
rpc.callClientAsync<
    [string], ClientEventNames, boolean
    >('updatePlayerData', ['argument'])
    .then(response => {
        console.log(`Received: ${response}`)
    })

<!--@include: @/snippets/rage-fw-rpc/0.3.0/declaration.md-->
// ---cut---
const player = {} satisfies PlayerMp
rpc.callClientAsync<
    [string], ClientEventNames, boolean
>(player, 'updatePlayerData', ['argument'])
    .then(response => {
        console.log(`Received: ${response}`)
    })

:::

::: code-group

rpc.callServer('updatePlayerData', ['argument'])

<!--@include: @/snippets/rage-fw-rpc/0.3.0/declaration.md-->
// ---cut---
rpc.callServer<
    [string], ServerEventNames
>('updatePlayerData', ['argument'])

:::

::: code-group

rpc.callServerAsync('updatePlayerData', ['argument'])
    .then(response => {
        console.log(`Received: ${response}`)
    })

<!--@include: @/snippets/rage-fw-rpc/0.3.0/declaration.md-->
// ---cut---
rpc.callServerAsync<
    [string], ServerEventNames, boolean
>('updatePlayerData', ['argument'])
    .then(response => {
        console.log(`Received: ${response}`)
    })

:::

::: code-group

rpc.callBrowser('updatePlayerData', ['argument'])

const player = {} satisfies PlayerMp
rpc.callBrowser('updatePlayerData', ['argument'])

<!--@include: @/snippets/rage-fw-rpc/0.3.0/declaration.md-->
// ---cut---
rpc.callBrowser<
    [string], BrowserEventNames
>('updatePlayerData', ['argument'])

<!--@include: @/snippets/rage-fw-rpc/0.3.0/declaration.md-->
// ---cut---
const player = {} satisfies PlayerMp
rpc.callBrowser<
    [string], BrowserEventNames
>(player, 'updatePlayerData', ['argument'])

:::

::: code-group

rpc.callBrowserAsync('updatePlayerData', ['argument']).then(response => {
    console.log(`Received: ${response}`)
})

const player = {} satisfies PlayerMp
rpc.callBrowserAsync('updatePlayerData', ['argument']).then(response => {
    console.log(`Received: ${response}`)
})

<!--@include: @/snippets/rage-fw-rpc/0.3.0/declaration.md-->
// ---cut---
rpc.callBrowserAsync<
    [string], BrowserEventNames, boolean
>('updatePlayerData', ['argument'])
    .then(response => {
        console.log(`Received: ${response}`)
    })

<!--@include: @/snippets/rage-fw-rpc/0.3.0/declaration.md-->
// ---cut---
const player = {} satisfies PlayerMp
rpc.callBrowserAsync<
    [string], BrowserEventNames, boolean
>('updatePlayerData', ['argument'])
    .then(response => {
        console.log(`Received: ${response}`)
    })

:::

::: code-group

rpc.call('triggerSomething')

<!--@include: @/snippets/rage-fw-rpc/0.3.0/declaration.md-->
// ---cut---
rpc.call<never, ClientEventNames>('triggerSomething')

:::

::: code-group

rpc.callAsync('triggerSomething').then(response => {
    console.log(`Received: ${response}`)
})

<!--@include: @/snippets/rage-fw-rpc/0.3.0/declaration.md-->
// ---cut---
rpc.callAsync<
    never, ClientEventNames, boolean
    >('triggerSomething')
    .then(response => {
        console.log(`Received: ${response}`)
    })

:::