Xproject presentation

Michael Jo

mjtoolbox.wordpress.com

Websocket

• HTML5

• What is WebSocket?

• Usage

• Demo

Agenda

HTML5

• http://www.w3.org/2012/webapps/charter/

• Html5 Video : http://www.youtube.com/watch?v=mzPxo7Y6JyA

• Worth taking a look : http://en.wikipedia.org/wiki/WHATWG

• Sevral key buzz words : WebSocket, WebForm 2.0, WebWorker, Canvas

• Canvas demo : http://net.tutsplus.com/articles/web-roundups/21-ridiculously-impressive-html5-canvas-experiments/

• Compatibility check : http://caniuse.com/

• Websocket Demo : http://www.websocket.org/demos.html

• Websocket slide : http://www.slideshare.net/ffdead/the-html5-websocket-api

• JQuery Websocket : http://code.google.com/p/jquery-websocket/

• JQuery graceful Websocket : http://code.google.com/p/jquery-graceful-websocket/

• Commercial Websocket server : http://kaazing.com/

• Java Open source project : http://jwebsocket.org/

• MS HTML5 Lab : http://html5labs.interoperabilitybridges.com/search?q=websocket&go=

• .NET Websocket : http://www.codeproject.com/Articles/57060/Web-Socket-Server

HTML5

• Prior websocket : Long polling, comet

• RealTime : Minimal latency, large number of concurrent users

• Full-duplex communication channel (Http is half-duplex channel)

• Normal traffic unaffected. Ignore non websocket related request.

• Examples : social networking, gaming, collaborative environment, financial applications, etc

• Server to interpret http and switch to WebSocket (Websocket handshake).

• ws:// or wss://

• Significant less traffic : Kilobyte to 2 bytes and reducing 150ms to 50ms

Websocket

Websocket

Client Server

ws.send(data)

Register applicationServlet

WebsocketApplication

onConnectonMessage

Instantiate with handler and listener

ClientSocket

Consider it as a client proxy

Websocket send()

new WebSocket()onopen()

ws.send()onmessage(event)

http://mjtoolbox.wordpress.com/category/html5/

https://github.com/mjtoolbox/WebsocketDemo

More info