How to pass a message from client.lua to NUI

I am new at FiveM scripting and doesn’t understand how to pass the message from client.lua to NUI, I am able only to pass true or false statements to NUI, but text that updates like real world time to NUI and in NUI to update the

. It will be the best for someone to jus sent example how to make that updates time, and the info passes to NUI with all explanation step by step.

https://docs.fivem.net/docs/scripting-manual/nui-development/full-screen-nui/#nui-messages

yeah, I read it but still don’t understand where I am making a problem :confused:

Could you show us the code that you are having issues with?

it would be better for someone that knows, to write the whole script with explanations what every thing means :confused:

Well, there are actually 2 ways for the lua script to communicate with nui. The first is to pass the message from the client.lua to the UI side, and the second way is to make a callback from the UI side to the client and then back to the UI (kinda hard to understand, especially the second way, but I hope you will understand it with code example).

So, the first way - SendNUIMessage
(There are actually two functions - SendNUIMessage (NUI) and SendNuiMessage (Nui) - yeah it is a difference, the first function’s argument is table, and the second function’s argument is json string, so for me it is better to use the first function).

Sending message to UI page from client script

SendNUIMessage({ -- you can add here as many table's keys as you want
    action = "log something",
    value = 123,
    anything = "foo",
    another = true
})

Handling sent message on UI page (script.js)

window.addEventListener("message", function(event){
    let e = event.data;
    if(e.action == "log something"){
        console.log("Logging something, btw the value is equal to " + e.value);
    }
})

The 2nd way is to pass message from nui, to client - it is possible via fetch (it is explained here NUI callbacks - Cfx.re Docs)

Fetching message

fetch(`https://${GetParentResourceName()}/YOUR_CALLBACK_NAME`, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json; charset=UTF-8',
    },
    body: JSON.stringify({
        anything: "anything",
        value: 54321
    })
});

^ this code sends “message” (to the client script) which is:

{
    anything: "anything",
    value: 54321
}

Handling callback on client side

RegisterNUICallback("YOUR_CALLBACK_NAME", function(data, cb)
    print(data.anything)
    print(data.value)
    cb(true) -- always callback value, even if you won't use it
end)

Soo that’s all I think you need to pass messages from script to UI and vice versa, I hope I helped :wink:

1 Like

Thanks for response! I had I guess a problem, can you do like write another function in wich includes like name = esx function or like somthing that, and the write sendNUIMesssage({ anything = name})

Does chatgpt exist in your country, you’ll get a lot faster results asking there. Since you have yet to give any information on What you want the script to do, nor have you provided any sample code on what needs to be fixed, you’re literally asking for someone to code something for you with no detail to do so.

It depends on what function do you want to use and what should it do.

ChatGPT is so primitive (in my opinion) and every time I tried to use it for scripting purpose it gave me wrong answers. If someone wants to learn FiveM scripting the best way is to contact real person. However I agree in 100% with your last sentence

I disagree, you just need to know how to prompt it. It’s been very helpful for me. While it can get things wrong from time to time and make stuff up, overall it is extremely helpful IMO.

The biggest issue ChatGPT has with fivem scripting is sometimes it makes up natives, you just have to correct it and either find the correct native or tell it to do it another way.

As an example, I just did this on ChatGPT, for the OP’s scenario:

1 Like

Lmao you just contradicted yourself xD. “The biggest issue ChatGPT has with fivem scripting is sometimes it makes up natives, you just have to correct it and either find the correct native or tell it to do it another way.” therefore it is primitive. When you are making an advanced script (and if you just started with scripting then every script is advanced) and you don’t know many natives, it is hard to correct ChatGPT’s code. Of course you can send error message and tell it to correct the code, but it takes a lot of time. But don’t get me wrong, I think that ChatGPT is a very big step in technology development, it is very useful and can help in many things, but it is not perfect and for me it is still better to contact a human developer help & tips how to write and understand the code.

I still don’t think that makes it primitive, it just has outdated information. The documentation of FiveM natives has updated quite a bit over the past 2 years, so it just isn’t trained on the updated information. And you can simply search to see if such natives exist at Native Reference - Cfx.re Docs. And yea, sure if you have to correct it constantly, it can be a lot of time, but what takes even more time, if manually searching everything trying to find breadcrumbs of bits of code to help you try to achieve your goal.

My point is, even if you’re a novice programmer or just starting out, it has the potential of accelerating your ability to program tremendously if used appropriately.

I’m not the best with js/html/css myself, but with chatgpt’s assistance, I’ve been able to make anything that I come up with. Albeit, it’s not pretty or fancy, but it does the functions that I need it to.