rage-next-rpc v0.0.4

rage-next-rpc

A library for RAGE MP servers version 1.1+ for convenient communication between server-side, client-side, and CEF components.

Install

npm install rage-next-rpc

Initialization

server-side (index.ts)

import { rpc } from  'rage-next-rpc/packages/server';

rpc.init();

client-side (index.ts)

import { rpc } from  'rage-next-rpc/packages/client';

rpc.init();

// Register browsers

rpc.registerBrowser(
    'inventory', // Unique browser ID
    mp.browsers.new('package://inventory.html')
)

rpc.registerBrowser(
    'hud', // Unique browser ID
    mp.browsers.new('package://interface.html')
)

CEF (App.tsx React Component for example)

import { rpc } from 'rage-next-rpc/packages/cef';
import { useEffect } from 'react';

export default function App() {
    useEffect(() => {
        rpc.init(
          'inventory' // Unique browser ID
        );
    });

    return <>Inventory interface</>;
}

API Descriptions

Client-side API Description

• rpc.init() – start listening for all events.
• rpc.registerBrowser(browserId: string, browser: BrowserMp) – assign a unique identifier to the browser instance, which will be used on both the client and server sides to send events to the specified browser instance.
• rpc.call.browser(browserId: string, event: string, data?: any) – call an event in the specified browser.
• rpc.request.browser(browserId: string, event: string, data?: any) – call an event in the specified browser and receive a response (Promise).
• rpc.call.server(event: string, data?: any) – call an event on the server.
• rpc.request.server(event: string, data?: any) – call an event on the server and receive a response (Promise).
• rpc.listen<T>(event: string, callback: (data: T)) – listen for specified events and return responses (in case the event was triggered via rpc.request).
• rpc.call.internal(event: string, data?: any) – call an internal event.

Server-side API Description

• rpc.init() – start listening for all events.
• rpc.call.browser(player: PlayerMp, browserId: string, event: string, data?: any) – call an event in the specified browser.
• rpc.request.browser(player: PlayerMp, browserId: string, event: string, data?: any) – call an event in the specified browser and receive a response (Promise).
• rpc.call.client(player: PlayerMp, event: string, data?: any) – call an event on the client.
• rpc.request.client(event: string, data?: any) – call an event on the client and receive a response (Promise).
• rpc.listen<T>(event: string, callback: (player: PlayerMp, data: T)) – listen for specified events and return responses (in case the event was triggered via rpc.request).
• rpc.call.internal(player: PlayerMp, event: string, data?: any) – call an internal event.

CEF

• rpc.init(browserId: string) – start listening for all events for the specified browserId.
• rpc.call.server(event: string, data?: any) – call an event on the server.
• rpc.request.server(browserId: string, event: string, data?: any) – call an event on the server and receive a response (Promise).
• rpc.call.client(event: string, data?: any) – call an event on the client.
• rpc.request.client(event: string, data?: any) – call an event on the client and receive a response (Promise).
• rpc.listen<T>(event: string, callback: (data: T)) – listen for specified events and return responses (in case the event was triggered via rpc.request).
• rpc.call.internal(event: string, data?: any) – call an internal event.

Usage

Server -> CEF

server-side

import { rpc } from  'rage-next-rpc/packages/server';

mp.events.add('playerReady', (player: PlayerMp) => {
  rpc.call.browser(
    player, // RAGEMP player 
    'inventory', // Browser ID 
    'myInventoryAction', // Event
    {
      item: 'knife',
      action: 'put',
      count: 1,
    } // Data type: boolean, string, number, object or array
  )
});

CEF

import { rpc } from  'rage-next-rpc/packages/cef';

rpc.listen('myInventoryAction', ({item, action, count}) => {
  // use your data
})

TBD