Добро пожаловать на BlackSAMP - ФОРУМ

Developer · 4 Апр 2025

Здравствуйте! Для разработки NUI интерфейсов для файв эм серверов мы так-же используем фреймворк cef.
Отличия разве что в том, что связываем верстку с сервером мы файлами .lua

Разбираемся как,

Во первых, мануал рассчитан на людей у которых уже установлен сервер fivem
Оставлю инструкцию по установке тут => Installing FiveM

Так-с.. Начнём!

После того как установили сервер заходим в папку resources и внутри неё создаём новую папку с названием nui

Скриншот папки:

Далее внутри папки nui создаем файлы _resource.lua , main.lua и папку html

Скриншот папки:

Код:

Внутри папки html создаем файлы index.html , style.css , listener.js

Заполним верстку для каждого файла:

index.html
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
<script src="./listener.js" type="text/javascript"></script>
</head>
<body>
<div id="container">

<h2>CEF FIVE:M Manual</h2>
<br>
<h2>RAGEMP PRO | MADARAdev</h2>
<h2> « Ах@$*ть скрипты FiveM на форуме рейджа. » </h2>
</div>
</body>
</html>


style.css
CSS:
@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Tilt+Neon&display=swap');
* {
color: #fff;
font-family: "Montserrat" !important;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;

}

.container {
text-shadow: 0px 0px 20px white;
position: absolute;
color: white;
margin: auto 0;
text-align: center;
background-color: #707BFB ;
border-radius: 40px;
border: 2px solid #040404 ;
padding:10px;
}


listener.js
JavaScript:
$(function(){
window.onload = (e) => {
window.addEventListener('message', (event) => {
var item = event.data;
if (item !== undefined && item.type === "ui") {
if (item.display === true) {
$("#container").show();
} else{
$("#container").hide();
}
}
});
};
});


Подключим файлы с вёрсткой.
Открываем только что созданный файл _resource.lua и вставляем код:

Код:
ui_page "html/index.html"

client_script "main.lua"

files {
"html/index.html",
"html/style.css",
"html/listener.js"
}


Вызывать браузер я буду командой, поэтому создам команду которая будет дергать эвент nui: on чтобы открывать браузер и эвент nui: off когда закрываю.
Переходим в main.lua и вставляем код:


Код:
local display = false
-- По умолчанию когда загружаем скрипт окно не открыто.

-- Создаём команду /on которая будет открывать браузерное окно триггером эвента nui:on.
RegisterCommand("on", function()
Citizen.CreateThread(function()
TriggerEvent("nui:on", true)
end)
end)

-- Создаём команду /off которая будет соответственно закрывать окно триггером эвента nui:off.
RegisterCommand("off", function()
Citizen.CreateThread(function()
TriggerEvent("nui:off", true)
end)
end)

-- Создаём эвенты

RegisterNetEvent("nui:on")
AddEventHandler("nui:on", function(value)
SentNUIMessage({
type = "ui",
display = true
})
end)


RegisterNetEvent("nui:off")
AddEventHandler("nui:off", function(value)
SentNUIMessage({
type = "ui"
display = false
})
end)

Далее в файле resource.cfg "вписываем" запуск нашего скрипта

Вот и всё! Так и работает CEF на серверах FIVEM. Значительных отличий в принципе нет :giggle:

Поиск

Добро пожаловать на BlackSAMP - ФОРУМ

Как использовать CEF на сервере Five:M

Developer

Разработчик