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? online casino singapore


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 = oModel.oData.chat;
  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 = self.ws.recv() and send the message to the WhatsApp: msgId = self.methodsInterface.call(“message_send”, (jid, message))

def goInteractive(self, jid):
  print("Starting Interactive chat with %s" % jid)
  jid = "%s@s.whatsapp.net" % jid
  while True:
  message = self.ws.recv()
  if not len(message):
  if not self.runCommand(message.strip()):
  msgId = self.methodsInterface.call("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: self.ws.send(messageContent)

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:
  self.methodsInterface.call("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 = event.data
  lastMsg = oModel.oData.chat;
  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