Skip to Content
Author's profile photo Gregor Wolf

ABAP Push / Messaging Channel and SAPUI5 Demo Application

Based on the Blog series published by Masoud Aghadavoodi Jolfaei:

ABAP Channels Part 1: WebSocket Communication Using ABAP Push Channels

ABAP Channels Part 2: Publish/Subscribe Messaging Using ABAP Messaging Channels

ABAP Channels Part 3: Collaboration Scenario Using ABAP Messaging and ABAP Push Channels

Specification of the Push Channel Protocol (PCP)

I’ve created an SAPUI5 Demo application using the ABAP Push Channel (APC, WebSockets) and ABAP Messaging Channel (AMC). To benefit from the WebSocket technology in your browser please check the support matrix at https://en.wikipedia.org/wiki/WebSocket#Browser_implementation. At the ABAP Backend I’ve used a NetWeaver ABAP Application Server 7.40 SP8.

ABAP Push Channel

Let’s define the ABAP Push Channel first. Check out the above mentioned Blog’s for details:

APC-ZAMC_ECHO.PNG

Here’s the source code of the class Implementation:


CLASS zcl_apc_wsp_ext_zapc_echo DEFINITION
  PUBLIC
  INHERITING FROM cl_apc_wsp_ext_stateless_pcp_b
  FINAL
  CREATE PUBLIC .
  PUBLIC SECTION.
    METHODS if_apc_wsp_ext_pcp~on_message
         REDEFINITION .
    METHODS if_apc_wsp_ext_pcp~on_start
         REDEFINITION .
  PROTECTED SECTION.
  PRIVATE SECTION.
    CLASS-METHODS prepare_message_for_ui
      IMPORTING
        !iv_text       TYPE string
      RETURNING
        VALUE(rv_text) TYPE string .
ENDCLASS.
CLASS zcl_apc_wsp_ext_zapc_echo IMPLEMENTATION.
* <SIGNATURE>---------------------------------------------------------------------------------------+
* | Instance Public Method ZCL_APC_WSP_EXT_ZAPC_ECHO->IF_APC_WSP_EXT_PCP~ON_MESSAGE
* +-------------------------------------------------------------------------------------------------+
* | [--->] I_MESSAGE                      TYPE REF TO IF_AC_MESSAGE_TYPE_PCP
* | [--->] I_MESSAGE_MANAGER              TYPE REF TO IF_APC_WSP_MESSAGE_MANAGER_PCP
* | [--->] I_CONTEXT                      TYPE REF TO IF_APC_WSP_SERVER_CONTEXT
* +--------------------------------------------------------------------------------------</SIGNATURE>
  METHOD if_apc_wsp_ext_pcp~on_message.
    DATA: lo_producer TYPE REF TO cl_amc_message_type_pcp.
    TRY.
* retrieve the text message
        DATA(lv_text) = i_message->get_text( ).
        lo_producer ?= cl_amc_channel_manager=>create_message_producer(
          i_application_id = 'ZAMC_ECHO'
          i_channel_id     = '/echo' ).
        lv_text = prepare_message_for_ui( lv_text ).
        DATA(lo_msg) = cl_ac_message_type_pcp=>create( ).
        lo_msg->set_text( i_message = lv_text ).
        lo_producer->send( i_message = lo_msg ).
      CATCH cx_ac_message_type_pcp_error INTO DATA(lx_pcp_error).
        MESSAGE lx_pcp_error->get_text( ) TYPE 'E'.
      CATCH cx_amc_error INTO DATA(lx_amc_error).
        MESSAGE lx_amc_error->get_text( ) TYPE 'E'.
      CATCH cx_apc_error INTO DATA(lx_apc_error).
        MESSAGE lx_apc_error->get_text( ) TYPE 'E'.
    ENDTRY.
  ENDMETHOD.
