Nodejs and WebSockets
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Nodejs and WebSockets

  • 21,871 views
Uploaded on

Talk about node.js and WebSockets

Talk about node.js and WebSockets

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • *CLICK the LINK to keep updated on all the latest Mods/Glitches*
    adf.ly\QBJDM
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
21,871
On Slideshare
10,937
From Embeds
10,934
Number of Embeds
17

Actions

Shares
Downloads
275
Comments
1
Likes
27

Embeds 10,934

http://gonzalo123.wordpress.com 3,509
http://themelee.org 3,428
http://gonzalo123.com 2,470
http://css.dzone.com 842
http://www.scoop.it 594
http://feeds.feedburner.com 47
http://translate.googleusercontent.com 12
http://paper.li 11
http://webcache.googleusercontent.com 6
http://www.dzone.com 3
http://www.linkedin.com 3
http://hghltd.yandex.net 2
http://a0.twimg.com 2
http://www.tumblr.com 2
http://themelee.tumblr.com 1
https://twitter.com 1
https://www.linkedin.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Node.js and WebSockets Gonzalo Ayuso 2011 @gonzalo123http://gonzalo123.wordpress.com https://github.com/gonzalo123
  • 2. Part 1. Node.jsPart 2. WebSockets
  • 3. Node.js | Whats node.js● JavaScript on the server● Written by Ryan Dahl● Based on V8 (Google)● Asynchronous event-driven model● Similar in design to: ○ Event Machine (Ruby) ○ Twisted (Python)
  • 4. Node.js | Why? I/O needs to be done differently
  • 5. Node.js | Why? I/O needs to be done differentlyFrom: recordset = db.query("select * from Table"); render(recordset);
  • 6. Node.js | Why? I/O needs to be done differentlyQ: When will you add threads to JavaScript?”A: over your dead body Brendan Eich (creator of JavaScript)
  • 7. Node.js | Why? I/O needs to be done differentlyFrom: recordset = db.query("select * from Table"); render(recordset);To: db.query("select * from Table", function (recordset) { render(recordset) });
  • 8. Node.js | Why? I/O needs to be done differentlyFrom: recordset = db.query("select * from Table") render(recordset)To: db.query("select * from Table", function (recordset) { render(recordset) }); Design Goals ● No function should direct perform I/O. ● To read info from disk, network, ... there must be a callback
  • 9. Node.js | Show me the code!HTTP SERVERvar http = require(http);http.createServer(function (req, res) { res.writeHead(200, {Content-Type: text/plain}); res.end(Hello Worldn);}).listen(1337, "127.0.0.1");console.log(Server running at http://127.0.0.1:1337/);
  • 10. Node.js | Show me the code!HTTP SERVERvar http = require(http);var total = 0;http.createServer(function (req, res) { res.writeHead(200, { Content-Type: text/plain }); res.end(Hi + total + n); tot++;}).listen(1337, "127.0.0.1");console.log(Server running at http://127.0.0.1:1337/);
  • 11. Node.js | Pros and ConsPROS ● Great I/O performance ● Just JavaScript. We all know JavaScript ● Community ● A lot of modules available https://github. com/joyent/node/wiki/modules ● npm
  • 12. Node.js | Pros and ConsPROS ● Great I/O performance ● Just JavaScript. We all know JavaScript ● Community ● A lot of modules available https://github. com/joyent/node/wiki/modules ● npmCONS ● Hosting ● We dont really know JavaScript ● Modules too young ● One thread, one single process for all ● Windows support
  • 13. Part 1. Node.jsPart 2. WebSockets
  • 14. WebSockets | HistoryDescription of the problem: ● Real time communications in Browser
  • 15. WebSockets | HistoryDescription of the problem: ● Real time communications in BrowserImagine. Lets create simple chat client (5 years ago):Trivial problem with heavy clients, hard in browsers.
  • 16. WebSockets | HistoryCOMET (Wikipedia):Comet is a web application model in which a long-held HTTP requestallows a web server to push data to a browser, without the browserexplicitly requesting it.
  • 17. WebSockets | HistoryCOMET (Wikipedia):Comet is a web application model in which a long-held HTTP requestallows a web server to push data to a browser, without the browserexplicitly requesting it.Problem with COMET: ● Servers (keep-alive, MaxClients, ...) ● Clients
  • 18. WebSockets | HistoryCOMET (Wikipedia):Comet is a web application model in which a long-held HTTP requestallows a web server to push data to a browser, without the browserexplicitly requesting it.Problem with COMET: ● Servers (keep-alive, MaxClients, ...) ● Clients
  • 19. WebSockets | Short Polling / LongPollingShort Polling ● <meta http-equiv="refresh" content="5"> ● setInterval and setTimeout ● Inneficient ● Uses many resources (DB Connection, ...)
  • 20. WebSockets | Short Polling / LongPollingShort Polling ● <meta http-equiv="refresh" content="5"> ● setInterval and setTimeout ● Inneficient ● Uses many resources (DB Connection, ...)Long Pooling ● Looks like Real Time but it isnt RT
  • 21. WebSockets | Short Polling / LongPollingShort Polling ● <meta http-equiv="refresh" content="5"> ● setInterval and setTimeout ● Inneficient ● Uses many resources (DB Connection, ...)Long Pooling ● Looks like Real Time but it isnt RTIt works? YesIt scales? No (Long Polling better but still No)Is your sysadmin happy? No
  • 22. WebSockets | Short Polling / LongPollingShort Polling ● <meta http-equiv="refresh" content="5"> ● setInterval and setTimeout ● Inneficient ● Uses many resources (DB Connection, ...)Long Pooling ● Looks like Real Time but it isnt RTIt works? YesIt scales? No (Long Polling better but still No)Is your sysadmin happy? No
  • 23. WebSockets | HTML5WebSocketsThis specification defines an API that enables Web pages to use theWebSocket protocol for two-way communication with a remote host.
  • 24. WebSockets | HTML5WebSocketsThis specification defines an API that enables Web pages to use theWebSocket protocol for two-way communication with a remote host.Thats means: ● The solution of the problem with RT at browser side
  • 25. WebSockets | HTML5var ws = new WebSocket(url);ws.onopen = function() { // When the connection opens };ws.onmessage = function() { // When the server sends data };ws.onclose = function() { // When the connection is closed };ws.send(Hi all);// later...ws.close();
  • 26. WebSockets | HTML5 Cool but ...
  • 27. WebSockets | HTML5 Cool but ... Not all browsers support it
  • 28. WebSockets | socket.ioIs there a solution?
  • 29. WebSockets | socket.ioIs there a solution? http://socket.io/
  • 30. WebSockets | socket.ioIs there a solution? http://socket.io/ Client<script src="/socket.io/socket.io.js"></script><script> var socket = io.connect(http://localhost); socket.on(news, function (data) { console.log(data); socket.emit(my other event, { my: data }); });</script>
  • 31. WebSockets | socket.ioIs there a solution? http://socket.io/ Client<script src="/socket.io/socket.io.js"></script><script> var socket = io.connect(http://localhost); Server (node.js application) socket.on(news, function (data) { console.log(data); var io = require(socket.io).listen(80); socket.emit(my other event, { my: data }); }); io.sockets.on(connection, function (socket) {</script> socket.emit(news, { hello: world }); socket.on(my other event, function (data) { console.log(data); }); });
  • 32. WebSockets | socket.io http://socket.io/Supported transports ● WebSocket ● Adobe® Flash® Socket ● AJAX long polling ● AJAX multipart streaming ● Forever Iframe ● JSONP Polling
  • 33. WebSockets | socket.io http://socket.io/Supported transports Supported browsers ● WebSocket ● Internet Explorer 5.5+ ● Adobe® Flash® Socket ● Safari 3+ ● AJAX long polling ● Google Chrome 4+ ● AJAX multipart streaming ● Firefox 3+ ● Forever Iframe ● Opera 10.61+ ● JSONP Polling ● iPhone Safari ● iPad Safari ● Android WebKit ● WebOs WebKit
  • 34. References● http://dev.w3.org/html5/websockets/● https://github.com/joyent/node/wiki/modules● http://nodejs.org/● http://socket.io/● http://en.wikipedia.org/wiki/Push_technology● http://www.youtube.com/watch?v=jo_B4LTHi3I● http://gonzalo123.wordpress. com/category/technology/node-js/
  • 35. The End. Many thanks @gonzalo123http://gonzalo123.wordpress.com