際際滷

際際滷Share a Scribd company logo

Real-time Web a NodeJS

Jakub Nesetril
Jakub Nesetril
1 of 64
Downloaded 12 times
REALTIME WEB A NODE.JS realtime servery snadno a rychle Jakub Ne邸etil @jakubnesetril p叩tek, 25. bezna 2011
REALTIME WEB co je realtime? eknme, 転e to znamen叩 rychle zhruba 100ms p叩tek, 25. bezna 2011
REALTIME WEB Na rychlosti z叩le転鱈! Google: +500ms => -20% tra鍖c Amazon: +100ms => -1% sales p叩tek, 25. bezna 2011
OBSAH Latence Push vs. Pull Blokuj鱈c鱈 vs. neblokuj鱈c鱈 provoz Node.js, k坦d p叩tek, 25. bezna 2011
LATENCE p叩tek, 25. bezna 2011
TROCHA HISTORIE 1981: internet protocol IP (RFC 791) packety, IP adresy, smrov叩n鱈 1981: transmission control protocol TCP (RFC 793) datov箪 penos, spolehlivost, 鱈zen鱈 toku, multiplexing, spojov叩n鱈, bezpenost p叩tek, 25. bezna 2011
TROCHA HISTORIE 1981: internet protocol IP (RFC 791) packety, IP adresy, smrov叩n鱈 1981: transmission control protocol TCP (RFC 793) datov箪 penos, spolehlivost, 鱈zen鱈 toku, multiplexing, spojov叩n鱈, bezpenost p叩tek, 25. bezna 2011
TCP This is achieved by requiring a positive acknowledgment (ACK) from the receiving TCP. If the ACK is not received within a timeout interval, the data is retransmitted. -RFC 793 p叩tek, 25. bezna 2011
TCP Client Server p叩tek, 25. bezna 2011
TCP Client Server GET /in dex.htm l p叩tek, 25. bezna 2011
TCP Client Server GET /in dex.htm l O K HTTP/1.1 200 p叩tek, 25. bezna 2011
TCP Client Server GET /in dex.htm l K .1 200 O tml HTTP/1 e: text/h p Co ntent-Ty Hi</title> <htm l><title> p叩tek, 25. bezna 2011
TCP Client Server GET /in dex.htm l K .1 200 O tml HTTP/1 e: text/h p Co ntent-Ty Hi</title> <htm l><title> ACK ACK ACK p叩tek, 25. bezna 2011
ROK 1981 213 po鱈ta哲 http://www.faqs.org/rfcs/rfc1296.html p叩tek, 25. bezna 2011
1986 p叩tek, 25. bezna 2011
LEDEN 1986 VBUCH CHALLENGERU p叩tek, 25. bezna 2011
DUBEN 1986 VBUCH ERNOBYLU p叩tek, 25. bezna 2011
JEN 1986 VBUCH INTERNETU p叩tek, 25. bezna 2011
ROK 1986 5089 po鱈ta哲 6000 4800 3600 Po鱈tae 2400 1981 1200 1982 1983 1984 1985 0 1986 http://www.faqs.org/rfcs/rfc1296.html p叩tek, 25. bezna 2011
NAPROST ZAHLCEN ST The critical congestion problems the ARPANET is experiencing causes [...] mail messages from MILNET hosts to take up to 2-3 days to be delivered to BBNNET hosts. - Nancy Cassidy in mod.risks, September 22 1986 p叩tek, 25. bezna 2011
TCP Should the round-trip time exceed the maximum retransmission interval for any host, that host will begin to introduce more and more copies of the same datagrams into the net. The network is now in serious trouble. http://www.faqs.org/rfcs/rfc896.html p叩tek, 25. bezna 2011
TCP SLOW START uv叩d鱈 maxim叩ln鱈 poet pen叩邸en箪ch nepotvrzen箪ch (ACK) packet哲 a funkci podle kter辿 se zvy邸uje v ase ka転d辿 nov辿 TCP spojen鱈 se postupn rozj鱈転d鱈 maxim叩ln鱈 rychlosti (poet packet哲) dos叩hne zhruba po 9 ot叩k叩ch http://www.faqs.org/rfcs/rfc1122.html http://mike.bailey.net.au/2010/07/tcp-and-the-lower-bound-of-web-performance/ p叩tek, 25. bezna 2011
LATENCE JE ZCELA ZSADN 15ms vs 250ms http://mike.bailey.net.au/2010/07/latency-is-a-killer/ p叩tek, 25. bezna 2011
LATENCE JE ZCELA ZSADN 15ms vs 250ms p叩tek, 25. bezna 2011
CO S TM? minimalizujte poet TCP spojen鱈! kombinujte JS, CSS HTTP Keep-Alive pou転鱈vejte YSlow a PageSpeed! p叩tek, 25. bezna 2011
PUSH VS PULL p叩tek, 25. bezna 2011
PULL Client Server GET /in dex.htm l O K HTTP/1.1 200 p叩tek, 25. bezna 2011
PULL jak se dozvdt o aktualizaci? nov箪 email, nov箪 tweet p叩tek, 25. bezna 2011
POLLING p叩tek, 25. bezna 2011
p叩tek, 25. bezna 2011
p叩tek, 25. bezna 2011
PUSH PUB-SUB, COMET, WEBSOCKET p叩tek, 25. bezna 2011
PUSH Client Server .1 200 OK HTTP/1 p叩tek, 25. bezna 2011
PUSH browsery ani servery jej nepodporuj鱈 (a転 na HTML5 browsery s WebSocket podporou) existuj鱈 zp哲soby jak nekompatibilitu obch叩zet p叩tek, 25. bezna 2011
LONG POLLING Client Server GET /in dex.htm l O K HTTP/1.1 200 GET /in dex.htm l p叩tek, 25. bezna 2011
PUSH Our experiment shows that if we want high data coherence and high network performance, we should choose the push approach. http://swerl.tudelft.nl/twiki/pub/Main/TechnicalReports/TUD-SERG-2007-016.pdf p叩tek, 25. bezna 2011
PUSH However, push brings some scalability issues; the server application CPU usage is 7 times higher as in pull. According to our results, the server starts to saturate at 350-500 users. http://swerl.tudelft.nl/twiki/pub/Main/TechnicalReports/TUD-SERG-2007-016.pdf p叩tek, 25. bezna 2011
WTF?! p叩tek, 25. bezna 2011
BLOKUJC A NEBLOKUJC PROVOZ p叩tek, 25. bezna 2011
SLA, KTER BYSTE MLI ZNT Building Software Systems at Google Jeffrey Dean (AdWords, AdSense, crawler, Protocol Buffers, MapReduce, BigTable) http://www.stanford.edu/class/ee380/Abstracts/101110.html p叩tek, 25. bezna 2011
SLA, KTER BYSTE MLI ZNT L1 cache reference 0.5 ns Branch mispredict 5 ns L2 cache reference 7 ns Mutex lock/unlock 100 ns Main memory reference 100 ns Compress 1K bytes with Zippy 10,000 ns Send 2K bytes over 1 Gbps network 20,000 ns Read 1 MB sequentially from memory 250,000 ns Round trip within same datacenter 500,000 ns Disk seek 10,000,000 ns Read 1 MB sequentially from network 10,000,000 ns Read 1 MB sequentially from disk 30,000,000 ns Send packet CA->Netherlands->CA 150,000,000 ns p叩tek, 25. bezna 2011
SLA, KTER BYSTE MLI ZNT L1 cache reference 0.5 ns Branch mispredict 5 ns L2 cache reference 7 ns Mutex lock/unlock 100 ns Main memory reference 100 ns Compress 1K bytes with Zippy 10,000 ns Send 2K bytes over 1 Gbps network 20,000 ns Read 1 MB sequentially from memory 250,000 ns Round trip within same datacenter 500,000 ns Disk seek 10,000,000 ns Read 1 MB sequentially from network 10,000,000 ns Read 1 MB sequentially from disk 30,000,000 ns Send packet CA->Netherlands->CA 150,000,000 ns p叩tek, 25. bezna 2011
SLA, KTER BYSTE MLI ZNT L1 cache reference 0.5 ns Branch mispredict 5 ns L2 cache reference 7 ns Mutex lock/unlock 100 ns Main memory reference 100 ns Compress 1K bytes with Zippy 10,000 ns Send 2K bytes over 1 Gbps network 20,000 ns Read 1 MB sequentially from memory 250,000 ns Round trip within same datacenter 500,000 ns Disk seek 10,000,000 ns Read 1 MB sequentially from network 10,000,000 ns Read 1 MB sequentially from disk 30,000,000 ns Send packet CA->Netherlands->CA 150,000,000 ns p叩tek, 25. bezna 2011
BLOKUJC PROVOZ <?php 1 var $db = new mysqli("host", "user", "password", "database"); 2 var $result = db->mysqli_query('SELECT Name FROM City LIMIT 10'); 3 foreach ($result as $row) ?> p叩tek, 25. bezna 2011
APACHE + PHP Request Apache p叩tek, 25. bezna 2011
APACHE + PHP Request Apache Apache Apache Apache Worker Worker Worker PHP PHP PHP p叩tek, 25. bezna 2011
APACHE + PHP Request Apache Apache Apache Apache Worker Worker Worker PHP PHP PHP p叩tek, 25. bezna 2011
p叩tek, 25. bezna 2011
p叩tek, 25. bezna 2011
APACHE + PHP Request Apache Apache Apache Apache Worker Worker Worker PHP PHP PHP 5-10MB 5-10MB 5-10MB p叩tek, 25. bezna 2011
APACHE + PHP Request Apache Apache Apache Apache Worker Worker Worker PHP PHP PHP 5-10MB 5-10MB 5-10MB x 500 users = 2.5GB - 5GB p叩tek, 25. bezna 2011
BLOKUJC PROVOZ <?php 1 var $db = new mysqli("host", "user", "password", "database"); 2 var $result = $db->mysqli_query('SELECT Name FROM City LIMIT 10'); 3 foreach ($result as $row) ?> p叩tek, 25. bezna 2011
NE-BLOKUJC PROVOZ 1 client.connect(); 2 client.query('SELECT Name FROM City LIMIT 10', function(err, results) { 3 for (var i=0; i < results.length; i++) { }; 4 }); p叩tek, 25. bezna 2011
NE-BLOKUJC PROVOZ 1 client.connect(); 2 client.query('SELECT Name FROM City LIMIT 10', 3 function(err, results) { 4 for (var i=0; i < results.length; i++) { }; 5 } 6 ); p叩tek, 25. bezna 2011
1 <script src=/slideshow/realtime-web-a-nodejs/7386367/"jquery.js" type="text/javascript" charset="utf-8"></script> 2 <script> 3 $('#my-form button').click( 4 function(e) { 5 // process my button click 6 } 7 ); 8 </script> p叩tek, 25. bezna 2011
DEMO Swarmation, Scrumblr, WordSquared p叩tek, 25. bezna 2011
NODE.JS p叩tek, 25. bezna 2011
NODE.JS runtime (nen鱈 to mod_nodejs, ani node_d) postaven辿 na v8 (Google Chrome JS engine) one event-loop, single-threaded asynchronous and non-blocking p叩tek, 25. bezna 2011
DEMO node_chat p叩tek, 25. bezna 2011
SOCKET.IO funguje v邸ude (i bez podpory WebSocket) pokud nutno, pou転鱈v叩 long polling, ash aj. automatick箪 reconnect, heartbeat super-jednoduch辿 pou転it鱈 p叩tek, 25. bezna 2011
EXPRESS npm install express var app = express.createServer(); app.get('/', function(req, res){ res.send('Hello World'); }); app.listen(3000); p叩tek, 25. bezna 2011
NPM a pes 1400 dal邸鱈ch modul哲 http://search.npmjs.org/ https://github.com/joyent/node/wiki/modules p叩tek, 25. bezna 2011
ALTERNATIVY EventMachine (Ruby) Twisted (Python) Jetty (Java) Javascript se dobe hod鱈 p叩tek, 25. bezna 2011
DKY ZA POZORNOST OTZKY? p叩tek, 25. bezna 2011

More Related Content

Real-time Web a NodeJS

  • 1. REALTIME WEB A NODE.JS realtime servery snadno a rychle Jakub Ne邸etil @jakubnesetril p叩tek, 25. bezna 2011
  • 2. REALTIME WEB co je realtime? eknme, 転e to znamen叩 rychle zhruba 100ms p叩tek, 25. bezna 2011
  • 3. REALTIME WEB Na rychlosti z叩le転鱈! Google: +500ms => -20% tra鍖c Amazon: +100ms => -1% sales p叩tek, 25. bezna 2011
  • 4. OBSAH Latence Push vs. Pull Blokuj鱈c鱈 vs. neblokuj鱈c鱈 provoz Node.js, k坦d p叩tek, 25. bezna 2011
  • 6. TROCHA HISTORIE 1981: internet protocol IP (RFC 791) packety, IP adresy, smrov叩n鱈 1981: transmission control protocol TCP (RFC 793) datov箪 penos, spolehlivost, 鱈zen鱈 toku, multiplexing, spojov叩n鱈, bezpenost p叩tek, 25. bezna 2011
  • 7. TROCHA HISTORIE 1981: internet protocol IP (RFC 791) packety, IP adresy, smrov叩n鱈 1981: transmission control protocol TCP (RFC 793) datov箪 penos, spolehlivost, 鱈zen鱈 toku, multiplexing, spojov叩n鱈, bezpenost p叩tek, 25. bezna 2011
  • 8. TCP This is achieved by requiring a positive acknowledgment (ACK) from the receiving TCP. If the ACK is not received within a timeout interval, the data is retransmitted. -RFC 793 p叩tek, 25. bezna 2011
  • 9. TCP Client Server p叩tek, 25. bezna 2011
  • 10. TCP Client Server GET /in dex.htm l p叩tek, 25. bezna 2011
  • 11. TCP Client Server GET /in dex.htm l O K HTTP/1.1 200 p叩tek, 25. bezna 2011
  • 12. TCP Client Server GET /in dex.htm l K .1 200 O tml HTTP/1 e: text/h p Co ntent-Ty Hi</title> <htm l><title> p叩tek, 25. bezna 2011
  • 13. TCP Client Server GET /in dex.htm l K .1 200 O tml HTTP/1 e: text/h p Co ntent-Ty Hi</title> <htm l><title> ACK ACK ACK p叩tek, 25. bezna 2011
  • 14. ROK 1981 213 po鱈ta哲 http://www.faqs.org/rfcs/rfc1296.html p叩tek, 25. bezna 2011
  • 16. LEDEN 1986 VBUCH CHALLENGERU p叩tek, 25. bezna 2011
  • 17. DUBEN 1986 VBUCH ERNOBYLU p叩tek, 25. bezna 2011
  • 18. JEN 1986 VBUCH INTERNETU p叩tek, 25. bezna 2011
  • 19. ROK 1986 5089 po鱈ta哲 6000 4800 3600 Po鱈tae 2400 1981 1200 1982 1983 1984 1985 0 1986 http://www.faqs.org/rfcs/rfc1296.html p叩tek, 25. bezna 2011
  • 20. NAPROST ZAHLCEN ST The critical congestion problems the ARPANET is experiencing causes [...] mail messages from MILNET hosts to take up to 2-3 days to be delivered to BBNNET hosts. - Nancy Cassidy in mod.risks, September 22 1986 p叩tek, 25. bezna 2011
  • 21. TCP Should the round-trip time exceed the maximum retransmission interval for any host, that host will begin to introduce more and more copies of the same datagrams into the net. The network is now in serious trouble. http://www.faqs.org/rfcs/rfc896.html p叩tek, 25. bezna 2011
  • 22. TCP SLOW START uv叩d鱈 maxim叩ln鱈 poet pen叩邸en箪ch nepotvrzen箪ch (ACK) packet哲 a funkci podle kter辿 se zvy邸uje v ase ka転d辿 nov辿 TCP spojen鱈 se postupn rozj鱈転d鱈 maxim叩ln鱈 rychlosti (poet packet哲) dos叩hne zhruba po 9 ot叩k叩ch http://www.faqs.org/rfcs/rfc1122.html http://mike.bailey.net.au/2010/07/tcp-and-the-lower-bound-of-web-performance/ p叩tek, 25. bezna 2011
  • 23. LATENCE JE ZCELA ZSADN 15ms vs 250ms http://mike.bailey.net.au/2010/07/latency-is-a-killer/ p叩tek, 25. bezna 2011
  • 24. LATENCE JE ZCELA ZSADN 15ms vs 250ms p叩tek, 25. bezna 2011
  • 25. CO S TM? minimalizujte poet TCP spojen鱈! kombinujte JS, CSS HTTP Keep-Alive pou転鱈vejte YSlow a PageSpeed! p叩tek, 25. bezna 2011
  • 26. PUSH VS PULL p叩tek, 25. bezna 2011
  • 27. PULL Client Server GET /in dex.htm l O K HTTP/1.1 200 p叩tek, 25. bezna 2011
  • 28. PULL jak se dozvdt o aktualizaci? nov箪 email, nov箪 tweet p叩tek, 25. bezna 2011
  • 32. PUSH PUB-SUB, COMET, WEBSOCKET p叩tek, 25. bezna 2011
  • 33. PUSH Client Server .1 200 OK HTTP/1 p叩tek, 25. bezna 2011
  • 34. PUSH browsery ani servery jej nepodporuj鱈 (a転 na HTML5 browsery s WebSocket podporou) existuj鱈 zp哲soby jak nekompatibilitu obch叩zet p叩tek, 25. bezna 2011
  • 35. LONG POLLING Client Server GET /in dex.htm l O K HTTP/1.1 200 GET /in dex.htm l p叩tek, 25. bezna 2011
  • 36. PUSH Our experiment shows that if we want high data coherence and high network performance, we should choose the push approach. http://swerl.tudelft.nl/twiki/pub/Main/TechnicalReports/TUD-SERG-2007-016.pdf p叩tek, 25. bezna 2011
  • 37. PUSH However, push brings some scalability issues; the server application CPU usage is 7 times higher as in pull. According to our results, the server starts to saturate at 350-500 users. http://swerl.tudelft.nl/twiki/pub/Main/TechnicalReports/TUD-SERG-2007-016.pdf p叩tek, 25. bezna 2011
  • 39. BLOKUJC A NEBLOKUJC PROVOZ p叩tek, 25. bezna 2011
  • 40. SLA, KTER BYSTE MLI ZNT Building Software Systems at Google Jeffrey Dean (AdWords, AdSense, crawler, Protocol Buffers, MapReduce, BigTable) http://www.stanford.edu/class/ee380/Abstracts/101110.html p叩tek, 25. bezna 2011
  • 41. SLA, KTER BYSTE MLI ZNT L1 cache reference 0.5 ns Branch mispredict 5 ns L2 cache reference 7 ns Mutex lock/unlock 100 ns Main memory reference 100 ns Compress 1K bytes with Zippy 10,000 ns Send 2K bytes over 1 Gbps network 20,000 ns Read 1 MB sequentially from memory 250,000 ns Round trip within same datacenter 500,000 ns Disk seek 10,000,000 ns Read 1 MB sequentially from network 10,000,000 ns Read 1 MB sequentially from disk 30,000,000 ns Send packet CA->Netherlands->CA 150,000,000 ns p叩tek, 25. bezna 2011
  • 42. SLA, KTER BYSTE MLI ZNT L1 cache reference 0.5 ns Branch mispredict 5 ns L2 cache reference 7 ns Mutex lock/unlock 100 ns Main memory reference 100 ns Compress 1K bytes with Zippy 10,000 ns Send 2K bytes over 1 Gbps network 20,000 ns Read 1 MB sequentially from memory 250,000 ns Round trip within same datacenter 500,000 ns Disk seek 10,000,000 ns Read 1 MB sequentially from network 10,000,000 ns Read 1 MB sequentially from disk 30,000,000 ns Send packet CA->Netherlands->CA 150,000,000 ns p叩tek, 25. bezna 2011
  • 43. SLA, KTER BYSTE MLI ZNT L1 cache reference 0.5 ns Branch mispredict 5 ns L2 cache reference 7 ns Mutex lock/unlock 100 ns Main memory reference 100 ns Compress 1K bytes with Zippy 10,000 ns Send 2K bytes over 1 Gbps network 20,000 ns Read 1 MB sequentially from memory 250,000 ns Round trip within same datacenter 500,000 ns Disk seek 10,000,000 ns Read 1 MB sequentially from network 10,000,000 ns Read 1 MB sequentially from disk 30,000,000 ns Send packet CA->Netherlands->CA 150,000,000 ns p叩tek, 25. bezna 2011
  • 44. BLOKUJC PROVOZ <?php 1 var $db = new mysqli("host", "user", "password", "database"); 2 var $result = db->mysqli_query('SELECT Name FROM City LIMIT 10'); 3 foreach ($result as $row) ?> p叩tek, 25. bezna 2011
  • 45. APACHE + PHP Request Apache p叩tek, 25. bezna 2011
  • 46. APACHE + PHP Request Apache Apache Apache Apache Worker Worker Worker PHP PHP PHP p叩tek, 25. bezna 2011
  • 47. APACHE + PHP Request Apache Apache Apache Apache Worker Worker Worker PHP PHP PHP p叩tek, 25. bezna 2011
  • 50. APACHE + PHP Request Apache Apache Apache Apache Worker Worker Worker PHP PHP PHP 5-10MB 5-10MB 5-10MB p叩tek, 25. bezna 2011
  • 51. APACHE + PHP Request Apache Apache Apache Apache Worker Worker Worker PHP PHP PHP 5-10MB 5-10MB 5-10MB x 500 users = 2.5GB - 5GB p叩tek, 25. bezna 2011
  • 52. BLOKUJC PROVOZ <?php 1 var $db = new mysqli("host", "user", "password", "database"); 2 var $result = $db->mysqli_query('SELECT Name FROM City LIMIT 10'); 3 foreach ($result as $row) ?> p叩tek, 25. bezna 2011
  • 53. NE-BLOKUJC PROVOZ 1 client.connect(); 2 client.query('SELECT Name FROM City LIMIT 10', function(err, results) { 3 for (var i=0; i < results.length; i++) { }; 4 }); p叩tek, 25. bezna 2011
  • 54. NE-BLOKUJC PROVOZ 1 client.connect(); 2 client.query('SELECT Name FROM City LIMIT 10', 3 function(err, results) { 4 for (var i=0; i < results.length; i++) { }; 5 } 6 ); p叩tek, 25. bezna 2011
  • 55. 1 <script src=/slideshow/realtime-web-a-nodejs/7386367/"jquery.js" type="text/javascript" charset="utf-8"></script> 2 <script> 3 $('#my-form button').click( 4 function(e) { 5 // process my button click 6 } 7 ); 8 </script> p叩tek, 25. bezna 2011
  • 56. DEMO Swarmation, Scrumblr, WordSquared p叩tek, 25. bezna 2011
  • 58. NODE.JS runtime (nen鱈 to mod_nodejs, ani node_d) postaven辿 na v8 (Google Chrome JS engine) one event-loop, single-threaded asynchronous and non-blocking p叩tek, 25. bezna 2011
  • 59. DEMO node_chat p叩tek, 25. bezna 2011
  • 60. SOCKET.IO funguje v邸ude (i bez podpory WebSocket) pokud nutno, pou転鱈v叩 long polling, ash aj. automatick箪 reconnect, heartbeat super-jednoduch辿 pou転it鱈 p叩tek, 25. bezna 2011
  • 61. EXPRESS npm install express var app = express.createServer(); app.get('/', function(req, res){ res.send('Hello World'); }); app.listen(3000); p叩tek, 25. bezna 2011
  • 62. NPM a pes 1400 dal邸鱈ch modul哲 http://search.npmjs.org/ https://github.com/joyent/node/wiki/modules p叩tek, 25. bezna 2011
  • 63. ALTERNATIVY EventMachine (Ruby) Twisted (Python) Jetty (Java) Javascript se dobe hod鱈 p叩tek, 25. bezna 2011
  • 64. DKY ZA POZORNOST OTZKY? p叩tek, 25. bezna 2011