* <SIGNATURE>---------------------------------------------------------------------------------------+
* | Instance Public Method ZCL_APC_WSP_EXT_ZAPC_ECHO->IF_APC_WSP_EXT_PCP~ON_START
* +-------------------------------------------------------------------------------------------------+
* | [--->] I_CONTEXT                      TYPE REF TO IF_APC_WSP_SERVER_CONTEXT
* | [--->] I_MESSAGE_MANAGER              TYPE REF TO IF_APC_WSP_MESSAGE_MANAGER_PCP
* +--------------------------------------------------------------------------------------</SIGNATURE>
  METHOD if_apc_wsp_ext_pcp~on_start.
    TRY.
* bind the WebSocket connection to the AMC channel
        DATA(lo_binding) = i_context->get_binding_manager( ).
        lo_binding->bind_amc_message_consumer(
          i_application_id = 'ZAMC_ECHO'
          i_channel_id     = '/echo' ).
      CATCH cx_apc_error INTO DATA(lx_apc_error).
        DATA(lv_message) = lx_apc_error->get_text( ).
        MESSAGE lx_apc_error->get_text( ) TYPE 'E'.
    ENDTRY.
  ENDMETHOD.
* <SIGNATURE>---------------------------------------------------------------------------------------+
* | Static Private Method ZCL_APC_WSP_EXT_ZAPC_ECHO=>PREPARE_MESSAGE_FOR_UI
* +-------------------------------------------------------------------------------------------------+
* | [--->] IV_TEXT                        TYPE        STRING
* | [<-()] RV_TEXT                        TYPE        STRING
* +--------------------------------------------------------------------------------------</SIGNATURE>
  METHOD prepare_message_for_ui.
    TYPES: BEGIN OF t_message,
             text TYPE string,
             user TYPE uname,
             date TYPE timestamp,
           END OF t_message.
    DATA: ls_message TYPE t_message.
    ls_message-text = iv_text.
    ls_message-user = sy-uname.
    GET TIME STAMP FIELD ls_message-date.
    DATA(lo_json_witer) = cl_sxml_string_writer=>create(
                            type = if_sxml=>co_xt_json
                          ).
    CALL TRANSFORMATION id SOURCE ls_message = ls_message
                        RESULT XML lo_json_witer.
    DATA(lv_xstr) = lo_json_witer->get_output( ).
    CALL FUNCTION 'ECATT_CONV_XSTRING_TO_STRING'
      EXPORTING
        im_xstring = lv_xstr
*       im_encoding = 'UTF-8'
      IMPORTING
        ex_string  = rv_text.
  ENDMETHOD.
ENDCLASS.


ABAP Messaging Channel

For the ABAP Messaging Channel it is important to define the Authorized Programs:

AMC-ZAMC_ECHO.PNG

HCP Git to GitHub

This is just to document how to bring an app developed in SAP Web IDE from the HCP Trial Git repository to GitHub. I’ve used the following steps adopted from the documentation:

Adding an existing project to GitHub using the command line – User Documentation


First of all clone the HCP Git repository to the local system and switch to the new folder:


git clone https://<HCP Username>@git.hanatrial.ondemand.com/<HCP Accountname>/<HCP GIT Repository Name>
cd apcecho/

Now create a new repository on GitHub and add this repository. I’ve named it “github”:


git remote add github https://github.com/gregorwolf/apcecho.git

As I’ve created some files (Readme, License) in the GitHub Repository this files have to be pulled from the repository:


git pull github

And merged with the master:


git merge github/master

Then push the changes to both repositories:


git push github master
git push origin master

SAPUI5 Frontend

I’ve used the SAPUI5 Application Template in SAP Web IDE to bootstrap my app. You can get the source at:


gregorwolf/apcecho


You can use the Project SAPUI5-Deployer by Graham Robinson to import this Git repository directly into your ABAP stack.


That’s for the moment. Looking forward for your feedback.

