Your SlideShare is downloading. ×
Nodejs and WebSockets
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Nodejs and WebSockets

21,567
views

Published on

Talk about node.js and WebSockets

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
21,567
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
283
Comments
1
Likes
28
Embeds 0
No embeds

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