Leaderboard

Introduction Hello, So I have decided I should make this tutorial about how to use CEF alongside RAGEMP to make interactable UI because I have spent some time understanding it from examples without a clear tutorial, I am going to explain how to interact between the CEF browsers and RAGEMP client, and how to send/receive information from and to server. This tutorial is targeting new comers in RAGEMP but who have background in scripting and know how to run and connect their server locally. So the main points will be: 1-What is CEF 2-Sending information from CEF to RAGEMP client (and vice versa) 3-Sending information from RAGEMP to The Server (and vice versa) (I will be using C# Bridge API for working with the serverside scripting) Before we start you are going to need the following to better understand the tutorial: Basic knowledge in HTML, CSS and JavaScript (Optional – Nice to have) Bootstrap and JQuery Let’s start! What is CEF CEF is abbreviation to Chromium Embedded Framework an open source framework that allow the ability to embed HTML webpages into applications. RAGEMP already integrates the CEF so you don’t have to download anything externally to begin using it. CEF and RAGEMP Client So now we are going to learn how to create a browser inside the RAGEMP client and interact with it. I am going to teach by giving example, it is going to be a basic login/register system. First download or or create your own webpage design, If you don't know how to create a webpage just use my sample (Attached to this thread) and follow the tutorial. Start by going to RAGEMP/server-files/client_packages folder and create a new folder name it “Login” then inside the Login folder we’ve just created place the HTML,CSS and JS files that is related to the webpage inside and then create the (clientside) script we will call it “Main.js” that will be the main connecting point between the CEF browser, client and the server. NOTE: In the Login folder you are going to place the webpage files and all dependences such as Bootstrap or JQuery libraries. So to this point you should’ve something similar to this Dependences folder contains the minified JQuery and Bootstrap libraries, Links below: https://getbootstrap.com/docs/3.3/getting-started/ https://code.jquery.com/jquery-3.3.1.min.js/ So I have pre-made this simple page for the sake of this tutorial, I will link download to all of the files that I have used at the bottom of this thread. But you can go with any page design you like. Disclaimer: I am new to web development so it may not look that good but it does the job. Now we need to interact with this page, Inside the Login.html (assuming you already have made/imported a page) find the main components that you want to interact with and give them the ‘id’ attribute, in my case I need the buttons and text input elements, image below for more understanding Also notice how we referenced the “Login.js” script. We are going to use these inside our “Login.js” file, so Open the Login.js file and write the following: (Code is written using JQuery) $('#loginButton').click(() => { mp.trigger('loginInformationToServer', $('#loginUsernameText').val(), $('#loginPasswordText').val()); }); $('#registerButton').click(() => { mp.trigger('registerInformationToServer', $('#registerUsernameText').val(), $('#registerPasswordText').val()); }); So what this basically does is once the loginButton/registerButton is clicked is going to trigger (mp.trigger) an event with the given name and pass the values inside the text fields as arguments, that later we are going to catch that in our “Main.js” script. (This point is where we send information from CEF Browser to RAGEMP Client). Now that we have send the information and they are waiting to be caught, But before we do that we are going to show the browser window when a player connect to our server. Open “Main.js” and use mp.browsers.new(‘package://path’); In our case: we have the html page inside our Login folder. var loginBrowser = mp.browsers.new('package://Login/Login.html'); Now at this point when the player connects to our server this will show him our page that we’ve just made, it is still not functional yet until we catch the information that we’ve sent before. Let’s catch them now, inside the “Main.js” add the following: mp.events.add('loginInformationToServer', (username, password) => { mp.events.callRemote('OnPlayerLoginAttempt', username, password); }); mp.events.add('registerInformationToServer', (username, password) => { mp.events.callRemote('OnPlayerRegisterAttempt', username, password); }); I am not going to go into much details here on the syntax but what we are doing is catching the 'loginInformationToServer' and 'registerInformationToServer' events (like you’d do in any other client event in ragemp) and sending them directly to the server to verify the information passed. But before we forget go back to the client_packages folder and create or open the file ‘index.js’ and place require('./Login/Main.js'); to let the server know that this file contains JavaScript codes that related to RAGEMP client (mp.events.add, mp.events.callRemote and mp.browsers.new), a complete list found on ragemp wiki https://wiki.rage.mp/index.php?title=Client-side_functions RAGEMP Client and RAGEMP Server Now that we have sent the information from the CEF client to the RAGEMP client, and then to the RAGEMP server via (mp.events.callRemote) we didn’t catch the event on the server yet, so let’s go ahead and do that. It can be done in same ways but different syntax depending on which programming language you are using, I am going to be using C# because I am more familiar with but it can be easily done with JS serverside once you are familiar with scripting in it. So go ahead and inside any resource file that you are using type the following: [RemoteEvent("OnPlayerLoginAttempt")] public void OnPlayerLoginAttempt(Client player, string username, string password) { NAPI.Util.ConsoleOutput($"[Login Attempt] Username {username} | Password: {password}"); if(username == "Max" && password == "123") { player.TriggerEvent("LoginResult", 1); } else player.TriggerEvent("LoginResult", 0); } So The above code catch the event that is triggered when player sends the information to the server so we validate them then send back a response to the client with either success or fail depending on the player data, in ideal case we should check the information from a database but that’s out of the scope for this tutorial so I am just checking if his username is Max and password is 123 then we send information back to the client with result 1 (success) else we send the result of 0 (incorrect username/password) Same thing apply for the register event handle. Now you can notice a pattern here is that whenever we send an event from one place to another we need to catch it, so back to the “Main.js” and let’s handle the response sent from the server, Add the following: mp.events.add('LoginResult', (result) => { if (result == 1) { //Success we destroy the loginBrowser as we don't need it anymore loginBrowser.destroy(); mp.gui.cursor.show(false, false); mp.gui.chat.push("You have successfully logged in."); } else { //Failed we just send a message to the player saying he provided incorrect info //Here you can be creative and handle it visually in your webpage by using the (browser).execute or loginBrowser.execute in our case to execute a js code in your webpage mp.gui.chat.push('Incorrect password or username.'); } }); Similar to what we did when we caught function from CEF we did for catching from server and we checked if the value passed is 1 then the player succeeds in logging in else he fails. Now you can just run your server and connect with your client and you should see the login page appear, enter anything and hit login - it should message Then try using the combinations of Max and 123 and you should see and the window should disappear. Same practice apply to the register I will leave it for you to practice and try to implement that by yourself! Good luck! Summary Important things to remember: - From CEF browser to RAGEMP client => mp.trigger caught by mp.events.add - From RAGEMP client to RAGEMP server (C#) => mp.events.callRemote caught by [RemoteEvent()] flag and a function Now the other way around: - From RAGEMP server (C#) to RAGEMP client => (Client).TriggerEvent caught by mp.events.add - From RAGEMP client to CEF browser => (Browser).execute For more information about the syntax for these you can check the ragemp wiki NOTE: Sometimes you don’t need to send anything to the server, For example a browser that contains information about your server, you just need to contact between CEF and RAGEMP client. NOTE: Similarly if you want to use JavaScript for serverside scripting you can find the equivalent to my functions used and do the same, however everything done in clientside scripts (Main.js) should remain the same for both languages!! The End And here you’ve just completed the tutorial! Thanks for taking your time to read and if you have faced any problems or any question post a comment below and I will do my best to answer it. Also feel free to correct me if there is any suggestions or any syntax/logical errors. Happy coding! Files used in this tutorial: https://www.solidfiles.com/v/nYR8xn43j57jv

Summary of RAGE Multiplayer 1.1 updates since 1.1 Testing Release (*quickly* dumped from #quick-updates) API Client-side JS game methods now throw an exception (instead of 1) just pushing a notification on argument type mismatch 2) silently failing on argument count mismatch) Added client-side player.isTypingInTextChat (synchronized and works both for local and streamed remote players, intended to replace third party custom typing state synchronization that mostly was implemented *not the most optimized way*) Added mp.invoke("setTypingInChatState", state); (CEF) Updated client-/server C# libraries (server-side C# resources require recompilation) Added client-side C# RAGE.Util.MsgPack.Serialize (MsgPack library should not be used through scripts directly anymore) Added client-side C# RAGE.Util.MsgPack.Deserialize Added client-side C# RAGE.Util.Json.Serialize (unlike MsgPack, you still can use Json/XxHash libraries directly, this is just an easy to use wrapper) Added client-side C# RAGE.Util.Json.Deserialize Added client-side C# RAGE.Util.Json.DefaultSettings Added client-side C# RAGE.Util.XxHash64.Hash Added client-side C# RAGE.Util.MsgPack.ConvertFromJson Added client-side C# RAGE.Util.MsgPack.ConvertToJson Added client-side C# RAGE.Util.MsgPack.DefaultOptions CEF<->Client-side triggers now support larger strings Added: you can now spawn synchronized peds with automatic controller assignment ({dynamic: true, lockController: false}); disabled by default Added client-side playerReady event (triggered when all the server data is ready) Added mp.system.isFullscreen (RAGE.Ui.Windows.Fullscreen) Added mp.system.isFocused (RAGE.Ui.Windows.Focused) Added mp.system.notify({ title: string, text: string, attribute: string, duration: int, silent: bool }) (RAGE.Ui.Windows.Notify) Added RAGE.Ui.DefaultWindow.Call/ExecuteCachedJs Added client-side C# Input.Bind Added client-side C# Input.Unbind Added client-side C# VirtualKey enum (and Bind/Unbind/IsKeyUp/Down overloads) Added support of binding left/right buttons (L/RShift etc) separately Added missing server-side C# player own data API Added radius parameter to client-side blip constructor Added missing server-side C# Vehicle.Spawn(Vector3 position, float heading) Added: C# EntityPool.AsEnumerable() Added client-side C# Entity.GetSharedData ulong key overload Added seatId param to client-side OnPlayerLeaveVehicle event Updated: client-side playerLeaveVehicle now has vehicle param "api-threading-debugging" now also throws a C# exception, alongside with logging bad calls JS Error "Expected multiplayer object" now also throws a JavaScript exception, not crashing the server anymore if caught Fixes Fixed unoccupied vehicle synchronization related crash Fixed client-side JS intervals Fixed server crash on vehicle destroy Fixed driving synchronization glitch Fixed RAGE.Ui.Console.Verbosity not being available Fixed client-side C# damage events missing some params Fixed non-ASCII server path support Fixed "Server crashes when trying to use a command that has a player parameter, and a player cannot be found" Fixed: long initial vehicle streaming times Fixed 64-bit integers in triggers from client-side to server-side Fixed reported client-side C# events-related issues Fixed reported client-side streaming issues Fixed "Marker.Visible gets ignored on marker restreaming" Fixed dummyEntityDestroyed client-side event not fired Fixed launcher settings issues; also a bit overhauled it Fixed client-side C# receiving wrong entities from triggers Fixed "C# Server-side GetClothesDrawable and GetClothesTexture returns incorrect value" Fixed "Blips created server-side (C#) with another dimension assigned to them seem to act weird. I created some on resource start, and all of them are visible on join, including those that are in other dimensions." Fixed mp.game.invoke crash after frequent referenced array buffer usage Fixed "Launcher: open launcher -> open settings -> click on "Change path" and nothing will happen" Fixed "RAGE.Elements.Entities.Players.Streamed always return empty list" Fixed "player.stopAnimation()" Fixed client-side playerEnterVehicle 1.1 regression Fixed: client-side RAGE.Ui.Input.TakeScreenshot not available Fixed: "mp.game.gxt.get and mp.game.gxt.getDefault crashes the game if the gxt entry is unknown, should return 'NULL'" Fixed release build/anticheat conflict Unoccupied vehicle synchronization fixes Fixed mp.Pool.forEach-related issues Fixed server-side weapon anticheat blocking weapon if given exactly after taking it from the player due to a false positive Fixed client-side C# OnConsoleCommand function command argument Fixed client-side C# DummyEntity shared data getter Fixed client-side C# browser state events Fixed player vehicle data not available in server-side playerLeaveVehicle event, it's now cleaned up after the event Fixed vehicle exit animation Fixed incorrect UTF-8 to UTF-16 masterlist convert resulting in empty masterlist if specific server name used Fixed a bug when checkpoints get streamed in invisible and then collide detection doesn't get activated after making it visible without restreaming Fixed SetEntitySharedData Dictionary<string, object> overload Fixed server-side blip V/RDR2 branch regressions Fixed vehicle dimension change warping the player out of the vehicle Fixed a few vehicle-related issues Fixed server-side object rotation setter Fixed client console input Fixed arrow navigation in launcher not being enabled back after closing settings modal Fixed miscellaneous server issues Added 1.1 Linux server build to the updater image (direct link: https://cdn.rage.mp/updater/10_mNwuchuQ4ktWbR8d2N5jUzRt/server-files/linux_x64.tar.gz) Updated localisations Linux server build fixes Fixed server-side C# player.GetHeadOverlay Fixed vehicle synchronization glitches when the driver gets warped out of the vehicle Fixed vehicle damage ignored if vehicle gets re-streamed by client-side streamer without server-side streamer notification Fixed Cursor.Visible returning "freezeControl" value instead of an actual cursor state Fixes for recent C# API additions Fixed the "vehicle synchronization stop" bug Fixed several client-side streaming issues related to slow resource streaming resulting in undefined behavior in a few cases Fixed C# missing DLL error message on launch Fixed reported key bind issues Fixed reported Linux build issues Fixed regular static client-side peds flags not matching 0.3.7 Fixed entity.forceStreamingUpdate() Several server fixes of issues caught with emulated server stress tests Fixed sending expired entities through mp.events.callRemote (just null now) Fixed RAGE.Util.Json.Deserialize optional settings argument Fixed accidental vehicle respawning for its driver after leaving the car Fixed all vehicle extras enabled by default Fixed vehicle.Locked Fixed white screen popping up before UI is completely loaded Fixed vehicles tyre bug (needs confirmation?) Fixed player.playAnimation Fixed unoccupied vehicles teleport issue Decreased player/vehicle client-side streaming times Fixed history tab Fixed map object validation when it's created before player joins Fixed game freeze issue Fixed legacy/1.1 client-side C# conflict Fixed mp.storage issue Misc Added launcher option to disable Windows notifications (enabled by default) Improve launcher load times Updated: "enable-synchronization-extrapolation" has been replaced with "synchronization-extrapolation-multiplier" (0.0 to disable) Reimplemented blip naming API (solves random blip names disappearing) Handshake/initial loading stuff has been reimplemented: faster joining on many entities/data, fix of timeouts on packet lossy connections on joining; works parallel off main stuff going on Added client 0.3.7 compatibility mode (even supports launcher client packages download) Added CEF accelerated rendering toggle ability (launcher settings); it's disabled now by default as people seemed to have issues related to CEF rendering in 1.1+ Renamed /clientdata/pool_overrides.xml to: 1) pool_overrides_v.xml; 2) pool_overrides_rdr2.xml Added back RAGE Multiplayer's assets "default" pool limit overrides (custom server-sided gameconfig.xml 1.1 feature was supposed to be a more smart and flexible way but both are going to be present now) Server streamer performance optimizations Added launcher option to pick preferred voice input device A few optimizations of launcher downloader for heavy files Updater/launcher startup times improvements Optimized RAGE UI loading