Erstellung von UI5-Anwendungen mit ABAP WebSockets

Würden Sie es akzeptieren, wenn ich Ihnen sage, dass ich Ihnen ein analytisches Update über eine sehr wichtige Kennzahl für den Aktienkauf erst dann zur Verfügung stelle, wenn Sie die Daten manuell aktualisiert haben?

Nein, richtig! Denn wenn Sie die Informationen erhalten, ist es bereits zu spät.

In der heutigen Welt ist es das Gebot der Stunde, Informationen in Echtzeit zu konsumieren. Glücklicherweise gibt es dafür ein Protokoll, das von allen modernen Browsern unterstützt wird und einen direkten Datenaustausch ermöglicht: WebSockets.

Was sind WebSockets?

WebSocket ist ein Vollduplex-Protokoll, das im Szenario der Client-Server-Kommunikation verwendet wird.

Einfach ausgedrückt, ermöglicht sie es der von Ihnen verwendeten Anwendung, die Daten zu empfangen, ohne sie vom Server anzufordern, eine Zwei-Wege-Kommunikation.

Im Gegensatz zu HTTP beginnt es mit ws:// oder wss://. Es ist ein zustandsbehaftetes Protokoll, d. h. die Verbindung zwischen Client und Server bleibt bestehen, bis sie von einer der beiden Parteien (Client oder Server) beendet wird.

Warum WebSockets?

Wir wissen, dass WebSocket einen Mechanismus für die Zwei-Wege-Kommunikation bietet, aber es gibt noch ein paar weitere Gründe, warum wir es vorziehen sollten:

• Sie ermöglicht eine Kommunikation in beide Richtungen.
• Daten werden viel schneller gesendet und empfangen als über HTTP und auch schneller als über AJAX.
• Kompatibilität zwischen Plattformen (Web, Desktop, Mobile).
• HTTP hat einen Overhead von 2000 Byte, aber WebSocket hat nur 2 Byte Kosten.
• WebSockets unterstützt mehrere Datentypen.

Anwendungsfälle

Schauen wir uns die häufigsten Anwendungsfälle an und wo wir sie im Allgemeinen antreffen:

• Soziale Feeds wie Twitter, LinkedIn
• Multiplayer-Spiel
• Gemeinsame Bearbeitung/Codierung
• Chat-Anwendung und mehr.

Jetzt wissen wir, was WebSockets sind, warum wir sie bevorzugen und einige ihrer allgemeinen Anwendungsfälle. Werfen wir auch einen Blick darauf, wie wir sie in der SAP-Welt nutzen können und wie sie bereits verwendet werden.

Eine Anwendung wie SAP Fiori Launchpad kann Benachrichtigungen aus dem SAP Gateway Notification Channel empfangen. Die Benachrichtigungen und Warnungen werden automatisch angezeigt, sobald eine Aktualisierung erfolgt. Das Launchpad deaktiviert Benachrichtigungen standardmäßig, und für den Benutzer sind keine benachrichtigungsbezogenen UI-Elemente sichtbar. Sie können auf hier ️ für den Fall, dass Sie die Benachrichtigungen aktivieren möchten.

Sehen wir uns einige Anwendungsfälle an, in denen wir WebSockets nutzen können, um unsere Fiori-Anwendungen effizienter und attraktiver zu gestalten:

• Echtzeit-Inhalte für Anwendungen wie "Mein Posteingang", "Meine Urlaubsanträge" und "Urlaubsanträge genehmigen".
• Datenkonsistenz über mehrere Nutzer hinweg
• Rendering der Ansicht in Echtzeit auf der Grundlage von Daten
• Benutzerdefinierte Benachrichtigungen und Alarme
• Bessere Analysen wie Fortschrittsindikatoren und Live-Diagramme

---

Eine einfache Anwendung mit WebSocket

Bevor wir mit der Erstellung von WebSockets in ABAP beginnen, wollen wir uns zunächst mit den Feinheiten von WebSockets in SAP befassen.

Verstehen des ABAP-Kanals

Vereinfacht ausgedrückt bietet der ABAP-Kanal eine ereignisbasierte Kommunikation mit Nachrichten zwischen dem ABAP-Server und dem Internet.