Assigned Tags

      23 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Graham Robinson
      Graham Robinson

      Great example Gregor - now I just wish all my customers were on NW ABAP 7.4 SP8. 🙁

      Author's profile photo Gregor Wolf
      Gregor Wolf
      Blog Post Author

      Perhaps they can use their Gateway / Fiori system 😉

      Author's profile photo Graham Robinson
      Graham Robinson

      Or even their SolMan system 😈

      Author's profile photo Hemendra Sabharwal
      Hemendra Sabharwal

      Thanks Greg, It's a really good example to follow,

      I will try to replicate the same here in our sandbox to get the better end-to-end understanding on the ABAP Push.

      Thanks,

      Warm Regards

      Hemendra

      Author's profile photo Meinrad Funke
      Meinrad Funke

      Hi Gregor,

      first of all I have to thank you for that blog. We are working in a project where we have appr. 10 apps for workers in a yard. And we want to be able to send them messages while they are working on their tasks.

      Your blog helped me to build a similar demo application. And immediately after finishing it and considering to use it in the project - two questions arise

      - We want to send messages from our backend to Fiori apps. And we do not want to create APC to the backend. How to integrate the (Fiori) Gateway? I.e. how exchange messages across several systems?

      - What about the lifecycle of the web socket? Will it be closed automatically if the user exits the app and returns to the Launchpad? What happens in case of navigating to another app?
      I did not find information on that. Maybe you have a link or something?

      Best regards

      Meinrad

      Author's profile photo Gregor Wolf
      Gregor Wolf
      Blog Post Author

      Dear Meinrad,

      sorry for the late reply. Regarding your question:

      > how exchange messages across several systems?

      If you don't have a NetWeaver ABAP 7.50 infrastructure you have to fall back to use RFC calls between the systems. In 7.50 ABAP Push Channels also support acting as a client.

      > What about the lifecycle of the web socket? Will it be closed automatically if the user exits the app and returns to the Launchpad? What happens in case of navigating to another app?

      Without having done any real world testing I would think that the websocket is closed. Perhaps Masoud Aghadavoodi Jolfaei has some experience on that.

      Best regards

      Gregor

      Author's profile photo Masoud Aghadavoodi Jolfaei
      Masoud Aghadavoodi Jolfaei

      Hi Meinrad,

      for a "system2system" communication (a kind of ABAP Channel bridge between systems)  based on APC I recommend to check the "APC Detached Client" pattern. With this you are able to spawn WebSockets between systems their life cycle does not bound to the client report. A sample code is provided in  "Developing an APC Detached Client" section. I think the question regarding the lifecycle of WebSockets used in apps running inside Fiori Lunchpad (FLP) has to be answered by FLP colleagues.I have forwarded this question to the colleagues.

      Cheers,

      Masoud

      Author's profile photo Meinrad Funke
      Meinrad Funke

      Hi Masoud,

      thanks for this answer. Unfortunately we are still on NW7.40. But it looks interesting and I think I'll have to keep it in mind for next project.

      Regards

      Meinrad

      Author's profile photo Michael Dohse
      Michael Dohse

      Hi Gregor,

      is this scenario based on a embedded gateway hub?

      If I am right, this will actually not work in a central gw-hub scenario, correct?

       

      Thanks for short clarification...

       

      michael

      Author's profile photo Gregor Wolf
      Gregor Wolf
      Blog Post Author

      Hi Michael,

      you could use the SAP Gateway Push to bring the message to the central hub and register an ICF handler where you implement the translation to the ABAP Push Channel.

      Best regards
      Gregor

      Author's profile photo Anderson de Jesus Martins
      Anderson de Jesus Martins

      i am stoped in error msg WebSocket-dbg.js:383 WebSocket connection to 'wss://webidetesting9745189-sxxxxtrial.dispatcher.hanatrial.ondemand.com/sap/bc/apc/sap/zapc_echo' failed: Error during WebSocket handshake: Unexpected response code: 501 ... nothing make it work!! my CloudConn is on 2.12 and i´ve created the same push channel and MC... there is any secret on the destination on SCP ?

      Author's profile photo Gregor Wolf
      Gregor Wolf
      Blog Post Author

      Unfortunately the HTML5 runtime doesn't support Web Sockets yet. The Cloud Connector does, but you would need an additional Java App to make it pass through.

      Author's profile photo Anderson de Jesus Martins
      Anderson de Jesus Martins

      OK thank´s!
      Would you have any tips on how to do it with a Java APP? Could you tell me if the procedure indicated in the link below would be what you said? https://blogs.sap.com/2013/12/19/websocket-on-sap-hana-cloud-platform/

      Author's profile photo Gregor Wolf
      Gregor Wolf
      Blog Post Author

      I haven't developed such an app. But the post you've linked looks good. You should give it a try.

      Author's profile photo Rahul Inamadar
      Rahul Inamadar

      Hi Anderson,

      Did you achieve this by creating an additional Java app on SCP?

      I guess we need to create a Socket endpoint in SCP and at the same time a WebSocket client that listens to the socket on the SAP system.

      But I still confused about how to put it all together. If you achieved by doing the same then would describe a little bit about that?

      Thanks

      Author's profile photo Erick Escobar
      Erick Escobar

      I can´t execute this demo, i have uploaded the code in my local eclipse, i have created the APC and AMC, like you, and i have share with my ABAP repository system, and i only have the following message: " Websocket connection closed". what is missing?, please help me.

       

       

      Regards!

      Author's profile photo Gregor Wolf
      Gregor Wolf
      Blog Post Author

      Have you checked if you see any errors in the developer tools of your browser? Maybe you have not yet activated the endpoint in transaction SICF?

      Author's profile photo Erick Escobar
      Erick Escobar

      Thanks i found my mistake, i was trying to run like Web App instead of running in ABAP server, now it works!, Thanks a lot.

      Author's profile photo Anuraag Aggarwal
      Anuraag Aggarwal

      All documentation shows that APC can be 'easily' used for Fiori applications. Fiori development is done in WebIDE. And to build applications to use APC, there should be a way to integrate WSS call as easily as an oData call.

      I tried this example but in Web IDE, WSS can't be authenticated. I can pass the password in the URL but how to build actual production ready Fiori applications using this?

      Author's profile photo Gregor Wolf
      Gregor Wolf
      Blog Post Author

      Hi Anuraag,

      as SAP Web IDE will be replaced by SAP Business Application Studio I don't think that SAP will invest in any improvements to make Web Socket Development possible in Web IDE for an on Premise System. Perhaps you try it with SAP Business Application Studio or directly in VS Code. In any case you would need to configure the @sap/approuter with the websocket property. Let us know how it goes.

      Best regards
      Gregor

      Author's profile photo Stefan Heitzer
      Stefan Heitzer

      Hi Gregor,

       

      we have exact the case which you have described... we're trying to connect with a websocket on our On-Premise S/4 HANA System from the BAS. Currently I am using the sap.ui.core.ws.WebSocket. The problem is just that we always land in the error case (without providing any error at all). On the system itself we've already tried to allow cross oring accesses via transaction SAPC_CROSS_ORIGIN (entries all do rely on the origin of the BAS itself). Do we really have to implement the approuter for enabling this?

       

      Greetings & thanks

      Stef

      Author's profile photo Gregor Wolf
      Gregor Wolf
      Blog Post Author

      Dear Stef,

      I would suggest that you file an issue for BAS and post a question in the SAP Business Application Studio Q&A with the exact errors that you see in the developer tools. When you've done so link your question here.

      Best Regards
      Gregor

      Author's profile photo Stefan Heitzer
      Stefan Heitzer

      Hey Gregor,

       

      done: https://answers.sap.com/questions/13518750/establish-websocket-connection-to-on-premise-syste.html

       

      Greetings

      Stef