abap

UI5-Apps mit ABAP WebSockets bauen

Basant Singh · 12. Juli 2022

Dieser Beitrag wurde aus dem englischen Original übersetzt.

Würden Sie es akzeptieren, wenn ich sagen würde, ich liefere Ihnen ein analytisches Update zu einer sehr wichtigen Kennzahl für den Aktienkauf erst dann, wenn Sie die Daten manuell aktualisieren?

Nein, richtig! Denn bis Sie die Information erhalten, wäre es längst zu spät.

In der heutigen Welt ist es das Gebot der Stunde, Informationen in Echtzeit zu konsumieren. Zum Glück gibt es für diesen Bedarf ein Protokoll, das von allen modernen Browsern unterstützt wird und den direkten Datenaustausch erlaubt: WebSockets.

Was sind WebSockets?

WebSocket ist ein Vollduplex-Protokoll, das im Client-Server-Kommunikationsszenario eingesetzt wird.

Einfach gesagt: Es ist das, was die von Ihnen genutzte Anwendung in die Lage versetzt, Daten zu empfangen, ohne sie beim Server anzufragen, also eine bidirektionale Kommunikation.

Anders als HTTP beginnt es mit ws:// oder wss://. Es ist ein zustandsbehaftetes Protokoll, das heißt, die Verbindung zwischen Client und Server bleibt bestehen, bis sie von einer der beiden Seiten (Client oder Server) beendet wird.

Ansehen: Browser-1.mp4

Warum WebSockets?

Wir wissen, dass WebSocket einen Mechanismus für bidirektionale Kommunikation bietet, aber es gibt noch ein paar weitere Gründe, warum wir sie bevorzugen sollten:

Sie erlauben bidirektionale Kommunikation.
Daten werden deutlich schneller gesendet und empfangen als über HTTP, auch schneller als über AJAX.
Kompatibilität über Plattformen hinweg (Web, Desktop, Mobile).
HTTP hat einen Overhead von 2000 Byte, WebSocket dagegen nur 2 Byte.
WebSockets unterstützen mehrere Datentypen.

Anwendungsfälle

Schauen wir uns die häufigsten Anwendungsfälle an und wo wir ihnen üblicherweise begegnen:

Social Feeds wie Twitter, LinkedIn
Multiplayer-Spiele
Kollaboratives Editieren und Programmieren
Chat-Anwendungen und mehr.

Nun wissen wir, was WebSockets sind, warum wir sie bevorzugen und einige ihrer allgemeinen Anwendungsfälle. Schauen wir uns außerdem an, wie wir sie in der SAP-Welt nutzen können und wie sie dort bereits eingesetzt werden.

Eine Anwendung wie das SAP Fiori Launchpad kann Benachrichtigungen aus dem SAP Gateway Notification Channel konsumieren. Die Notifications und Alerts werden automatisch sichtbar, sobald es ein Update gibt. Das Launchpad deaktiviert Benachrichtigungen standardmäßig, und für den Nutzer sind keine benachrichtigungsbezogenen UI-Elemente sichtbar. Wenn Sie die Benachrichtigungen aktivieren möchten, finden Sie hier ↗️ weitere Informationen.

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

Echtzeitinhalte für Apps wie My Inbox, My Leave Requests und Approve Leave Requests.
Datenkonsistenz über mehrere Nutzer hinweg
Rendering von Views in Echtzeit auf Basis der Daten
Eigene Notifications und Alerts
Bessere Analytik wie Fortschrittsanzeigen und Live-Charts

Eine einfache Anwendung mit WebSocket

Bevor wir uns ansehen, wie man einen WebSocket in ABAP erstellt, schauen wir uns zunächst einige Feinheiten davon in SAP an.

ABAP Channel verstehen

Vereinfacht gesagt bietet ABAP Channel eine ereignisbasierte Kommunikation über Nachrichten zwischen dem ABAP Server und dem Internet.

Er besteht aus zwei zentralen Basistechnologien, die das Pushen von Nachrichten vom Server an die UI sowie den Nachrichtenaustausch zwischen verschiedenen Benutzersitzungen im AS ABAP ermöglichen. Schauen wir sie uns genauer an.

ABAP Push Channel

ABAP Push Channels (APC) sind eine Technologie, mit der sich eine Vollduplex- oder bidirektionale Kommunikation mit dem Server realisieren lässt. Sie heißt Push Channel, um zu betonen, dass die Technologie das Pushen von Nachrichten an den Client erlaubt, auch wenn keine Anfrage gesendet wurde.

ABAP Messaging Channels

ABAP Messaging Channels (AMC) sind eine Technologie, die die Kommunikation zwischen ABAP-Sitzungen über Nachrichten innerhalb eines AS ABAP ermöglicht.

Messaging Channel wird auch als Publish/Subscribe-Infrastruktur bezeichnet.

Messaging Channel wird zusammen mit Push Channel für Szenarien wie Collaboration benötigt, wie im Diagramm oben dargestellt.

