CEF Boilerplate

Pride · 18. Februar 2017

Wunderschönen Abend,

//:e
hat wer für mich eventuell ne Erklärung mit Beispiel wie ich eine PHP Seite anzeigen lassen kann wodrüber mein Login / Register läuft?
Wie kann ich PHP oder HTML Seiten InGame anzeigen das ich JavaScripts brauche ist mir schon bewusst ich habe mich ein wenig durch das GTA: Network Wiki gelesen.

Jedoch weis ich nicht, wie ich zum Beispiel abfragen kann ob die Anmeldung erfolgreich ist. Wenn ja soll er ja auch spawnen etc.

Ich hoffe meine Fragerei ist etwas verständlich und nicht kompletter Kauderwelsch.

Grüße
PrideGame

datgame · 18. Februar 2017

Du brauchst dafür kein PHP. Du zeigst einfach ein Input Feld für das Passwort und einen Button an. Wenn der Button geklickt wird, überprüfst du server-seitig, ob das Passwort stimmt und spawnst ihn dann bzw. zeigst eine Fehlermeldung an.

Pride · 18. Februar 2017

Gut, ich brauch kein PHP deine "Einfach/Einfach" Wörter helfen mir aber nicht wirklich weiter. Wie kann ich mir den Input davon holen es soll ja in einem JS Script zurück an mein C# gesendet werden oder etwa nicht?
//e:

Ich habe mir Input Felder erstellt mit Button etc. jedoch steige ich einfach nicht dahinter wie ich Abfragen kann ob die Eingabe korrekt ist. Ich würde gern dahinter steigen und nicht einfach nur ein Copy & Paste Tutorial nachmachen.
Ich kann das ja später auch öfters gebrauchen bezüglich anderer Systeme deswegen würde ich gern paar Sachen drüber lernen. Vor allem, warum brauch ich dafür JS was macht diese Sprache das man sie dafür verwendet?

**root** · 18. Februar 2017

Prinzipiell muss dir als erstes mal klar werden das CEF JS != Client Side JS ist. Ich sag das jetzt einfach mal im voraus um allfällige spätere Verwirrungen vorzubeugen.

---

Nun denn. Ich nehme an du hast es bereits hingekriegt im CEF Browser dein html File anzuzeigen.

In der HTML Datei machst du nun einen Script Teil mit einer Funktion. zb Login.
Auf den Login Button machst du ein click Event. (JQuery ist nicht standardmäßig inkludiert!)
In der Login Funktion hollst du dir wie beim Normalen Browser via Val die Input Boxen Values.
Dann kannst du mittels resourceCall die Variablen an dein Client Side JS übergeben:

JavaScript

resourceCall("ServerLogin", username+"", password+"");

In deinem Client Side JS File erstellst du nun die Funktion die du beim ResourceCall angegeben hast. (In diesem Fall ServerLogin)
In diesem machst du eigentlich nichts anderes als das ganze zum Server zu schicken:

JavaScript

function ServerLogin(username, password) {
	API.triggerServerEvent("login", username, password);
}

Bei deinem onClientEventTrigger in C# fragst du nun ab ob das Event "login" heisst.
Wenn das der fall ist kannst du nun mit dem User namen und Passwort das Login machen.
Dann kannst du mittels TriggerClientEvent wieder Daten zurück an den Client Schicken. Siehe hierzu: onServerEventTrigger (im Client Side JS!)

Du kannst nun von dort aus wieder Daten an den CEF Browser schicken.
Dies Passiert mit

JavaScript

(deine Browser Variable).call("FUNKTIONNAME", paramter1, paramter2, parameterN);

Das Event(funktion) muss natürlich im CEF Browser Existieren, damit das zurückgeben Funktioniert.

Wird wohl Zeit für Tutorials hier

Pride · 18. Februar 2017

Hey @toor ich merke du bist recht gut bewandert in dem Thema, ich denke um die Commuinty in GTA:N anzutreiben wären Tutorials definitiv ne gute Idee.

