Interfaces NUI (HTML/CSS/JS) · Lección 3/3 · 9 min

Comunicar Lua y JavaScript

Lua manda datos a la web con SendNUIMessage; la web pide cosas a Lua con fetch a un callback.

La NUI y el juego son dos mundos que hablan en dos direcciones: de Lua a JS (para pintar datos) y de JS a Lua (para acciones del jugador).

Lua → JS: pintar datos

lua

-- Manda el dinero del jugador a la interfaz
SendNUIMessage({ action = 'setMoney', cash = 1500, bank = 9200 })

client.lua

javascript

window.addEventListener('message', (e) => {
  if (e.data.action === 'setMoney') {
    document.getElementById('cash').textContent = e.data.cash + '€';
    document.getElementById('bank').textContent = e.data.bank + '€';
  }
});

app.js

JS → Lua: una acción

javascript

// El jugador pulsa 'Retirar 100€'
fetch(`https://${GetParentResourceName()}/retirar`, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ cantidad: 100 }),
}).then(r => r.json()).then(res => {
  if (res.ok) console.log('retirado');
});

app.js

lua

RegisterNUICallback('retirar', function(data, cb)
  -- ¡valida en el SERVIDOR! (callback de servidor)
  ESX.TriggerServerCallback('banco:retirar', function(ok)
    cb({ ok = ok })
  end, data.cantidad)
end)

client.lua

GetParentResourceName() es el nombre de tu recurso; la URL del fetch siempre es https://NOMBRE/nombreCallback. Y recuerda: el JS y el cliente NO son de fiar, la decisión real va en el servidor.

Practica lo aprendido

0/3

Test

En una NUI, ¿cómo viaja la información en cada dirección?

Pista

Para PINTAR datos manda Lua; para una ACCIÓN del jugador llama la web.

Rellena los huecos

Completa el fetch del JS hacia un callback de Lua: la URL usa el nombre del recurso y el método es POST.

1fetch(`https://${()}/retirar`, {

2 method: '',

3 body: JSON.stringify({ cantidad: 100 }),

4});

Pista

La URL es https://NOMBRE/callback; NOMBRE lo da GetParentResourceName(). Los callbacks usan POST.

Ordena el código

Ordena el JS que recibe datos de Lua (SendNUIMessage) y pinta el dinero en la interfaz.

Coloca las líneas en el orden correcto con las flechas.

});

window.addEventListener('message', (e) => {

}

document.getElementById('cash').textContent = e.data.cash + '€';

if (e.data.action === 'setMoney') {

Pista

Escucha el evento 'message', comprueba el action, pinta el valor y cierra.

Reto: prográmalo tú

Haz que un botón 'Refrescar' del HTML pida a Lua el dinero actual y lo repinte.

Escríbelo tú en tu editor (VS Code) y pruébalo en tu servidor. Aquí se aprende haciéndolo, no copiando.

Ver pista

fetch '/getMoney' → RegisterNUICallback → ESX.TriggerServerCallback → cb con los valores.

Escribe aquí tu solución:

← Mostrar y ocultar la interfaz (el foco)Fin del módulo, volver a la Academia

¿Qué tal esta lección?