Nachdem wir nun ein grundlegendes Verständnis von ABAP Channels haben, schauen wir uns an, 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 tatsächlich eine ABAP Push Channel Application anlegen, die, wie zuvor erwähnt, dem WebSocket entspricht. Folgen Sie den unten aufgeführten Schritten.

Gehen Sie in die Transaktion SAPC.
Rechtsklick auf ABAP Push Channels → Create. Vergeben Sie den Namen der Push Channel Application, also im Grunde des WebSocket.

Geben Sie den Namen an und klicken Sie dann auf Generate Class and Service, um Klasse und ICF-Service zu erzeugen.

Speichern und aktivieren.

Doppelklick auf den Klassennamen, um zur Klassendefinition zu navigieren.

💡 Wir müssen die Klassenmethoden ON_START und ON_MESSAGE implementieren, um die Fehler aufzulösen. Es ist zwingend erforderlich, mindestens diese beiden Methoden zu implementieren.

Redefinieren Sie die Methoden ON_START und ON_MESSAGE mit dem unten angegebenen Code.

Verwendung der verschiedenen Methoden
ON_ACCEPT : Diese Methode wird immer dann ausgeführt, wenn eine WebSocket-Verbindung angefordert wird, und dient dazu, die Verbindungsanfrage entweder anzunehmen (ACCEPT) oder abzulehnen (REJECT).
ON_START : Wird ausgeführt, sobald der Aufbau der WebSocket-Verbindung vollständig erfolgreich war, nachdem die Methode ON_ACCEPT die Anfrage angenommen hat.
ON_MESSAGE : Wird beim Empfang einer Nachricht ausgeführt.
ON_CLOSE : Diese Methode wird vor dem Schließen einer Verbindung aufgerufen und führt etwaige Aufräumarbeiten an Ressourcen durch.
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.

ON_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 has been successfully executed !| ).
        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.
* Get the received message
        lv_text = i_message->get_text( ).
* create the message object
        lo_message = i_message_manager->create_message( ).
* send message 
        lo_message->set_text( |{ sy-mandt }/{ sy-uname }: ON_MESSAGE has been successfully executed !| ).
        i_message_manager->send( lo_message ).
* send the received message
        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.

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

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

Nachdem wir den WebSocket erstellt haben, stellt sich als Nächstes die Frage, wie wir ihn testen.

Für den Test des WebSocket beziehungsweise der ABAP Push Channel Application nutzen wir eine von SAP bereitgestellte Web-Dynpro-Anwendung.

Gehen Sie zu der gerade erstellten APC-Anwendung und klicken Sie auf das Symbol Test.

Die UI öffnet sich im Browser.

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

Geben Sie eine Nachricht ein und klicken Sie auf den Button Send.

💡 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, schauen wir uns an, wie wir ihn in der UI konsumieren können.

Ein Blick auf die UI-Elemente

SAP stellt eine Standardbibliothek für WebSockets bereit. Sie ähneln den nativen WebSockets. Wir können die Klasse [sap.ui.core.ws.WebSocket↗️](https://sapui5.hana.ondemand.com/sdk/#/api/sap.ui.core.ws.WebSocket%23overview)``. verwenden.

Das Code-Snippet unten zeigt, wie wir eine neue WebSocket-Verbindung erstellen können:

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

//Example
const ui5socket = new sap.ui.core.ws.WebSocket('wss://:port/sap/bc/apc/sap/<myapplication>);

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

aProtocols: Array von Protokollen als Strings oder ein einzelnes Protokoll als String.

Schauen wir uns die verschiedenen Events und Methoden an:

Das Event close wird ausgelöst, wenn die Verbindung geschlossen wurde.
Das Event error wird ausgelöst, wenn ein Fehler aufgetreten ist.
Das Event message wird ausgelöst, wenn eine Nachricht empfangen wurde.
Das Event open wird ausgelöst, wenn die Verbindung erfolgreich geöffnet wurde.

// sends a message
// If the connection is not yet opened, the message
// will be queued and sent when the connection is established.
 ui5socket.send('The message');

// connection opened 
ui5socket.attachOpen(() => {
// triggred when the connection is successfully opened
});

// server messages 
ui5socket.attachMessage() => {
// triggred when a message is received 
});

// error handling 
ui5socket.attachError(() => {
// triggred when an error has occurred 
});

// connection close 
ui5socket.attachClose(() => {
// triggred when the connection is closed 
});

Wenn Sie eine ausführliche UI5-Anwendung mit WebSockets bauen möchten, können Sie sich diesen sehr gut geschriebenen Blogbeitrag ↗️ ansehen.

Nun haben Sie also ein grundlegendes Verständnis davon, wie man einen WebSocket in ABAP erstellt und ihn in einer UI5-Anwendung konsumiert. Was hält Sie also noch auf? Los geht's, auf zur Entdeckungsreise!