Ich habe jetzt einfach mal drauf los getippt und das ist das Resultat. Kleiner Spolier es funktioniert nicht.

Meine HTML Datei:

HTML: myfile.html

<html>
  <script>
  function logPlayer()  
  {
    var username = $("#username").val();
    var password = $("#password").val();
    resourceCall("ServerLogin", username, password); 
  };
  </script>
  <form>
    <input type="text" id="username" placeholder="username"/>
    <input type="password" id="password" placeholder="password"/>
    <button onclick="logPlayer();" id="login">login</button>
  </form>
</html>

Alles anzeigen

Meine JS Datei

Code

var myBrowser = null;
API.onResourceStart.connect(function () {
    var res = API.getScreenResolution(); 
    myBrowser = API.createCefBrowser(res.Width, res.Height); 
    API.waitUntilCefBrowserInit(myBrowser); 
    API.setCefBrowserPosition(myBrowser, 0, 0); 
    API.loadPageCefBrowser(myBrowser, "clientside/resources/myfile.html");
	API.setCefBrowserHeadless(myBrowser, true); 
    API.showCursor(true); 
    API.setCanOpenChat(false); 
});
function ServerLogin(username, password) {
    API.triggerServerEvent("login", username, password);
}

Alles anzeigen

Und noch der C# Teil:

Code

public void OnClientEvent(Client player, string eventName, params object[] arguments)
{
	if (eventName == "login") //an eventname with no params that was triggered from the Client-side script
        {
       		API.sendChatMessageToPlayer(player, "~g~gGGGGgGG");
         }
}

So nun wo das freundliche Copy & Pasten los gehen kann, beginnen auch meine Fragen. Woher weis die JS Datei welche Function gemeint ist müssen die im selben Ordner sein und woher weis mein resourceCall wohin es schicken soll?

**root** · 18. Februar 2017

Ich denke ResourceCall wird zu dem File Schicken wo der Browser erstellt wurde. Habs noch nie getestet. Kann auch sein das es an alle Files "Broadcasted" wird.

Ich sehe bei deinem HTML kein JQuery includiert. Trotzdem benutzt du dieses.
Was genau geht denn nicht? (Login wird nicht angezeigt / Button geht nicht etc...)

datgame · 18. Februar 2017

Zitat von toor

File Schicken wo der Browser erstellt wurde

Genau so ist es.

Zitat von toor

Ich sehe bei deinem HTML kein JQuery includiert

Falls du jQuery einbinden willst, musst du darauf achten, es lokal zu speichern, weil du im CEF keine externen Resourcen laden kannst (@PrideGame)

Pride · 18. Februar 2017

Gerade eben wurde er angezeigt jedoch wenn ich was eingetippt hatte passierte nichts.
Nun ist der Stand das es nicht einmal mehr angezeigt wird.

@datgame kann ich einfach die Script Tags in HTML so öffnen? <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
Importiere ich damit das sogenannte JQuery?

datgame · 18. Februar 2017

Zitat von datgame

Falls du jQuery einbinden willst, musst du darauf achten, es lokal zu speichern, weil du im CEF keine externen Resourcen laden kannst (@PrideGame)

Heißt, du lädst die jQuery.js z.B. von Google runter und speicherst sie lokal in deiner Server-Resource. Und lädst dann die lokale Version in dein HTML Script.

Pride · 18. Februar 2017

Zitat von datgame

Heißt, du lädst die jQuery.js z.B. von Google runter und speicherst sie lokal in deiner Server-Resource. Und lädst dann die lokale Version in dein HTML Script.

Ich habe das Gefühl das wir an einander vorbei reden. Ich habe doch dort oben ein Codeschnipsel gesendet binde ich damit die JQuery ein oder funktioniert das so nicht?

Pr0x · 18. Februar 2017

Ich hatte mir mal ein Login System erstellt.

