Node.js and    WebSockets     Gonzalo Ayuso 2011          @gonzalo123http://gonzalo123.wordpress.com https://github.com/go...
Part 1. Node.jsPart 2. WebSockets
Node.js | Whats node.js● JavaScript on the server● Written by Ryan Dahl● Based on V8 (Google)● Asynchronous event-driven m...
Node.js | Why?      I/O needs to be done differently
Node.js | Why?           I/O needs to be done differentlyFrom:  recordset = db.query("select * from Table");  render(recor...
Node.js | Why?           I/O needs to be done differentlyQ: When will you add threads to JavaScript?”A: over your dead bod...
Node.js | Why?           I/O needs to be done differentlyFrom:  recordset = db.query("select * from Table");  render(recor...
Node.js | Why?           I/O needs to be done differentlyFrom:  recordset = db.query("select * from Table")  render(record...
Node.js | Show me the code!HTTP SERVERvar http = require(http);http.createServer(function (req, res) {  res.writeHead(200,...
Node.js | Show me the code!HTTP SERVERvar http = require(http);var total = 0;http.createServer(function (req, res) {  res....
Node.js | Pros and ConsPROS ● Great I/O performance ● Just JavaScript. We all know JavaScript ● Community ● A lot of modul...
Node.js | Pros and ConsPROS ● Great I/O performance ● Just JavaScript. We all know JavaScript ● Community ● A lot of modul...
Part 1. Node.jsPart 2. WebSockets
WebSockets | HistoryDescription of the problem: ● Real time communications in Browser
WebSockets | HistoryDescription of the problem: ● Real time communications in BrowserImagine. Lets create simple chat clie...
WebSockets | HistoryCOMET (Wikipedia):Comet is a web application model in which a long-held HTTP requestallows a web serve...
WebSockets | HistoryCOMET (Wikipedia):Comet is a web application model in which a long-held HTTP requestallows a web serve...
WebSockets | HistoryCOMET (Wikipedia):Comet is a web application model in which a long-held HTTP requestallows a web serve...
WebSockets | Short Polling / LongPollingShort Polling ● <meta http-equiv="refresh" content="5"> ● setInterval and setTimeo...
WebSockets | Short Polling / LongPollingShort Polling ● <meta http-equiv="refresh" content="5"> ● setInterval and setTimeo...
WebSockets | Short Polling / LongPollingShort Polling ● <meta http-equiv="refresh" content="5"> ● setInterval and setTimeo...
WebSockets | Short Polling / LongPollingShort Polling ● <meta http-equiv="refresh" content="5"> ● setInterval and setTimeo...
WebSockets | HTML5WebSocketsThis specification defines an API that enables Web pages to use theWebSocket protocol for two-...
WebSockets | HTML5WebSocketsThis specification defines an API that enables Web pages to use theWebSocket protocol for two-...
WebSockets | HTML5var ws = new WebSocket(url);ws.onopen = function() {    // When the connection opens };ws.onmessage = fu...
WebSockets | HTML5            Cool but ...
WebSockets | HTML5             Cool but ...      Not all browsers support it
WebSockets | socket.ioIs there a solution?
WebSockets | socket.ioIs there a solution?                       http://socket.io/
WebSockets | socket.ioIs there a solution?                                               http://socket.io/  Client<script ...
WebSockets | socket.ioIs there a solution?                                               http://socket.io/  Client<script ...
WebSockets | socket.io                       http://socket.io/Supported transports ● WebSocket ● Adobe® Flash® Socket ● AJ...
WebSockets | socket.io                       http://socket.io/Supported transports          Supported browsers ● WebSocket...
References● http://dev.w3.org/html5/websockets/● https://github.com/joyent/node/wiki/modules● http://nodejs.org/● http://s...
The End.    Many thanks          @gonzalo123http://gonzalo123.wordpress.com
Upcoming SlideShare
Loading in...5
×

Nodejs and WebSockets

22,282

Published on

Talk about node.js and WebSockets

Published in: Technology
1 Comment
28 Likes
Statistics
Notes
  • *CLICK the LINK to keep updated on all the latest Mods/Glitches*
    adf.ly\QBJDM
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
22,282
On Slideshare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
291
Comments
1
Likes
28
Embeds 0
No embeds

No notes for slide

Nodejs and WebSockets

  1. 1. Node.js and WebSockets Gonzalo Ayuso 2011 @gonzalo123http://gonzalo123.wordpress.com https://github.com/gonzalo123
  2. 2. Part 1. Node.jsPart 2. WebSockets
  3. 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. 4. Node.js | Why? I/O needs to be done differently
  5. 5. Node.js | Why? I/O needs to be done differentlyFrom: recordset = db.query("select * from Table"); render(recordset);
  6. 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. 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. 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. 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. 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. 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. 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. 13. Part 1. Node.jsPart 2. WebSockets
  14. 14. WebSockets | HistoryDescription of the problem: ● Real time communications in Browser
  15. 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. 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. 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. 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. 19. WebSockets | Short Polling / LongPollingShort Polling ● <meta http-equiv="refresh" content="5"> ● setInterval and setTimeout ● Inneficient ● Uses many resources (DB Connection, ...)
  20. 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. 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. 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. 23. WebSockets | HTML5WebSocketsThis specification defines an API that enables Web pages to use theWebSocket protocol for two-way communication with a remote host.
  24. 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. 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. 26. WebSockets | HTML5 Cool but ...
  27. 27. WebSockets | HTML5 Cool but ... Not all browsers support it
  28. 28. WebSockets | socket.ioIs there a solution?
  29. 29. WebSockets | socket.ioIs there a solution? http://socket.io/
  30. 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. 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. 32. WebSockets | socket.io http://socket.io/Supported transports ● WebSocket ● Adobe® Flash® Socket ● AJAX long polling ● AJAX multipart streaming ● Forever Iframe ● JSONP Polling
  33. 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. 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. 35. The End. Many thanks @gonzalo123http://gonzalo123.wordpress.com
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×