• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Websockets - DevFestX May 19, 2012
 

Websockets - DevFestX May 19, 2012

on

  • 1,221 views

 

Statistics

Views

Total Views
1,221
Views on SlideShare
1,221
Embed Views
0

Actions

Likes
1
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Websockets - DevFestX May 19, 2012 Websockets - DevFestX May 19, 2012 Presentation Transcript

  • Websockets Sameer SegalArtoo - Technology to the Rescue www.artoo.in
  • @artootrills
  • http://sameersegal.github.comPresentation: Websockets & Projects: KnockOutTweety
  • KnockOut Tweety http://kot.artoo.inhttp://sameersegal.github.com/KnockOutTweety/
  • Image Credit: http://www.lewisbenge.net/wp-content/uploads/2011/08/image_634393295480776281.png
  • Image Credit: http://www.lewisbenge.net/wp-content/uploads/2011/08/image_634393295481826341.png
  • HTTP vs Websockets
  • HTTP// RequestGET /home HTTP/1.1Host: trial.artoo.inConnection: keep-aliveCache-Control: max-age=0User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4) AppleWebKit/536.5 (KHTML,like Gecko) Chrome/19.0.1084.46 Safari/536.5Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Encoding: gzip,deflate,sdchAccept-Language: en-US,en;q=0.8Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3Cookie: .......// ResponseHTTP/1.1 200 OKDate: Sat, 19 May 2012 06:04:24 GMTServer: Play! Framework;master-jenkins-Artoo-Play-15;prodContent-Type: text/html; charset=utf-8Cache-Control: no-cacheSet-Cookie: ........Via: 1.1 artoo.inVary: Accept-EncodingContent-Encoding: gzipConnection: closeTransfer-Encoding: chunked
  • Websocket// RequestGET wss://socket.artoo.in/chat?username=admin&clientId=0782cd45-307d-414b-8efa-b2156253b6xx HTTP/1.1Origin: https://trial.artoo.inCookie: ...__utma=27942636.1788801618.1323048033.1337320289.1337406233.265;__utmb=27942636.7.10.1337406233; __utmc=27942636;__utmz=27942636.1337136927.261.12.utmcsr=google|utmccn=(organic)|utmcmd=organic|utmctr=(not%20provided)Connection: UpgradeSec-WebSocket-Extensions: x-webkit-deflate-frameHost: socket.artoo.inSec-WebSocket-Key: ego8R97Ruc3d5RPwRhhtzw==Upgrade: websocketSec-WebSocket-Version: 13// ResonseHTTP/1.1 101 Switching ProtocolsConnection: UpgradeUpgrade: websocketSec-WebSocket-Accept: CEbdJJgOTp1ZCcx6+RZTngrI5Ek=
  • HTTP Websocket GET wss://socket.artoo.in/chat?GET /home HTTP/1.1 username=admin&clientId=0782cd45-307d-414b-8efa-b2156253b6xxHost: trial.artoo.in HTTP/1.1Connection: keep-alive Origin: https://trial.artoo.inCache-Control: max-age=0 Cookie: ...User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4) __utma=27942636.1788801618.1323048033.1337320289.1337406233.26AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.46 5; __utmb=27942636.7.10.1337406233; __utmc=27942636;Safari/536.5 __utmz=27942636.1337136927.261.12.utmcsr=google|Accept: text/html,application/xhtml+xml,application/ utmccn=(organic)|utmcmd=organic|utmctr=(not%20provided)xml;q=0.9,*/*;q=0.8 Connection: UpgradeAccept-Encoding: gzip,deflate,sdch Sec-WebSocket-Extensions: x-webkit-deflate-frameAccept-Language: en-US,en;q=0.8 Host: socket.artoo.inAccept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3 Sec-WebSocket-Key: ego8R97Ruc3d5RPwRhhtzw==Cookie: ....... Upgrade: websocket Sec-WebSocket-Version: 13HTTP/1.1 200 OKDate: Sat, 19 May 2012 06:04:24 GMTServer: Play! Framework;master-jenkins-Artoo-Play-15;prodContent-Type: text/html; charset=utf-8Cache-Control: no-cacheSet-Cookie: ..... HTTP/1.1 101 Switching Protocols. Connection: Upgrade. Upgrade: websocket. Sec-WebSocket-Accept: CEbdJJgOTp1ZCcx6+RZTngrI5Ek=Via: 1.1 artoo.inVary: Accept-EncodingContent-Encoding: gzipConnection: closeTransfer-Encoding: chunked One time Everytime (2 bytes of overhead for every message)
  • "Reducing kilobytes of data to 2 bytes…andreducing latency from 150ms to 50ms is farmore than marginal. In fact, these two factorsalone are enough to make Web Socketsseriously interesting to Google."- Ian Hickson (Google’s HTML5 Spec Lead)
  • Specs• Based on TCP but not true TCP socket• ws:// or wss://• Full-Duplex • Both UTF-8 strings and binary frame can be sent in any direction• More at http://dev.w3.org/html5/ websockets/
  • Use?
  • JS Regular Javascript Client-Side var socket = null; var socketUrl = “ws://localhost:8080/feed”; $(function(){ socket = new WebSocket(socketUrl); socket.onopen = function(event) { } socket.onmessage = function(event) { } socket.onclose = function(event) { } });
  • JS jquery-websocket http://code.google.com/p/jquery-websocket/ Client-Side
  • Android Java Websocket https://github.com/TooTallNate/Java-WebSocket Client-Side @Override public class SampleSocket extends WebSocketClient { public void onMessage(String message) { Chat chat = Chat.fromJSON(message); private Context context; private boolean connected = false; if (chat != null) { private Handler h = new Handler(); ContentValues values = new ContentValues(); private Runnable r = new Runnable() { switch (chat.event) { @Override case ONLINE: public void run() { try { break; Chat chat = new Chat(); case OFFLINE: chat.event = event_type.STAY_ALIVE; if (connected) { break; send(chat.toJSON()); case USER: } } catch (IOException e) { break; e.printStackTrace(); case MESSAGE: } break; h.postDelayed(r, 10000); default: } }; } public SampleSocket(Context context, URI serverUri) { // Insert / Update into DB super(serverUri); } this.context = context; } // Sending keep alive messages h.postDelayed(r, 5000); @Override } public void onOpen() { public SampleSocket(Context context, URI serverUri, } WebSocketDraft draft) { super(serverUri, draft); @Override this.context = context; public void onClose() { } } @Override public void onIOError(IOException ex) { }
  • Android Client-Side Activity 1 Use Messenger Service Activity 2 WebSocket
  • Java jquery-websocket http://jwebsocket.org/ Server-Side public class JWebSocketTokenListenerSample implements WebSocketTokenListener { private static Logger log = Logging.getLogger(JWebSocketTokenListenerSample.class); public void processOpened(WebSocketEvent aEvent) { log.info("Client " + aEvent.getSessionId() + " connected."); } public void processPacket(WebSocketEvent aEvent, WebSocketPacket aPacket) { // here you can process any non-token low level message, if desired } public void processToken(WebSocketTokenEvent aEvent, Token aToken) { log.info("Client " + aEvent.getSessionId() + " sent Token: " + aToken.toString() + "."); // here you can interpret the token type sent from the client according to your needs. String lNS = aToken.getNS(); String lType = aToken.getType(); // check if token has a type and a matching namespace if (lType != null && "my.namespace".equals(lNS)) { // create a response token Token lResponse = aEvent.createResponse(aToken); if ("getInfo".equals(lType)) { // if type is "getInfo" return some server information lResponse.put("vendor", JWebSocketConstants.VENDOR); lResponse.put("version", JWebSocketConstants.VERSION_STR); lResponse.put("copyright", JWebSocketConstants.COPYRIGHT); lResponse.put("license", JWebSocketConstants.LICENSE); } else { // if unknown type in this namespace, return corresponding error message lResponse.put("code", -1); lResponse.put("msg", "Token type " + lType + " not supported in namespace " + lNS + "."); } aEvent.sendToken(lResponse); } } public void processClosed(WebSocketEvent aEvent) { log.info("Client " + aEvent.getSessionId() + " disconnected."); } }
  • Chathttp://www.playframework.org/documentation/1.2.4/samples#aChata
  • ChatRoom room = ChatRoom.get(roomNo); // Socket connected, join the chat room EventStream<ChatRoom.Event> roomMessagesStream = room.join(user); // Loop while the socket is open while (inbound.isOpen()) { // Wait for an event (either something coming on the inbound // socket channel, or ChatRoom messages) Either<WebSocketEvent, ChatRoom.Event> e = await(Promise .waitEither(inbound.nextEvent(), roomMessagesStream.nextEvent())); // Case: User typed quit for (String userMessage : TextFrame.and(Equals("quit")).match( e._1)) { room.leave(user); outbound.send("quit:ok"); disconnect(); // Case: Someone joined the room } for (ChatRoom.Join joined : ClassOf(ChatRoom.Join.class).match( e._2)) { // Case: TextEvent received on the socket outbound.send("join:%s", joined.user); for (String userMessage : TextFrame.match(e._1)) { } room.say(user, userMessage); } // Case: New message on the chat room for (ChatRoom.Message message : ClassOf(ChatRoom.Message.class) .match(e._2)) { outbound.send("message:%s:%s", message.user, message.text); } // Case: Someone left the room for (ChatRoom.Leave left : ClassOf(ChatRoom.Leave.class).match( e._2)) { outbound.send("leave:%s", left.user); } // Case: The socket has been closed for (WebSocketClose closed : SocketClosed.match(e._1)) { room.leave(user); disconnect(); } }
  • Don’t Even...• Nginx • Use HA Proxy / Varnish ahead of nginx• Auto Manual STAY_ALIVE• Combine REST & Websocket Servers • REST = Stateless • WebSockets = State-ful
  • Talk
  • Credits• Websocket.org • http://www.websocket.org/• HTML5 Websocket API • http://www.slideshare.net/ffdead/the-html5-websocket-api • http://www.lewisbenge.net/index.php/2011/04/html-5-web-sockets-the- real-time-web/• Kaazing • http://kaazing.com/• Play Framework • http://www.playframework.org/documentation/1.2.4/home
  • Thank You www.artoo.insameersegal.github.com