fivem docsDeutsch

Entwicklung · FiveM Docs

FiveM NUI: HTML-Oberfläche mit Lua und JavaScript verbinden

NUI zeigt HTML-, CSS- und JavaScript-Oberflächen in einem Chromium-Fenster innerhalb von FiveM an. Die Spielseite und die Browserseite kommunizieren über Nachrichten und Callbacks.

Die NUI-Dateien anmelden

Im Ressourcenordner liegen fxmanifest.lua, client.lua und ein html-Verzeichnis mit index.html und zugehörigen Assets. ui_page beschreibt die Startseite. Alle an den Client auszuliefernden Dateien müssen in files deklariert sein.

fx_version 'cerulean'
game 'gta5'
ui_page 'html/index.html'
files { 'html/index.html', 'html/app.js' }
client_script 'client.lua'

Nachrichten und Fokus

SendNUIMessage übermittelt vom Client-Skript ein serialisierbares Objekt an den Browser. Der Browser empfängt dieses über window.addEventListener('message', ...). SetNuiFocus legt fest, ob Maus und Tastatur der Oberfläche zugewiesen werden.

Wenn du die Oberfläche schließt oder die Ressource gestoppt wird, muss der Fokus kontrolliert zurückgesetzt werden. Behandle Ressourcen-Neustarts als eigenen Fehlerfall.

SetNuiFocus(true, true)
SendNUIMessage({ action = 'open', title = 'Menü' })

-- Beim Schließen:
SetNuiFocus(false, false)

Callbacks sicher umsetzen

Browser-Anfragen an die Ressource gehen über einen HTTPS-NUI-Callback unter dem jeweiligen Ressourcennamen. Registriere serverunabhängige UI-Callbacks clientseitig mit RegisterNUICallback und rufe cb für jede Anfrage zuverlässig auf.

Vertraue dem Browser keine Serverberechtigungen an. Aktionen mit Inventar, Geld oder Spielerstatus benötigen serverseitige Berechtigungs- und Eingabeprüfungen.

Technische Beispiele sind Orientierungshilfen. Führe bei sicherheitskritischen Änderungen Backups durch und teste das Verhalten im echten FXServer sowie im FiveM-Client.