Intro

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) {
  onError(event)
  };
  webSocket.onopen = function(event) {
  onOpen(event)
  };
  webSocket.onmessage = function(event) {
  onMessage(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 {
  webSocket.send(msg);
  oMsg.setValue();
  oMsg.focus();
  lastMsg = oModel.oData.chat;
  if (lastMsg.length > 0)
  lastMsg += "\r\n";
  oModel.setData({
  chat : lastMsg + "You:" + msg
  }, true);
  $('#chatBox').scrollTop($('#chatBox')[0].scrollHeight);
  }
  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
  print(self.getPrompt())
  while True:
  message = self.ws.recv()
  if not len(message):
  continue
  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:
  return
  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))
  print(self.getPrompt())
  self.ws.send(messageContent)

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";
  oModel.setData({
  chat : lastMsg + "WhatsApp:" + msg
  }, true);
  $('#chatBox').scrollTop($('#chatBox')[0].scrollHeight);
  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]
  noty({
  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

References:

• Playing with WhatsApp and SAP HANA Cloud Platform
• Real Time Dashboard with WebSocket & SAP HANA Cloud Platform
• Simple chat server example using UI5 WebSocket