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":" Commencez par cr\u00e9er une petite application NUI de type t\u00e9l\u00e9phone pour apprendre l'int\u00e9gralit\u00e9 du cycle de vie : ouverture, message, callback et fermeture. Cet exemple affiche une note de session qui persiste pendant l'ex\u00e9cution de la ressource. Il n'a ni appels, ni service de messagerie, ni base de donn\u00e9es, ni d\u00e9pendance \u00e0 un framework ; les ajouter n\u00e9cessite une autorisation c\u00f4t\u00e9 serveur et une persistance distinctes.<\/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\/fr\/wp-json\/wp\/v2\/posts\/199625","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rpcrate.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rpcrate.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rpcrate.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rpcrate.com\/fr\/wp-json\/wp\/v2\/comments?post=199625"}],"version-history":[{"count":6,"href":"https:\/\/rpcrate.com\/fr\/wp-json\/wp\/v2\/posts\/199625\/revisions"}],"predecessor-version":[{"id":217336,"href":"https:\/\/rpcrate.com\/fr\/wp-json\/wp\/v2\/posts\/199625\/revisions\/217336"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rpcrate.com\/fr\/wp-json\/wp\/v2\/media\/199627"}],"wp:attachment":[{"href":"https:\/\/rpcrate.com\/fr\/wp-json\/wp\/v2\/media?parent=199625"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rpcrate.com\/fr\/wp-json\/wp\/v2\/categories?post=199625"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rpcrate.com\/fr\/wp-json\/wp\/v2\/tags?post=199625"}],"curies":[{"name":"wp","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