UI5 WebSockets

Fore more detailed information on WebSockets in UI5 visit the official documentation or more specific WebSocket, PCPWebSocket.

What is ABAP Push Channel? Refer to this blog post or visit the official documentation for more information. Also: ABAP JSON, ABAP WebSocket Communication, ABAP Channels.

Overview of the WebSocket/APC interaction model in ABAP:

The following code snippet does:

• Decide which URI schema to use
  • WS: for non secure connections (HTTP)
  • WSS: for secure connections (HTTPS)
• Build the respective SAP APC endpoint <SAPHost:PORT>/<PathWithinICF>/<APCName>?<specificChannel>
• Create the WS-Connection
• Attach Event-Listener to 'Open'-Event
  • ... do something
• Attach Event-Listener to 'Message'-Event
  • ... do something

Code Snippet

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/core/ws/WebSocket"
], function(Controller, WebSocket) {
    "use strict";

    //global var
    var connection;

return Controller.extend("some.Namespace.controller.Main", {

    onInit: function(){
        //connect to the WebSocket on entry of View
        this._connectToWebSocket();
    },

    _connectToWebSocket: function() {
        var that = this;
        var wsEndpoint;
        //decide Endpoint start (ws/wss)
        if (window.location.protocol === "https:") {
            wsEndpoint = "wss:";
        } else {
            wsEndpoint = "ws:";
        };
        //add SAP Backend APC to complete Endpoint
        wsEndpoint += "//" + window.location.host + "/sap/bc/apc/sap/<ABAPPushChannelName>?channel=something";
        try {
            // create the WS Connection
            connection = new sap.ui.core.ws.WebSocket(wsEndpoint);
            connection.attachOpen(function(oEvt) {
                //Connected to websocket succeed
                console.log(oEvt);
            });
            connection.attachMessage(function(oEvt) {
                //receive message from SAP Backend, transform JSON String into object and make decision
                var someAttribute = JSON.parse(oEvt.getParameter('someAttribute'));
                if  (someAttribute.someValue === someComparison){
                    //Websocket message received 
                    console.log(someAttribute);
                } else {
                    //Message from backend wasn't meant for this application
                };
            }) catch (oErr) {
                //Could not connect to websocket);
                console.log(oErr);
            }
        };
    },
});

Credits

Credits for the information above go to the UI5 and ABAP documentation. As well as the blog posts from Horst Keller and Masoud Aghadavoodi Jolfaei

Links:

• SAPUI5 WS Documentation
• ABAP Channels Documentation
• ABAP (Push) Channels Documentation
• ABAP Channels Blog Post
• ABAP and WebSocket Blog Post
• ABAP and JSON Blog Post