This presentation explains the basics of WebSockets and how a Developer can leverage its features to enhance a Mobile User Experience and offer real timing applications
6. Web Server
(WebSocket compliant)
Endpoint
Client
(WebSocket compliant)
Endpoint
CONNECTED
A connection is established
and “never” closed
Bi-directional & full duplex connection on a
single TCP socket.
It can be secured using SSLIt can be on average, 700 x
faster than AJAX polling.
14. Endpoint
javax.websocket
Endpoint
Programmatic Endpoint
public class MyEndpoint extends Endpoint {
@Override
public void onOpen(Session s,
EndpointConfig c) {
// A connection was established
}
@Override
public void onClose(Session s, CloseReason
reason) {}
@Override
public void onError(Session s, Throwable
thr) {}
15. Endpoint
javax.websocket
Endpoint
Programmatic Endpoint:
Need to create a Message Handler
public class MyEndpoint extends Endpoint {
...
@Override
public void onOpen(Session s,
EndpointConfig c) {
session.addMessageHandler(
new MessageHandler.Whole<String>()) {
@Override
public void onMessage(String m) {
try {
s.getBasicRemote().sendText(“hi”);
} catch(IOException e) {
// Houston: we‟ve got a problem
}
...
Message Handler
16. Endpoint
javax.websocket
Endpoint
Annotated Endpoint: Much Simpler
@ServerEndpoint(“/endpoint”)
public class MyEndpoint extends Endpoint {
@OnOpen
public void open(Session s) {}
@OnMessage
public void myMessage(String message) {}
@OnClose
public void close(Session s) {}
No need for a
Message Handler
18. Endpoint Endpoint
javax.websocket
Session
For sending a simple message to another Endpoint
try {
session.getBasicRemote().sendText(“Hello World”);
} catch(IOException e) {
// Houston: We‟ve got a problem
}
“Hello World”
19. Endpoint
Endpoint
javax.websocket
Session
try {
for(Session s: session.getOpenSessions())
s.getBasicRemote().sendText(“Hello All”);
} catch(IOException e) {
// Houston: We‟ve got a problem
}
EndpointFor sending the same message to all open Sessions
20. Endpoint Endpoint
javax.websocket
Session
Some other Session’s methods very useful
boolean isOpen()
boolean isSecure()
void setMaxIdleTimeout(long time)
void addMessageHandler(MessageHandler handler)
: Check if the connection is open
: Check if the connection is secure
: Max Idle Timeout for Inactivity
: Different Message Handlers
21. Endpoint
Waiting for Message to be delivered: Blocking
...
session.getBasicRemote().sendText(“Hi everyone”);
...
RemoteEndpoint.Basic getBasicRemote()
22. Endpoint
Create another Thread in order to send it.
...
session.getAsyncRemote().sendText(“Hi everyone”);
...
RemoteEndpoint.Async getAsyncRemote()
23. Endpoint
Messages can be in different types
RemoteEndpoint.Basic.sendText(String text)
Text Messages
RemoteEndpoint.Basic.sendBinary(ByteBuffer data)
Binary Messages
RemoteEndpoint.sendPing(ByteByffer data)
Ping Frame
RemoteEndpoint.sendPong(ByteBuffer data)
Pong Frame
24. Endpoint
@ServerEndpoint(“/response”)
public class Response {
@OnMessage
public void textMessage(String msg, Session s) {
System.out.println(“Text:”+msg);
}
@OnMessage
public void binaryMessage(Session s, ByteBuffer msg) {
System.out.println(“Binary:”+msg.toString());
}
@OnMessage
public void pongMessage(Session s, PongMessage msg) {
System.out.println(“Pong:”+msg.getApplicationData().
toString();
}
}
Receiving Different type of Messages
25. Endpoint Endpoint
public class Person {
private int ID;
public String name;
public String position;
...
POJO
{
“ID”: 2
“name”: “somebody@gmail.com”
“position”: “Developer”
}
JSON
Encoder
JSON
Encoder
Decouples the business logic from serialization and
deserialization
26. Endpoint Endpoint
public class Person {
private int ID;
public String name;
public String position;
...
POJO
Decoder
JSON
Decoder
{
“ID”: 2
“name”: “somebody@gmail.com”
“position”: “Developer”
}
JSON
Decouples the business logic from serialization and
deserialization
27. Endpoint Endpoint
o Access details of the initial HTTP request for a connection
You can provide custom configuration on how the
container creates a server endpoint instances.
o Perform custom checks on the Origin HTTP header
o Modify the WebSocket handshake response
o Choose a WebSocket subprotocol
o Control the instantiation and initialization of endpoint
28. Endpoint EndpointYou can provide custom configuration on how the
container creates a server endpoint instances.
@Override
public void modifyHandshake(ServerEndpointConfig config,
HandshakeRequest request, HandshakeResponse response) {
config.getUserProperties().put(“handshakereq”, req);
}
30. Using Mobile’s
Browser
Using Native
Implementation
2 Different approaches for using WebSockets
The Connection is
never reliable
On a Mobile Universe
Using a open
connection for a long
time, can drain your
battery rapidly.
In Native apps, use
ONLY when the app
is on foregroud.
31. Using Mobile’s
Browser
The Good The Bad
No worries about
deployment:
It’s just a website
Not all Mobile Browsers
support WebSockets
Concern about different
version of browsers.
Must be deal with
JavaScript.
The same code for
every device
32. The Good The Bad
More easy ways to
support older versions of
iOS and Android.
Can’t reuse the same
code: Need to consider
different
implementations
More work on
maintenance
Using Native
Implementation More Control over a
Connection
34. function WebSocketTest(){
if ("WebSocket" in window) {
// WebSocket Connection goes here
alert("WebSockets supported
rnrnBrowser: “);
} else {
// the browser doesn't support
alert("WebSockets NOT supported”);
}}
Testing if a WebSocket is supported in your Browser
(Using JavaScript)
$(document).ready(function() {
if( typeof(WebSocket) != "function" ) {
$('body').html("<h1>Error</h1><p>Your
browser does not support Web Sockets.
</p>");
}});
Essentially, just test if WebSocket is defined
or not
35. var connection = new WebSocket(
„ws://webserver:80/mycontext/endpoint‟);
connection.onopen = function() {
// connection opened
console.log(„connection open‟);
console.send(„Hello World‟);
}
connection.onmessage = function(message) {
console.log(„Received message from server:‟);
console.log(message);
}
A simple JavaScript code using WebSocket
36. A tool for helping Monitoring WebSocket Traffic: Chrome
Dev Tools
• Open up the Developer Tools
• Switch to the Network tab
• Click on the entry for your
WebSocket connection
• Switch to the Frames tab.
http://developers.google.com/chrome-developer-tool/
Google’s Chrome Dev Tools
40. Enable “fast” notification for a “fast” reaction
• Real Time Notification: Seconds matter
Both iOS and Android has
Notification Systems.
41. Multiple devices (including mobile) to be in sync with
other sources
• Transfer several messages to be sure if
a device is in sync
• Exchange of several messages are
extremely fast
42. Enabling people in sharing and interacting in the same
content at the same time.
• Real Time Video Sharing
• Broader collaboration
43. Mobile Gaming: Synchronize all clients in a Massive
Multiplayer Gaming
• Synchronization of elements in all
clients, through the Server
• Adding instant notifications
• Instant chat between players
44. Presenting real time information from several sources.
• Instant information to the user
• Capacity to the user to react more
fast
45. Reading instant patient information and broadcasting to
his doctor
• Monitor life treaty information
• Broadcast to hospital / doctor
46. Enabling fast awareness in a large environment
• Awareness of other people in real time
• Keep track of living events
Client B
Client A
47. Connecting to other hardware (Raspberry Pi), which has
the capability of running WebSocket container.
http://developer.kaazing.com/portfolio/real-time-interactions-with-physical-objects-over-the-web/
• Using WebSockets as the default way to
connected to other hardware devices.
• Leveraging you WebSockets know-
how.
49. Thank you
Special Thanks: Neto Marin <neto.marin at gmail.com>
maltron@gmail.com
Avaliable on Slideshare.net
http://www.slideshare.net/maltron/enhancing-mobile-user-experience-with-websocket