Es besteht aus zwei Haupttechnologien, die bei der Übertragung von Nachrichten vom Server zur Benutzeroberfläche und beim Austausch von Nachrichten zwischen verschiedenen Benutzersitzungen im AS ABAP helfen. Schauen wir uns das genauer an.

ABAP-Push-Kanal

ABAP Push Channels (APC) ist eine Technologie, mit der eine Vollduplex- oder Zwei-Wege-Kommunikation mit dem Server realisiert werden kann. Die Bezeichnung Push-Kanal soll verdeutlichen, dass die Technologie das Pushen von Nachrichten an den Client ermöglicht, auch wenn keine Anfrage gesendet wird.

ABAP Messaging-Kanäle

ABAP Messaging Channels (AMC) ist eine Technologie, die die Kommunikation zwischen ABAP-Sitzungen über Nachrichten in einem AS ABAP ermöglicht.

Messaging Channel ist auch als Publish/Subscribe-Infrastruktur bekannt.

Der Messaging-Kanal wird zusammen mit dem Push-Kanal für Szenarien wie die Zusammenarbeit benötigt, wie im obigen Diagramm dargestellt.

Nachdem wir nun ein grundlegendes Verständnis von ABAP Channels haben, wollen wir uns ansehen, wie wir einen einfachen WebSocket in ABAP erstellen können

Voraussetzungen:

SAP NetWeaver AS ABAP 7.40 Support Package 5(SP5)

Einen einfachen WebSocket erstellen

Um einen WebSocket in ABAP zu erstellen, müssen wir eine ABAP-Push-Kanal-Anwendung erstellen, die, wie bereits erwähnt, einem WebSocket entspricht. Folgen Sie den unten angegebenen Schritten.

1. Gehen Sie zur Transaktion SAPC.
2. Klicken Sie mit der rechten Maustaste auf ABAP-Push-Kanäle → Erstellen. Geben Sie den Namen der Push-Kanal-Anwendung oder grundsätzlich WebSocket an.

3. Geben Sie einen Namen an und klicken Sie dann auf Klasse und Dienst generieren, um Klasse und ICF-Dienst zu generieren.

4. Speichern und Aktivieren.

5. Doppelklicken Sie auf den Klassennamen, um zur Klassendefinition zu navigieren.

Wir müssen die Klassenmethode ON_START und ON_MESSAGE implementieren, um die Probleme zu lösen. Es ist zwingend erforderlich, zumindest diese beiden Methoden zu implementieren.

6. Definieren Sie die Methoden ON_START und ON_MESSAGE mit dem unten angegebenen Code neu.

Verwendung verschiedener Methoden
ON_ACCEPT : Diese Methode wird immer dann ausgeführt, wenn eine WebSocket-Verbindung angefordert wird und dient dazu, die Verbindungsanforderung entweder ANZUNEHMEN oder ABZULEHNEN.
AN_START : Wird ausgeführt, sobald der WebSocket-Verbindungsaufbau vollständig erfolgreich ist, nachdem die ON_ACCEPT-Methode die Anfrage akzeptiert hat.
ON_MESSAGE : Wird beim Empfang einer Nachricht ausgeführt.
ON_CLOSE : Diese Methode wird vor dem Schließen einer Verbindung und der Durchführung von Ressourcenbereinigungsaktivitäten aufgerufen.
ON_ERROR : Diese Methode wird aufgerufen, wenn eine Verbindung aufgrund eines Fehlers unterbrochen wird. Nach erfolgreicher Ausführung von ON_ERROR wird die Methode ON_CLOSE ausgeführt.

AN_START

DATA: lo_message TYPE REF TO if_apc_wsp_message,
      lx_cx_apc_error TYPE REF TO cx_apc_error.
    TRY.
        lo_message = i_message_manager->create_message( ).
        lo_message->set_text( |{ sy-mandt }/{ sy-uname }: ON_START wurde erfolgreich ausgeführt !| ).
        i_message_manager->send( lo_message ).

      CATCH cx_apc_error INTO DATA(lx_apc_error).
       MESSAGE lx_apc_error->get_text( ) TYPE 'E'.
    ENDTRY.

ON_MESSAGE

DATA: lv_text TYPE string,
      lo_message TYPE REF TO if_apc_wsp_message,
      lx_apc_error TYPE REF TO cx_apc_error.

    TRY.
* Abrufen der empfangenen Nachricht
        lv_text = i_message->get_text( ).
