In meinem ersten Tutorial möchte ich euch erklären, wie man Nachrichten zwischen der App im AppServer und dem HTML User Interface im Client austauschen kann.
Stellt euch vor, dass ihr in einer Beziehung seid. Um ein harmonisches und friedliches Zusammenleben mit dem Partner zu ermöglichen, muss man miteinander sprechen: Kommunizieren. Ist diese Gegebenheit nicht vorhanden, wird die Beziehung scheitern.
Genau dasselbe ist es auch, wenn man das HTML User Interface vernünftig verwenden möchte. Beide Parteien stehen für sich alleine, bis man sich gegenseitig etwas mitteilen will. Um diese Kommunikation zu ermöglichen, muss der Datenstrom richtig verarbeitet werden. Gerade für Einsteiger ist das aber oft ein komplizierteres Vorhaben, da sie nicht wissen, welche Funktionen die API hier zur Verfügung stellt. In diesem Artikel möchte ich euch nun die Möglichkeiten der Kommunikation anhand eines Beispieles aufzeigen.
Zum Übertragen der Nachrichten existieren zwei Funktionen innerhalb der API. Die, die am Server verwendet wird, befindet sich in der AppContentSession-Klasse und nennt sich sendEvent. Clientseitig trägt die Methode den selben Namen, befindet sich jedoch in der Client-Klasse.
Wie das code-technisch umgesetzt wird, präsentiere ich in einem experimentellen Beispiel. Wir möchten in der HTML-Oberfläche einen Button anzeigen, über den wir die Änderung eines Namens starten können. Über einen Chatbefehl, welcher uns im Chat per /p-Nachricht vom Bot geschickt wird, sollen wir einen neuen Namen eingeben, welcher daraufhin im UI angezeigt wird.
Unsere Oberfläche ist einfach aufgebaut:
<!DOCTYPE html>
<html>
<head>
<title>Übersicht</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="/apps/api/knuddels-api.js"></script>
<script type="text/javascript" src="/apps/api/jquery.min.js"></script>
<script type="text/javascript">
Client.addEventListener('newNameReceived', function(e) {
var newName = e.data['newName'];
if (newName == '' || newName.length > 20)
{
Client.sendEvent('newNameInvalid');
return;
}
$('p#currentName').text(newName);
Client.sendEvent('newNameSet', { name: newName });
});
function requestNewName()
{
Client.sendEvent('newNameRequest');
}
</script>
</head>
<body>
<a onclick="requestNewName()" href="#">Neuen Namen festlegen</a>
</body>
</html>
Wir haben jetzt eine Oberfläche mit einem Absatz, der erst einmal leer ist und einem Link. Durch einen Klick auf den Link wird die JavaScript-Methode requestNewName() ausgeführt, welche einen entsprechenden Request an den Server schickt. Dort müssen wir nun eine Möglichkeit schaffen, die Anfrage zu empfangen und weiterzuverarbeiten.
Wir definieren in unserem App-Objekt also einen EventListener für die drei Events, die wir clientseitig verschicken.
this.onEventReceived = function(user, type, data, appContentSession)
{
if (type == 'newNameRequest') {
user.sendPrivateMessage('Bitte gib einen neuen Namen ein! Nutze dafür die Funktion _/setName NAME_.');
} else if (type == 'newNameInvalid') {
user.sendPrivateMessage('Der eingegebene Name ist ungültig.');
} else if (type == 'newNameSet') {
user.sendPrivateMessage('Der Name wurde auf \"' + data['name'] + '\" festgelegt.');
}
};
Jetzt muss nur noch die /setName-Funktion geschrieben werden und wir sind fertig.
this.chatCommands =
{
setname: function(user, params, command)
{
var contentSession = user.getAppContentSession(AppViewMode.Overlay);
if (contentSession != undefined) {
contentSession.sendEvent("newNameReceived", { newName: params });
}
}
};
Geben wir jetzt keinen Namen ein oder einen Name mit mehr als 20 Zeichen, bekommen wir die definierte Hinweismeldung im Chatverlauf vom Bot per privater Nachricht zugeschickt. Ist mit dem Namen alles in Ordnung, wird er uns in der Oberfläche angezeigt und uns per /p eine Bestätigungsmeldung zugeschickt.
Ich hoffe, ich konnte Euch die Kommunikation zwischen UI und App ein wenig näher bringen. Zögert nicht, bei Fragen einen Kommentar zu schreiben.
Der offizielle Knuddels Blog 
Kein gutes Beispiel für Client-Server-Kommunikation, da bspw. die Validierung auf dem Server vorgenommen werden sollte.
LikeLike
Das ost mir durchaus bewusst. Allerdings sollen die Code-Teile die Möglichkeiten der Kommunikation aufzeigen und nicht die Validierung von Daten. Aufgrund von aktuell extrem begrenzter Zeit habe ich micht für etwas Schnelles entschieden.
LikeLike
Bei mir passiert per klick auf den link nix
habe alles von dir kopiert
LikeLike