Real-Time Chat App An intro to HTML5 Websockets and node.js by @joshzteng GeekCamp SG 2013 Sunday, September 8, 13

How The Web Works Client Browser Server HTTP Request eg. get / from google.com HTTP Response header body etc. Sunday, September 8, 13

So Based on this knowledge how would we naively build a real-time app? Client (user) sends message (HTTP Request) Server receives message and stores it Server response with a success message - HTTP status code: 200 (HTTP Respond) Other clients (users) request for new messages continuously (HTTP Request) Server sends new message (HTTP Respond) Sunday, September 8, 13

Client Browser Server I’m Kay.. Send my message: “How’s it going?” I receive your request, kay Client Browser Client Browser Client Browser Client Browser Client Browser Any new message? Yes! Here it is “How’s it going” from Kay Every client constantly ask for new messages. (every second?). the client has to initiate the request. PROBLEM Sunday, September 8, 13

Question When should clients request for new messages? Client has no idea when the server receives a new message In previous example we solved it by: Client request for new messages on fixed regular intervals Crazy number of request. Imagine 100 chat clients requesting new messages every second. That’s 100 x 60 = 6000 requests and responses per minute! car back seat analogy imagine u hv 5 kids at the back of your car, n each and every one of them asking you are we there yet, are we there yet are we there yet.. n u hv to reply no, we’re not there yet. no, we’re not there yet for 5 times Sunday, September 8, 13

Another Problem Sunday, September 8, 13

HTTP Request Header (from client browser) HTTP Respond Header (from server) Sunday, September 8, 13

What’s the deal with the headers? 871 bytes of unnecessary information per request cycle! Doesn’t seem like much. Imagine 1000 clients polling every second! Network throughput is (871 x 1000) = 871, 000 bytes! or 6.6 Mbps! How about 10,000 or 100,000 clients/ users? (66Mbps! 665 Mbps!) Doesn’t even include data yet! Siao! Super unnecessary for a chat app! car back seat analogy Sunday, September 8, 13

That was a technique called polling Sounds very stupid but this wasn’t that uncommon in the not-so- distant past Sunday, September 8, 13

Other alternatives Long polling HTTP Streaming etc meh.... Sunday, September 8, 13

Use WebSocket!! Sunday, September 8, 13

What is WebSocket? HTML5 Specification Communication protocol enables browsers to have bi-directional communication with a server over a single channel Server can push/broadcasts messages to clients without client initiating a new request Native mobile app can be a client too! Sunday, September 8, 13

WebSocket “reducing kilobytes of data to 2 bytes.. and reducing latency from 150ms to 50ms far more than marginal In fact these 2 factors alone are enough to make WebSocket seriously interesting....” Sunday, September 8, 13

Use Case Real-time apps chat stock ticker news report traffic patterns real-time games? etc... Sunday, September 8, 13

Let’s get building! node.js (javascript for server-side code) fast! non-blocking code! express (sinatra-ruby, juno-python, nancy-.net, spark-java like framework) not necessary socket.io (a websocket library) helps with websocket cross-browser compatibility connection fallback Sunday, September 8, 13

This is not production safe! Cross-site scripting! XSS. Don’t allow javascript to be injected SQL injection if using sql database Other common security vulnerability CSRF if you there are stuff more than the chat etc. Sunday, September 8, 13

Clone my repo ;) https:/ /github.com/joshteng/geek_chat Sunday, September 8, 13

Resources Objective-c WebSocket client library: https:/ /github.com/square/ SocketRocket PhoneGap plugin for Android https:/ /github.com/mkuklis/phonegap- websocket Quantum leap in scalability for the web: http:/ /www.websocket.org/ quantum.html CodeSchool node.js.. it’s awesome! Can I use websockets? http:/ /caniuse.com/websockets Ruby WebSocket Server https:/ /github.com/igrigorik/em-websocket Good read on websocket: http:/ /lucumr.pocoo.org/2012/9/24/ websockets-101/ Sunday, September 8, 13

Questions? @joshzteng joshteng@me.com Sunday, September 8, 13