Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Real Time Chat App - WebSockets. Node.js + Socket.io + Express

joshZteng
September 07, 2013

Real Time Chat App - WebSockets. Node.js + Socket.io + Express

joshZteng

September 07, 2013
Tweet

More Decks by joshZteng

Other Decks in Programming

Transcript

  1. Real-Time Chat App An intro to HTML5 Websockets and node.js

    by @joshzteng GeekCamp SG 2013 Sunday, September 8, 13
  2. How The Web Works Client Browser Server HTTP Request eg.

    get / from google.com HTTP Response header body etc. Sunday, September 8, 13
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. Use Case Real-time apps chat stock ticker news report traffic

    patterns real-time games? etc... Sunday, September 8, 13
  11. 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
  12. 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
  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