es sah so aus:
loginregister.js: https://pastebin.gtanet.work/?…xqPmct2vL5jmoyBtVk8YhuIY=
index.html: https://pastebin.gtanet.work/?…DzG2D09a1WCIVQeCk5mt/D28=
code in meta.xml: https://pastebin.gtanet.work/?…EzLyHVb+/riKMH7ZaAgNRNMc=

Es hat bei mir funktioniert.

datgame · 18. Februar 2017

Zitat von PrideGame

Ich habe das Gefühl das wir an einander vorbei reden. Ich habe doch dort oben ein Codeschnipsel gesendet binde ich damit die JQuery ein oder funktioniert das so nicht?

So gesehen funktioniert es, aber im CEF nicht (wovon du ja momentan sprichst?) nicht, weil man im CEF keine externen Resourcen einbinden kann.

maddin · 18. Februar 2017

Nutzt einfach kein jQuery, wenn du es eh nicht brauchst.

JavaScript

document.querySelector("#email").value
// anstatt
$("#email").val()

Pride · 19. Februar 2017

Woran kann es liegen wenn er nicht mal angezeigt wird?

Ich kann ohne Fehlermeldung irgendwie noch nicht raus finden in welche der gefühlt hundert Dateien der Fehler ist.

Edgar · 19. Februar 2017

Hi. Magst du mir mal deinen aktuellen Stand der Dateien für das Login schicken, wenn's dir nichts ausmacht.
Dann habe ich erstmal einen Überblick wie weit du schon bist. Ebenfalls mal den Error beilegen.

Pride · 19. Februar 2017

Abend, leider kann ich dir kein Error beilegen weil ja eben keiner kommt.

Hier die aktuelle HTML Datei:

HTML

<html>
    <script>
      function PlayerLogin()
      {
          document.querySelector("#password").value
        resourceCall("ServerLogin", password);
      };
    </script>
    <form>
        <input type="text" id="username" placeholder="username" />
        <input type="password" id="password" placeholder="password" />
        <button onclick="PlayerLogin();" id="login">login</button>
    </form>
</html>

Alles anzeigen

Hier die JS Datei:

Code

var myBrowser = null;
API.onResourceStart.connect(function () {
    var res = API.getScreenResolution();
    myBrowser = API.createCefBrowser(res.Width, res.Height);
    API.waitUntilCefBrowserInit(myBrowser);
    API.setCefBrowserPosition(myBrowser, 0, 0);
    API.loadPageCefBrowser(myBrowser, "clientside/resources/myfile.html");
    API.setCefBrowserHeadless(myBrowser, true);
    API.showCursor(true);
    API.setCanOpenChat(false);
});
function ServerLogin(password) {
    API.triggerServerEvent("Login", password);
}

Alles anzeigen

Und halt in der Meta Datei steht das hier:

Code

<script src="clientside/cef.js" type="client" lang="javascript" />
  <file src="clientside/myfile.html" />

maddin · 19. Februar 2017

Du musst den Wert aus dem Passwort Feld auch erst in der Variable password speichern bevor du diese weiter gibst.

JavaScript

var password = document.querySelector("#password").value;
resourceCall("ServerLogin", password);

Pride · 19. Februar 2017

Gut das mit der Variable war natürlich etwas Fehlerhaft jedoch ändert das ja nichts an der Tatsache das es mir InGame nicht angezeigt wird. Ich schau morgen in aller Frische nochmal rüber. Wahrscheinlich was übersehen.

datgame · 19. Februar 2017

Hast du den CEF Browser in deinen Einstellungen aktiviert?

Edgar · 19. Februar 2017

Zitat von PrideGame

API.loadPageCefBrowser(myBrowser, "clientside/resources/myfile.html");

Ich vermute mal, dass der Pfad falsch ist? In der Meta wird dieser nämlich anders angegeben.

shoxinat0r	4
dennismitzwein	2
Trooper[Y]	2
maddin	1
Unbekannter Discord Kick	2

shoxinat0r	4
dennismitzwein	2
Trooper[Y]	2
maddin	1
Unbekannter Discord Kick	2