Build a small phone-style NUI app first to learn the complete open, message, callback and close lifecycle. This example shows a session note that stays while the resource runs. It has no calls, messaging service, database or framework dependency; adding those requires separate server-side authorization and persistence.<\/p>\n
Create Add Type a note, close with the button and reopen. The note should remain for this resource session. Test Escape, repeated open\/close and stopping the resource while open; game input should be released. Reconnecting or restarting the resource creates a new UI session and clears the note.<\/p>\n The browser calls the resource callback by its actual parent name. Lua always replies through An existing phone resource may expose its own app SDK; use that supported integration instead of running a second full phone. Persistent contacts need character ownership checks on the server, validated lengths, parameterized queries and a migration for the installed schema.<\/p>\n Real calls need the chosen voice resource\u2019s supported integration. Never accept an arbitrary character identifier from the UI as proof of access, or claim a contacts form is a complete secure phone system.<\/p>\n Cfx.re \u2014 nui callbacks<\/a> \u00b7 Cfx.re \u2014 resource manifest<\/a><\/p>\n","protected":false},"excerpt":{"rendered":" Crea primero una peque\u00f1a aplicaci\u00f3n NUI estilo tel\u00e9fono para aprender el ciclo completo de abrir, enviar mensajes, ejecutar callbacks y cerrar. Este ejemplo muestra una nota de sesi\u00f3n que permanece mientras el recurso se ejecuta. No tiene llamadas, servicio de mensajer\u00eda, base de datos o dependencia de framework; a\u00f1adir eso requiere autorizaci\u00f3n y persistencia separadas del lado del servidor.<\/p>","protected":false},"author":1,"featured_media":199627,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2340,1899],"tags":[3001],"class_list":["post-199625","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-lua-scripting","category-tutorials","tag-fivem-script"],"_links":{"self":[{"href":"https:\/\/rpcrate.com\/es\/wp-json\/wp\/v2\/posts\/199625","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rpcrate.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rpcrate.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rpcrate.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rpcrate.com\/es\/wp-json\/wp\/v2\/comments?post=199625"}],"version-history":[{"count":6,"href":"https:\/\/rpcrate.com\/es\/wp-json\/wp\/v2\/posts\/199625\/revisions"}],"predecessor-version":[{"id":217336,"href":"https:\/\/rpcrate.com\/es\/wp-json\/wp\/v2\/posts\/199625\/revisions\/217336"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rpcrate.com\/es\/wp-json\/wp\/v2\/media\/199627"}],"wp:attachment":[{"href":"https:\/\/rpcrate.com\/es\/wp-json\/wp\/v2\/media?parent=199625"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rpcrate.com\/es\/wp-json\/wp\/v2\/categories?post=199625"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rpcrate.com\/es\/wp-json\/wp\/v2\/tags?post=199625"}],"curies":[{"name":"gracias","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}resources\/[local]\/tutorial_phone\/<\/code> with fxmanifest.lua<\/code>, client.lua<\/code> and index.html<\/code>. The example targets the GTA V Legacy gta5<\/code> resource runtime. Check Cfx.re\u2019s Enhanced migration guidance before adapting it to an Enhanced deployment.<\/p>\nfxmanifest.lua<\/code>:<\/p>\nfx_version 'cerulean'\ngame 'gta5'\nui_page 'index.html'\nfiles { 'index.html' }\nclient_script 'client.lua'<\/code><\/pre>\nclient.lua<\/code>:<\/p>\nlocal visible = false\nlocal ready = false\n\nlocal function closePhone()\n visible = false\n SetNuiFocus(false, false)\n SendNUIMessage({ action = 'close' })\nend\n\nRegisterCommand('tutorial_phone', function()\n if not ready then\n print('Phone UI is loading; try again shortly.')\n return\n end\n if visible then closePhone(); return end\n visible = true\n SetNuiFocus(true, true)\n SendNUIMessage({ action = 'open' })\nend, false)\n\nRegisterNUICallback('ready', function(_, cb)\n ready = true\n cb({ ok = true })\nend)\n\nRegisterNUICallback('close', function(_, cb)\n closePhone()\n cb({ ok = true })\nend)\n\nAddEventHandler('onClientResourceStop', function(name)\n if name == GetCurrentResourceName() and visible then\n SetNuiFocus(false, false)\n end\nend)<\/code><\/pre>\nindex.html<\/code>:<\/p>\n<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Session note<\/title>\n<style>\nbody { margin: 0; background: transparent; font: 18px system-ui; }\n#phone { position: fixed; right: 4vw; bottom: 4vh; width: min(320px, 85vw);\n padding: 24px; box-sizing: border-box; color: #fff; background: #18222d;\n border-radius: 20px; }\n[hidden] { display: none !important; }\ntextarea { box-sizing: border-box; width: 100%; min-height: 140px; font: inherit;\n margin: 12px 0; padding: 8px; }\nbutton { font: inherit; padding: 10px 16px; cursor: pointer; }\n:focus-visible { outline: 3px solid #67d7ff; outline-offset: 3px; }\n<\/style>\n<\/head>\n<body>\n<section id=\"phone\" role=\"dialog\" aria-label=\"Session note\" hidden>\n <h1>Session note<\/h1>\n <label for=\"note\">What will your character do next?<\/label>\n <textarea id=\"note\" maxlength=\"500\"><\/textarea>\n <p>This note clears when the resource restarts.<\/p>\n <button id=\"close\" type=\"button\">Close<\/button>\n <p id=\"error\" role=\"status\"><\/p>\n<\/section>\n<script>\nconst phone = document.getElementById('phone');\nconst note = document.getElementById('note');\nconst error = document.getElementById('error');\nasync function call(name) {\n const response = await fetch(`https:\/\/${GetParentResourceName()}\/${name}`, {\n method: 'POST', headers: { 'Content-Type': 'application\/json' }, body: '{}'\n });\n if (!response.ok) throw new Error('NUI callback failed');\n return response.json();\n}\nwindow.addEventListener('message', ({ data }) => {\n if (data?.action === 'open') {\n phone.hidden = false; error.textContent = ''; note.focus();\n } else if (data?.action === 'close') {\n phone.hidden = true;\n }\n});\nasync function close() {\n try { await call('close'); }\n catch { error.textContent = 'Could not close. Check the F8 console.'; }\n}\ndocument.getElementById('close').addEventListener('click', close);\nwindow.addEventListener('keydown', event => {\n if (event.key === 'Escape' && !phone.hidden) { event.preventDefault(); close(); }\n});\ncall('ready').catch(() => console.error('Phone readiness callback failed.'));\n<\/script>\n<\/body>\n<\/html><\/code><\/pre>\nStart and verify<\/h2>\n
ensure tutorial_phone<\/code> to the active server configuration. On your test server, run refresh<\/code> and ensure tutorial_phone<\/code>, connect, then run tutorial_phone<\/code> in F8. The app should open and focus its note field.<\/p>\nInspect the NUI boundary<\/h2>\n
cb<\/code>, and the browser handles a failed request. Follow Cfx.re\u2019s NUI debugging instructions<\/a> to inspect console and callback requests on your client.<\/p>\nAdd real phone features deliberately<\/h2>\n
Reference documentation<\/h2>\n