Scalable Real Time Chat (Text, Audio, Video) - Implemented using XMPP

1. Scalable Real Time Chat (Text, Audio, Video)
Implemented using XMPP
Scaling Series

2. Topics
1. RTA and their Applications
- A few examples
2. Introduction to XMPP & Ejabberd
- What is XMPP? Why we use XMPP? What is ejabberd?
3. Chat Over XMPP
- Some features
4. Dynamic Notifications
- How we send dynamic notification about recently created activities?
5. Specs implemented for Audio/Video calls
- Calls in multiple tabs, Call functionality For Safari using Temasys plugin.
6. Problems Faced
- Problems faced while implementing Audio/Video calls.
7. Future Implementations
- Some chat/call related enhancements/features

3. A real time application(RTA) is an application functions within a time frame, generally measured in the order of milliseconds or
sometimes microseconds. Some examples of RTAs are :
 Video conferencing
 Voice calls
 Online gaming
 Chatting
 IM (instant messaging)
 Some e-commerce transactions
Ways to build RTAs : https://www.youtube.com/watch?v=ZwyjDiikNKk
RTA and their Applications

4. XMPP (Extensible Messaging and Presence Protocol) is a protocol based on Extensible Markup Language (XML) and intended for
instant messaging (IM) and online presence detection. The protocol eventually allows Internet users to send instant messages to
anyone else on the Internet, regardless of differences in operating systems and browsers. XMPP has 3 fundamental stanzas:
<presence>, <message> and <iq>
More Details At:- http://www.adarshr.com/fun-with-xmpp-and-google-talk-part-2
An alternative for XMPP was socket.io (http://socket.io/) that had scalability issues
Introduction to XMPP and Ejabberd

5. Ejabberd is a Rock Solid, Massively Scalable, Infinitely Extensible XMPP Server - https://www.ejabberd.im/. Some
alternative that we considered to choose from was Openfire and Prosody.
Following are the advantages that Ejabberd provides over Openfire and Prosody:
 Low CPU consumption
 Stability: Server keeps running for other users, irrespective of problems like client system crashed or program has bugs
 Clustering support: Install ejabberd in several machines and set them up as clusters to spread excess load, hence more scalable.
 Simple WebAdmin console for managing users, modules, etc.
 Uses Erlang which is much faster than Java used by Openfire and Lua used by Prosody. (Erlang vs Lua
http://vschart.com/compare/lua/vs/erlang-programming-language)
Introduction to XMPP and Ejabberd

6. Before we start communicating we need to have a session opened between the client and the chat server (ejabberd). For this we use
WebSocket connection. WebSocket allows us to create a Full-Duplex communication channel with very less data overhead and
complexity.
To implement chat over XMPP we use JSJaC - https://github.com/sstrigler/JSJaC. It provides support for communicating with Jabber
server(ejabberd) using XMPP Over WebSocket. Once a WebSocket connection is created, we can start sending the JsJaC messages
using the connection object. An example is as follows:
con = new JSJaCWebSocketConnection({ httpbase: ‘wss://devtalent01.exphosted.com:5280/websocket’ });
con.connect({
username: ‘performance-1’,
domain: ‘uklocal.com’,
resource: ‘performance_12345678’,
pass: ‘password’,
secure: true
});
var oMsg = new JSJaCMessage();
oMsg.setTo(new JSJaCJID(receivers_jid));
oMsg.setBody(message_body);
con.send(oMsg);
Chat over XMPP

7. Features that we implemented for chat :
 User online indicators.
 User typing indicator.
 Chat over multiple tabs and browsers with different resources (marking as read if it’s read in any tab)
 Highlighting and Bounce indicator if respective chat review assignment is not in viewport (stopping bounce of a particular chat
count)
 Splash notification (missed chat functionality)
 Opening form and viewing chat inside the form on clicking the splash notification
 Chat history using Store.js (https://github.com/marcuswestin/store.js/) (! IE)
Chat over XMPP

8. Dynamic Notifications
To implement dynamic notification we have used XMPP4R (https://xmpp4r.github.io/). XMPP4R is nothing but a XMPP/Jabber library
for Ruby.
Sample Code:
Check self.send_push_notification(activity_id, recipient_jids) in User.rb for push notification implementation. This is also used for
notifying other users if profile pic was changed or Task was cancelled.

9. Specs for Audio/Video Calls
We use giggleJS(https://github.com/valeriansaliou/giggle) for audio/video calls.
An alternative for this is Strophe.jingle(https://github.com/ESTOS/strophe.jingle) for Strophe.js
 Following are the features that we support with calls:
 Multiple Tabs and Browsers (Upto 10 tabs)
 Missed call notification
 User busy and hardware detection feature
 Call is retained even when switching between pages
 Viewing respective Task form while in a call
 Muting/Unmuting audio or video
 Draggable call window, full screen interaction
 Call support for Safari using Temasys Plugin and Adapter JS (https://temasys.atlassian.net/wiki/display/TWPP/WebRTC+Plugins)

10. Specs for Audio/Video Calls
WebRTC : GiggleJS uses WebRTC API for establishing a peer to peer connection. Some native APIs of WebRTC are:
Changes made for Audio/Video calls in Safari can be found in our wiki:
https://wiki.exphosted.com/doku.php/audio_video_calls_over_xmpp
 getUserMedia
 RTCPeerConnection
 RTCSessionDescription
 RTCIceCandidate

11. Problems Faced
 Multiple notification issues.
 Chat history for new browser but same user login
 Handling chat count in multiple tabs/browsers
 Showing when receiver is busy (multiple tabs)
 Blocking other calls if one call is active from either end
 Logging out user from CHAT if he/she has logged out in other tab
 Stop hardware usage after call has ended.

12. Future Implementations
 Screen sharing using giggle.js
 Group chat/calls
 Call history

13. Reference Links
 XMPP and WebSocket - http://stackoverflow.com/a/26560860, https://blog.andyet.com/2014/10/30/websocket/
 XMPP over Socket.io - http://stackoverflow.com/a/33868081
 Jingle - http://xmpp.org/extensions/xep-0166.pdf
 XMPP fundamental stanza examples - http://xmpp.org/rfcs/rfc3921.html#stanzas-presence-children-show
 BOSH vs WebSockets - http://stackoverflow.com/a/6442488
 XMPP and WebRTC - https://xmpp.org/uses/webrtc.html
 Lua vs Erlang - http://vschart.com/compare/lua/vs/erlang-programming-language

14. THANK YOU