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
- SAP Managed Tags:
8 Comments
