Skip to Content

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


You must be Logged on to comment or reply to a post.