Trigger SendNuiMessage nothing happen

FiveM Resource Development Discussion
1

i try to figure out what is SendNuiMessage by make simple function, but nothing happen.

there is something wrong with my code? or i need to add more dependency?

AddEventHandler('esx:onPlayerDeath', function(data)
    print(json.encode(data))


    SendNuiMessage(json.encode({
        type = "info",
        length = 3000,
        message = "TESTING"
    }))
end)
2

Letā€™s start with, you didnā€™t provide HTML(JS) with the script nor fxmanifest.lua. Anyway,

SendNuiMessage => SendNUIMessage

The 2 native is working, yours is wrong one(canā€™t check for sure cause FiveM gives me mac error)
Another thing, you are sending string, not table. remove json.encode and you will be able to retrieve table in js.

3

@rocket5115 is absolutely correct.
There could be an issue with your HTML, JS or fxmanifest, but we donā€™t know because they arenā€™t provided. But there ARE issues with your Lua and they were pointed out.
To clarify, this is what it should look like.

AddEventHandler('esx:onPlayerDeath', function(data)
    print(json.encode(data))
    SendNUIMessage({
        type = "info",
        length = 3000,
        message = "TESTING"
    })
end)

Nothing will happen with this though, unless you have your fxmanifest set up correctly and you have the correct JS to handle this NUI message.

4

@rocket5115 @DrAceMisanthrope

ohh i see, so SendNUIMessage itā€™s about how to connect/communicate from LUA to JS ?

5

Correct.
SendNUIMessage is basically ā€œhere JS, have this dataā€, then in JS/Jquery you go "thanks, I will do ā€˜thisā€™ with it. Then you can also POST in JS, to send data back to Lua. Thatā€™s known as a NUI callback.

Hereā€™s an example of sending data as a NUI message, then sending data back with a NUI callback. Itā€™s not a realistic use, but itā€™s to show how it all works.

When you use the command ā€œ/testnuiā€ it will print ā€œHello, World!ā€ in your F8 console and set the content of a div in your UI to ā€œHelloā€ and show it. Using ā€œ/testnuiā€ again will clear the div and hide it. It toggles.

I have commented it all to show what is going on, the best I can.

fxmanifest.lua:

fx_version "cerulean"
game "gta5"

ui_page "index.html"

files {
    "index.html"
}

client_script "client.lua"

client.lua:

local firstWord = "Hello"

RegisterCommand("testnui" function()
	SendNUIMessage({ -- This sends the following table of data to JS
		action = "test",
		first = firstWord
	})
end)

RegisterNUICallback("printTest", function(data)
	print(data.first..data.second) -- This will print "Hello, World!" to your F8 console
end)

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<script src="nui://game/ui/jquery.js" type="text/javascript"></script> <!-- This is the JQuery source, built into the game -->
	<link rel="stylesheet" href="./style.css"> <!-- This is some imaginary CSS file that you would use to handle the styling -->
	<title>NUI Example</title>
</head>
	<body>
		<div id="example" style="display: none;"></div> <!-- This div content will be set when "/testnui" command is used -->
		<script>
			var set = false;
			window.addEventListener("message", function (event) {	
				if (event.data.action == "test") { // This checks if the action parameter from the SendNUIMessage was "test"
					set = !set; // This toggles the variable "set"
					if (set == true) {
						$("#example").html(event.data.first).show(); // This sets the content of the "example" div in index.html to show "Hello" and displays the div
						$.post("http://"+GetParentResourceName()+"/printTest", JSON.stringify({ // This sends data back to Lua. In this case, 2 data properties; "first" & "second"
							first: event.data.first,
							second: ", World!"
						}));
					} else {
						$("#example").html("").hide(); // This clears the content of the "example" div in index.html and hides it
					}
				}
			});
		</script>
	</body>
</html>
1 Like
6

awesome! thanks man, helpful!

finally :smiley: