Client JavaScript Overview

Client resources run JavaScript through the Varion client runtime. The runtime injects a global varion object, the native bridge and resource/manifest helpers.

The full varion.* reference is on the Client JS API page. Dedicated pages: WebView and GTA natives.

Resource Config

Client scripts are enabled from resource.toml:

enabled = true
type = "js"
main = "server/main.js"
client-type = "js"
client-main = "client/main.js"
client-files = [ "client/**" ]

The server manifest includes client resources, and the client runtime loads the configured client-main from the resource cache.

Events

varion.on('resourceStart', (name) => varion.log(`start ${name}`));
varion.onServer('chat:addMessage', (author, message) => {});
varion.emitServer('chat:message', 'hello');

varion.onServerUnreliable and varion.emitServerUnreliable are also implemented.

RPC

const result = await varion.callServer('inventory:get');

varion.onRpc('client:ping', async () => {
  return { pong: true };
});

Resources And HTTP

const config = varion.getResourceConfig('mymode');
const path = varion.getResourcePath('mymode', 'client/main.js');
const url = varion.assetUrl('ui-pack', 'index.html');
const response = await varion.Http.getJson('/server-info.json');

varion.HttpClient validates protocol, host and port against the server manifest and asset bases before sending a request.

Storage

varion.LocalStorage.set('token', 'value');
varion.LocalStorage.save();

Local storage is cached in the client runtime and flushed on resource stop.

See Also

• Client JS API — the full runtime reference (events, entities, voice, audio, HTTP, files, WebSocket, permissions, stats, utils, etc.).
• WebView — overlay/DUI UI, WebView methods and events.
• GTA natives — calling GTA natives from client JS.

Source Backing

This page is derived from src/network/CNetworkManager.cpp, client/src/scripting/CClientScriptRuntime.cpp, sdk/client-js-runtime/injected/events-bootstrap.js, sdk/client-js-runtime/injected/mvalue-bootstrap.js and sdk/client-js-runtime/injected/services-bootstrap.js.