Skip to Content
Author's profile photo Ferry Gunawan

SAPUI5 WebSocket Chat with WhatsApp


I would like to show you how to create a WebSocket chat application to send and receive a WhatsApp message from the SAPUI5 web browser with the open source Yowsup.



How it works?


Firstly, client will establish the connection to the server via the websocket address: ws://localhost:8080/fd6/websocket and register the following event listeners:

onerror: When a WebSocket encounters a problem, the “onerror” event handler is called.

onopen: When a WebSocket in the open state, the “onopen” event handler is called.

onmessage: When a WebSocket receives new data from the server, the “onmessage” event handler is called.

var webSocket = new WebSocket('ws://localhost:8080/fd6/websocket');
  webSocket.onerror = function(event) {
  webSocket.onopen = function(event) {
  webSocket.onmessage = function(event) {

Once the connection to the server is established, it can send and receive the WhatsApp message with the following steps:

Send Message to WhatsApp

Step 1

When user sends a message from the browser, the function sendMsg() will send the message to the server: webSocket.send(msg);

function sendMsg() {
  var msg = oMsg.getValue();
  if (msg == "")
  notify('Info', 'Please enter a message', 'information');
  else {
  lastMsg =;
  if (lastMsg.length > 0)
  lastMsg += "\r\n";
  chat : lastMsg + "You:" + msg
  }, true);
  return false;

Step 2

Method goInteractive in the python Yowsup code listens for the incoming message from the server: message = and send the message to the WhatsApp: msgId =“message_send”, (jid, message))

def goInteractive(self, jid):
  print("Starting Interactive chat with %s" % jid)
  jid = "" % jid
  while True:
  message =
  if not len(message):
  if not self.runCommand(message.strip()):
  msgId ="message_send", (jid, message))
  self.sentCache[msgId] = [int(time.time()), message]
  self.done = True

Receive Message from WhatsApp

Step 3

If there is any incoming message from WhatsApp, method onMessageReceived is called. It will send the message to the server:

def onMessageReceived(self, messageId, jid, messageContent, timestamp, wantsReceipt, pushName, isBroadcast):
  if jid[:jid.index('@')] != self.phoneNumber:
  formattedDate = datetime.datetime.fromtimestamp(timestamp).strftime('%d-%m-%Y %H:%M')
  print("%s [%s]:%s"%(jid, formattedDate, messageContent))
  if wantsReceipt and self.sendReceipts:"message_ack", (jid, messageId))

Step 4

Finally, the function onMessage will print out the  incoming message from the server to the client browser.

function onMessage(event) {
  msg =
  lastMsg =;
  if (lastMsg.length > 0)
  lastMsg += "\r\n";
  chat : lastMsg + "WhatsApp:" + msg
  }, true);
  notify('WhatsApp', msg, 'information');

To display the message, I am using noty – a jQuery Notification Plugin:

function notify(title, text, type) {
  // [alert|success|error|warning|information|confirm]
  text : text,
  template : '<div class="noty_message"><b>'
  + title
  + ':</b> <span class="noty_text"></span><div class="noty_close"></div></div>',
  layout : "center",
  type : type,
  timeout : 4000

It’s pretty easy to use and implement the WebSocket in SAPUI5. Thanks for reading my blog and let me know if you have any comments/questions. Enjoy chatting !

Source Code:

I have attached the complete source code fd6.war (rename fd6.war.txt to fd6.war) and the modified Yowsup python code in the GitHub:

ferrygun/WebSocketChat · GitHub


Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Basar Ozgur Kahraman
      Basar Ozgur Kahraman

      Hi Ferry,

      Helpful blog to integrate ui5 and whatsapp. i like blogs with attached running codes.

      Keep it up 🙂

      Author's profile photo Ferry Gunawan
      Ferry Gunawan
      Blog Post Author

      Thank you Basar

      Author's profile photo Former Member
      Former Member

      Nice tutorial!

      Is it possible to use this also to integrate whatsapp to sap cloud for customer?


      Author's profile photo ' Pavan ' Golesar
      ' Pavan ' Golesar

      Bravo.. Its nice.. Excited to know does it have any real time application?


      --Pavan G

      Author's profile photo Former Member
      Former Member


      can you list out the required configurations required for this?

      I am trying to understand how Whatsapp and Yowsup are integrated.

      Can we Integrate Whatsapp directly with SAP HCP?

      Author's profile photo rajeesh o
      rajeesh o

      nice tutorial 🙂

      Author's profile photo Former Member
      Former Member


      I am able to setup yowsup and send messages using cmd

      I have problem when running file (WebSocketChat/yowsup-master/src/Examples at gh-pages · ferrygun/WebSocketChat · GitHub)

      What will be the username and password that we have to use in to authenticate the user?



      Author's profile photo Vipin Nagpal
      Vipin Nagpal

      Hi Expert,

      Can we send message to Whatsapp from ABAP?