* Erstellen des Nachrichtenobjekts
        lo_message = i_message_manager->create_message( ).
* Nachricht senden
        lo_message->set_text( |{ sy-mandt }/{ sy-uname }: ON_MESSAGE wurde erfolgreich ausgeführt !| ).
        i_message_manager->send( lo_message ).
* Senden Sie die empfangene Nachricht
        lo_message->set_text( lv_text ).
        i_message_manager->send( lo_message ).
      CATCH cx_apc_error INTO lx_apc_error.
        MESSAGE lx_apc_error->get_text( ) TYPE 'E'.
    ENDTRY.

7. Speichern und aktivieren Sie nun die Klasse und die APC-Anwendung.

💡 Hurra 🎉 , Sie haben gerade Ihren ersten WebSocket in ABAP erstellt.

Nachdem wir nun den WebSocket erstellt haben, stellt sich die nächste Frage: Wie werden wir ihn testen?

Wir werden eine von SAP bereitgestellte Web-Dynpro-Anwendung für das Testen von WebSocket- oder ABAP-Push-Channel-Anwendungen verwenden.

Gehen Sie zur APC-Anwendung, die wir gerade erstellt haben, und klicken Sie auf die Schaltfläche Test Symbol.

Die Benutzeroberfläche wird im Browser geöffnet.

Die Methode ON_START wird ausgeführt, sobald die WebSocket-Verbindung erfolgreich aufgebaut wurde.

Fügen Sie eine Nachricht hinzu und klicken Sie auf die Schaltfläche Senden.

Die Methode ON_MESSAGE wird immer dann ausgeführt, wenn eine Nachricht gesendet wird.

Nachdem wir nun gelernt haben, wie man einen WebSocket in ABAP erstellt, wollen wir nun sehen, wie man ihn in der Benutzeroberfläche konsumieren kann.

Eintauchen in UI-Elemente

SAP bietet eine Standardbibliothek für WebSockets. Sie sind ähnlich wie die nativen WebSockets. Wir können die Klasse sap.ui.core.ws.WebSocket️.

Das folgende Codeschnipsel zeigt, wie eine neue WebSocket-Verbindung erstellt werden kann:

neu sap.ui.core.ws.WebSocket(sUrl, aProtocols?)

//Beispiel
const ui5socket = neu sap.ui.core.ws.WebSocket('wss://:port/sap/bc/apc/sap/);

sUrl: relative oder absolute URL für WebSocket-Verbindung.

aProtokolleArray von Protokollen als Strings, ein einzelnes Protokoll als String

Wir wollen die verschiedenen Ereignisse und Methoden kennenlernen:

• Die Schließen wird ausgelöst, wenn die Verbindung geschlossen wurde.
• Die Fehler Ereignis wird ausgelöst, wenn ein Fehler aufgetreten ist.
• Die Nachricht Ereignis wird ausgelöst, wenn eine Nachricht empfangen wurde.
• Die offen Ereignis wird ausgelöst, wenn die Verbindung erfolgreich geöffnet wurde.

// sendet eine Nachricht
// Wenn die Verbindung noch nicht geöffnet ist, wird die Nachricht
// wird in eine Warteschlange gestellt und gesendet, sobald die Verbindung hergestellt ist.
 ui5socket.send('Die Nachricht');

// Verbindung geöffnet
ui5socket.attachOpen(() => {
// wird ausgelöst, wenn die Verbindung erfolgreich geöffnet wurde
});

// Server-Meldungen
ui5socket.attachMessage() => {
// Ausgelöst, wenn eine Nachricht empfangen wird
});

// Fehlerbehandlung
ui5socket.attachError(() => {
// Ausgelöst, wenn ein Fehler aufgetreten ist
});

// Verbindung schließen
ui5socket.attachClose(() => {
// wird ausgelöst, wenn die Verbindung geschlossen wird
});

Wenn Sie eine detaillierte UI5-Anwendung mit WebSockets erstellen möchten, können Sie sich auf diese sehr gut geschriebene Blog ️

Jetzt haben Sie also das Grundverständnis, wie man einen WebSocket in ABAP erstellt und wie man ihn in einer UI5-Anwendung nutzt. Was hält Sie dann noch auf? Seien Sie Dora die Entdeckerin!