Each time, when companies deal with asynchronous events, like barcode scans in a manufacturing plant, that leads to many actions of the same sort happening in parallel. To avoid issues, it is vital then that the system interfaces get refreshed automatically and in real-time, so operators can always work with the latest status updates without further manual input required.

For one of our customers, where we implemented an integrated MES solution based on SAP MII (MII) / SAP PCo (PCo) / Sybase, this requirement was critical, since there were numerous numbers of requests from different machines per minute and not enough time for the operator to manually click a button for view refresh every time.

Get some behind the scene insights from our developer Sai Krishna Vellanki on how we solved this issue for our customer:

One way of dealing with asynchronous events, is to set a time interval with backend call every second to see if there exists some new data. But, this will consume lot of resources and may lead to performance issues.

Consider one machine operator client which makes every second a call to server, which will be 60 calls per minute, 3600 calls per hour, 86400 calls per day. When you have 25 machines at each plant, this is huge!

Then, we had come across PCo Web Sockets. This was the perfect tool to achieve the above-mentioned requirement.

There were several blog posts and documentations available on how to configure a WebSocket server, create a destination system, a remote notification in PCo and how to send / receive messages. But, there was no sample code available on how to use it on UI.

Use-case scenario:

  1. In material production, to produce a finished product (Goods Receipt) several raw materials must be consumed (Goods Issue).
  2. There can be different finished products, which might use the same raw material, or it can be different.
  3. Goods Issue is based on barcode scan. Based on the scan, the system will identify if it is a correct material (or) a wrong material that is being consumed.
  4. If it is a correct material, then no issue will be raised. But, if it is a wrong material then a machine alarm (audio-visual signal) will be triggered which alerts the operator that something is going wrong and (after addition of WebSocket) at the same time an automatic pop-up must be triggered on the operator’s client to show a detailed error message.
  5. There are different validations set for Goods Issue – it can be wrong material, double barcode scan, staging not done, stock not available in SAP etc.

It is very crucial in above use case scenario to show an automatic pop-up for the operator on what went wrong. Else, it will not help the production to identify errors in real time.

In PCo, a WebSocket Server, destination and notification are configured:

In the sample code, we will be using a JavaScript WebSocket object.
First, we need to store the WebSocket URL along with notification name into a variable:

var oURL = “ws://<host>:<port>/WebsocketNotification”;
Create the WebSocket object: var ws = new WebSocket(oURL);

Most important events for WebSocket communication:*

Event Event Handler Description
open Socket.onopen This event occurs when socket connection is established.
message Socket.onmessage This event occurs when client receives data from server.
error Socket.onerror This event occurs when there is any error in communication
Close Socket.onclose This event occurs when connection is closed.

*Reference: Tutorials point HTML5

We are using the message communication type as JSON.

For more information on different types of messages that are available –
Please refer to the SAP documentation: JSON Messages for WebSocket Connections

During ‘onopen’ event where the socket connection is established, subscribe the tags to listen to the changes that occur to tag value.

One important point to note is that to use JSON.stringify method. Since, while sending data to a webserver, the data must be a string.

Above shown way will enable the subscription of tag values. Now, once there is a value change for subscribed tag, then the event ‘onmessage’ will be triggered. In this event, you can have your own logic on what needs to be done if there is a change in tag value.

One important point is to note that to use the JSON.parse method. When receiving data from the webserver, the data is always a string. Once we use the parse method, then the data becomes a JavaScript object.

Once a client is subscribed, it needs to be unsubscribed if there is a page refresh / reload / communication failure. Otherwise, the session is still open until it is unsubscribed, which might lead to issues if there are multiple clients subscribed.

To unsubscribe during a communication failure, socket ‘close’ event must be used. If it is due to refresh / reload then window.onbeforeunload event can be used.

With the above described code, the system ensures that the client can react based on asynchronous events that are triggered at shop floor level.

Here is a short video demo:


We would like to thank Sai Krishna Vellanki for his valuable contribution to this article.

Recommended articles

New Now in Organizations

Here and Back Again, Rejoining CAMELOT. Was It the Right Choice?

The decision to rejoin a company is often a momentous one, carrying with it the promise of fresh opportunities, growth, and …

read more

SAP Dynamic Visit Planning Add-on for SAP CX Sales Cloud

Automate your visit planning with the help of the SAP Dynamic Visit Planning add-on. This blog post shows you the basic …

read more

Blockchain with SAP: MultiChain Applications (I)

This blog post is an article from a series of articles on the book published in December 2019 “Blockchain with SAP” (Rheinwerk …

read more

Reimagine your Value Chain with us

Contact us