293 lines
7.6 KiB
Markdown
293 lines
7.6 KiB
Markdown
<!-- #region installation -->
|
|
::: code-group
|
|
```ts twoslash [lib/rpc.ts]
|
|
// @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 */)
|
|
```
|
|
:::
|
|
<!-- #endregion installation -->
|
|
|
|
<!-- #region installationClient -->
|
|
::: code-group
|
|
```ts twoslash [client/index.ts]
|
|
// @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')
|
|
```
|
|
:::
|
|
<!-- #endregion installationClient -->
|
|
|
|
<!-- #region syntax -->
|
|
```ts twoslash
|
|
<!--@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 ++]
|
|
```
|
|
<!-- #endregion syntax -->
|
|
|
|
<!-- #region rpcConfig -->
|
|
```ts twoslash
|
|
// @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
|
|
})
|
|
```
|
|
<!-- #endregion rpcConfig -->
|
|
|
|
<!-- #region register -->
|
|
::: code-group
|
|
```ts [Simple]
|
|
rpc.register('playerJoin', (player: PlayerMp) => {
|
|
console.log(`Connected: ${player.socialClub}`)
|
|
})
|
|
```
|
|
```ts twoslash [With types]
|
|
<!--@include: @/snippets/rage-fw-rpc/0.3.0/declaration.md-->
|
|
// ---cut---
|
|
rpc.register<
|
|
[player: PlayerMp], void, ServerEventNames
|
|
>('playerJoin', (player) => {
|
|
console.log(`Connected: ${player.socialClub}`)
|
|
})
|
|
```
|
|
:::
|
|
<!-- #endregion register -->
|
|
|
|
<!-- #region unregister -->
|
|
::: code-group
|
|
```ts [Simple]
|
|
rpc.unregister('playerJoin')
|
|
```
|
|
```ts twoslash [With types]
|
|
<!--@include: @/snippets/rage-fw-rpc/0.3.0/declaration.md-->
|
|
// ---cut---
|
|
rpc.unregister<ServerEventNames>('playerJoin')
|
|
```
|
|
:::
|
|
<!-- #endregion unregister -->
|
|
|
|
<!-- #region callClient -->
|
|
::: code-group
|
|
```ts [Simple (browser)]
|
|
rpc.callClient('updatePlayerData', ['argument'])
|
|
```
|
|
```ts [Simple (server)]
|
|
const player = {} satisfies PlayerMp
|
|
rpc.callClient(player, 'updatePlayerData', ['argument'])
|
|
```
|
|
```ts twoslash [With types (browser)]
|
|
<!--@include: @/snippets/rage-fw-rpc/0.3.0/declaration.md-->
|
|
// ---cut---
|
|
rpc.callClient<
|
|
[string], ClientEventNames
|
|
>('updatePlayerData', ['argument'])
|
|
```
|
|
```ts twoslash [With types (server)]
|
|
<!--@include: @/snippets/rage-fw-rpc/0.3.0/declaration.md-->
|
|
// ---cut---
|
|
const player = {} satisfies PlayerMp
|
|
rpc.callClient<
|
|
[string], ClientEventNames
|
|
>(player, 'updatePlayerData', ['argument'])
|
|
```
|
|
:::
|
|
<!-- #endregion callClient -->
|
|
|
|
<!-- #region callClientAsync -->
|
|
::: code-group
|
|
```ts [Simple (browser)]
|
|
rpc.callClientAsync('updatePlayerData', ['argument'])
|
|
.then(response => {
|
|
console.log(`Received: ${response}`)
|
|
})
|
|
```
|
|
```ts [Simple (server)]
|
|
const player = {} satisfies PlayerMp
|
|
rpc.callClientAsync(player, 'updatePlayerData', ['argument'])
|
|
.then(response => {
|
|
console.log(`Received: ${response}`)
|
|
})
|
|
```
|
|
```ts twoslash [With types (browser)]
|
|
<!--@include: @/snippets/rage-fw-rpc/0.3.0/declaration.md-->
|
|
// ---cut---
|
|
rpc.callClientAsync<
|
|
[string], ClientEventNames, boolean
|
|
>('updatePlayerData', ['argument'])
|
|
.then(response => {
|
|
console.log(`Received: ${response}`)
|
|
})
|
|
```
|
|
```ts twoslash [With types (server)]
|
|
<!--@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}`)
|
|
})
|
|
```
|
|
:::
|
|
<!-- #endregion callClientAsync -->
|
|
|
|
<!-- #region callServer -->
|
|
::: code-group
|
|
```ts [Simple]
|
|
rpc.callServer('updatePlayerData', ['argument'])
|
|
```
|
|
```ts twoslash [With types]
|
|
<!--@include: @/snippets/rage-fw-rpc/0.3.0/declaration.md-->
|
|
// ---cut---
|
|
rpc.callServer<
|
|
[string], ServerEventNames
|
|
>('updatePlayerData', ['argument'])
|
|
```
|
|
:::
|
|
<!-- #endregion callServer -->
|
|
|
|
<!-- #region callServerAsync -->
|
|
::: code-group
|
|
```ts [Simple]
|
|
rpc.callServerAsync('updatePlayerData', ['argument'])
|
|
.then(response => {
|
|
console.log(`Received: ${response}`)
|
|
})
|
|
```
|
|
```ts twoslash [With types]
|
|
<!--@include: @/snippets/rage-fw-rpc/0.3.0/declaration.md-->
|
|
// ---cut---
|
|
rpc.callServerAsync<
|
|
[string], ServerEventNames, boolean
|
|
>('updatePlayerData', ['argument'])
|
|
.then(response => {
|
|
console.log(`Received: ${response}`)
|
|
})
|
|
```
|
|
:::
|
|
<!-- #endregion callServerAsync -->
|
|
|
|
<!-- #region callBrowser -->
|
|
::: code-group
|
|
```ts [Simple (client)]
|
|
rpc.callBrowser('updatePlayerData', ['argument'])
|
|
```
|
|
```ts [Simple (server)]
|
|
const player = {} satisfies PlayerMp
|
|
rpc.callBrowser('updatePlayerData', ['argument'])
|
|
```
|
|
```ts twoslash [With types (client)]
|
|
<!--@include: @/snippets/rage-fw-rpc/0.3.0/declaration.md-->
|
|
// ---cut---
|
|
rpc.callBrowser<
|
|
[string], BrowserEventNames
|
|
>('updatePlayerData', ['argument'])
|
|
```
|
|
```ts twoslash [With types (server)]
|
|
<!--@include: @/snippets/rage-fw-rpc/0.3.0/declaration.md-->
|
|
// ---cut---
|
|
const player = {} satisfies PlayerMp
|
|
rpc.callBrowser<
|
|
[string], BrowserEventNames
|
|
>(player, 'updatePlayerData', ['argument'])
|
|
```
|
|
:::
|
|
<!-- #endregion callBrowser -->
|
|
|
|
<!-- #region callBrowserAsync -->
|
|
::: code-group
|
|
```ts [Simple (client)]
|
|
rpc.callBrowserAsync('updatePlayerData', ['argument']).then(response => {
|
|
console.log(`Received: ${response}`)
|
|
})
|
|
```
|
|
```ts [Simple (server)]
|
|
const player = {} satisfies PlayerMp
|
|
rpc.callBrowserAsync('updatePlayerData', ['argument']).then(response => {
|
|
console.log(`Received: ${response}`)
|
|
})
|
|
```
|
|
```ts twoslash [With types (client)]
|
|
<!--@include: @/snippets/rage-fw-rpc/0.3.0/declaration.md-->
|
|
// ---cut---
|
|
rpc.callBrowserAsync<
|
|
[string], BrowserEventNames, boolean
|
|
>('updatePlayerData', ['argument'])
|
|
.then(response => {
|
|
console.log(`Received: ${response}`)
|
|
})
|
|
```
|
|
```ts twoslash [With types (server)]
|
|
<!--@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}`)
|
|
})
|
|
```
|
|
:::
|
|
<!-- #endregion callBrowserAsync -->
|
|
|
|
<!-- #region call -->
|
|
::: code-group
|
|
```ts [Simple]
|
|
rpc.call('triggerSomething')
|
|
```
|
|
```ts twoslash [With types]
|
|
<!--@include: @/snippets/rage-fw-rpc/0.3.0/declaration.md-->
|
|
// ---cut---
|
|
rpc.call<never, ClientEventNames>('triggerSomething')
|
|
```
|
|
:::
|
|
<!-- #endregion call -->
|
|
|
|
<!-- #region callAsync -->
|
|
::: code-group
|
|
```ts [Simple]
|
|
rpc.callAsync('triggerSomething').then(response => {
|
|
console.log(`Received: ${response}`)
|
|
})
|
|
```
|
|
```ts twoslash [With types]
|
|
<!--@include: @/snippets/rage-fw-rpc/0.3.0/declaration.md-->
|
|
// ---cut---
|
|
rpc.callAsync<
|
|
never, ClientEventNames, boolean
|
|
>('triggerSomething')
|
|
.then(response => {
|
|
console.log(`Received: ${response}`)
|
|
})
|
|
```
|
|
:::
|
|
<!-- #endregion callAsync --> |