Extensible Networking Platform 11 - CSE 330 – Creative Programming and Rapid Prototyping

Module6– Node.jsandSocket.IO• Module6Contains2components

– IndividualAssignmentandGroupAssignment• BotharedueonWednesdayApril4th

• ReadtheWIKIbeforestarting

• Portionsoftoday’sslidescamefrom– CraigHecock– Iván Loire– RobertoPeon– CharlesWang

Extensible Networking Platform 22 - CSE 330 – Creative Programming and Rapid Prototyping

PreviewofCreativeProject– Due4/25/18

• Comeupwithanideautilizingskillslearnedfrompreviousmodules– Shouldbecomparabletoworkofpreviousmodules– Youmayworkaloneorinagrouponthismodule

• CreateyourCreativeProjectrepoandpushtoityourprojectdescriptionalongwithagradingrubricafteritisapprovedbyaTA

• RubricisdueWednesdayApril4thbytheendofclass– Theprojectisworth100points,5ofwhichcomefromsubmittingthisrubrictoBitbucket• Youareallowedtoassignupto20pointsforacreativeportion• CreateafilenamedgradingRubric.md insideyourBitbucket repo• IncludethenameoftheTAthatapprovedyourrubric

Extensible Networking Platform 33 - CSE 330 – Creative Programming and Rapid Prototyping

CSE503SPerformanceEvaluationReport

• 503Sstudentswillcompleteaperformanceevaluationstudyoftheirwebserver

• Theevaluationwillincludetwoexperimentsthatmeasurecriticalresourcesusedthroughoutthesemester– Forexample,IfmyappusesApacheandMySQL

• Howmanypages/seccanApacheserve?• Howmanyreads/secandwrites/seccanmydatabaseperform?

– Thewikiprovidesalistofpotentialexperiments

• AperformanceevaluationproposalisdueonApril4th (alongwithyourCreativeProjectDescription)– CreateaPerformanceEvaluationRepousingthelinkprovidedonPiazza– Listtheexperimentsyouplantoperformandwhytheseareimportanttostudy– CreateafileinsideyourPerformanceEvaluationReponamed

proposalExperiments.md explainingyourexperimentsbyApril4th

• Studentswillsubmitawrittendocumentexplainingtheexperimentsalongwiththeirresultsby11:59PMonFridayApril27th

• Refertothecoursewebsiteforadditionaldetailsaboutthereport– https://classes.engineering.wustl.edu/cse330/index.php/CSE_503S_Performance_Evaluation_Study

Extensible Networking Platform 44 - CSE 330 – Creative Programming and Rapid Prototyping

CSE503SPerformanceEvaluationExample

Extensible Networking Platform 55 - CSE 330 – Creative Programming and Rapid Prototyping

WhatisNode.js?

• AJavaScriptruntimeenvironmentrunningGoogleChrome’sV8engine– a.k.a.aserver-sidesolutionforJS– CompilesJS,makingitreallyfast

• Runsoverthecommandline

• Designedforhighconcurrency– Withoutthreadsornewprocesses

• Neverblocks,notevenforI/O

Extensible Networking Platform 66 - CSE 330 – Creative Programming and Rapid Prototyping

Concurrency:TheEventLoop

• InsteadofthreadsNodeusesaneventloopwithastack

• Alleviatesoverheadofcontextswitching

Extensible Networking Platform 77 - CSE 330 – Creative Programming and Rapid Prototyping

Non-blockingI/O

• ServersdonothingbutI/O– ScriptswaitingonI/Orequestsdegradesperformance

• Toavoidblocking,NodemakesuseoftheeventdrivennatureofJSbyattachingcallbackstoI/Orequests

• ScriptswaitingonI/Owastenospacebecausetheygetpoppedoffthestackwhentheirnon-I/Orelatedcodefinishesexecuting

Extensible Networking Platform 88 - CSE 330 – Creative Programming and Rapid Prototyping

I/OExample

Extensible Networking Platform 99 - CSE 330 – Creative Programming and Rapid Prototyping

Extensible Networking Platform 1010 - CSE 330 – Creative Programming and Rapid Prototyping

Extensible Networking Platform 1111 - CSE 330 – Creative Programming and Rapid Prototyping

Threads VS Event-driven

Threads Asynchronous Event-driven

Lock application / request with listener-workers threads

only one thread, which repeatedly fetches an event

Using incoming-request model Using queue and then processes it

multithreaded server might block the request which might involve multiple events

manually saves state and then goes on to process the next event

Using context switching no contention and no context switches

Using multithreadingenvironments where listener and workers threads are used frequently to take an incoming-request lock

Using asynchronous I/O facilities (callbacks, not poll/select or O_NONBLOCK) environments

Extensible Networking Platform 1212 - CSE 330 – Creative Programming and Rapid Prototyping

Node.js VS Apache

Platform Number of request per second

PHP ( via Apache) 318,727

Static ( via Apache ) 296,651

Node.js 556,930

Extensible Networking Platform 1313 - CSE 330 – Creative Programming and Rapid Prototyping

Node.js HelloWorld(hello.js)

var http=require('http');

http.createServer(function (req,res){res.writeHead(200,{'Content-Type':'text/plain'});res.end('Hello,world!');

}).listen(80);

Extensible Networking Platform 1414 - CSE 330 – Creative Programming and Rapid Prototyping

Node.jsExamples

Extensible Networking Platform 1515 - CSE 330 – Creative Programming and Rapid Prototyping

Module6IndividualDemo

Extensible Networking Platform 1616 - CSE 330 – Creative Programming and Rapid Prototyping

Socket.IO

Extensible Networking Platform 1717 - CSE 330 – Creative Programming and Rapid Prototyping

WebSockets

• Transportprotocolforwebcommunication– AlternativetotheXMLHttpRequestobjectusedforAJAX

• ProvidesBi-directional,fullduplexcommunicationchannel

• Designedforimplementationinwebbrowsersandservers

• Extremelylowoverheadforpayload,justtwobytes

• APIstandardizedbyW3C

Extensible Networking Platform 1818 - CSE 330 – Creative Programming and Rapid Prototyping

TCP handshakeHTTP Headers (request)

HTTP Headers (response)

“hello, my name is Chrome, encoding UTF-8... I would like a web page please.”

+ +

HTTPOverhead(foreachrequest)

Extensible Networking Platform 1919 - CSE 330 – Creative Programming and Rapid Prototyping

•Page Load Time (PLT) is our measure of latency.

• Note the diminishing returns as bandwidth increases

Dofasterconnectionshelp?

Extensible Networking Platform 2020 - CSE 330 – Creative Programming and Rapid Prototyping

•Now we vary the Round Trip Time (RTT) for a fixed bandwidth.

•Reducing RTT, always helps reduce Page Load Time (PLT).

Docloserserverhelp?

Extensible Networking Platform 2121 - CSE 330 – Creative Programming and Rapid Prototyping

data + 2 byte overhead

data + 2 byte overhead

BrowserServer

WebSockets

TCP handshake(just first request)

• HelpreducethenumberofRoundTripTimes(RTTs)

Extensible Networking Platform 2222 - CSE 330 – Creative Programming and Rapid Prototyping

http://caniuse.com/#feat=websockets

Extensible Networking Platform 2323 - CSE 330 – Creative Programming and Rapid Prototyping

DatafromOct29th 2014

Extensible Networking Platform 2424 - CSE 330 – Creative Programming and Rapid Prototyping

Socket.IO

• Websocketsforall– Websocketsarenotsupportedinallbrowsers

• SocketIOsupportsavarietyoftransports– HTML5WebSocket– FlashSocket– AJAXLongPolling– ForeverIframe

Extensible Networking Platform 2525 - CSE 330 – Creative Programming and Rapid Prototyping

GettingStartedwithSocket.IO

• Socket.IO:http://socket.io

• InstallSocket.IO withnpm:– npm installsocket.io

NodeexampleusingSocket.IO:var app=require('http').createServer(callback);var io =require('socket.io').listen(app);app.listen(8080);

Extensible Networking Platform 2626 - CSE 330 – Creative Programming and Rapid Prototyping

Socket.IO Server

io.sockets.on('connection',function(socket){

socket.emit('Hellofromserver',{hello:'world'});

socket.on('Replyfromclient',function(data){console.log(data);});});

Extensible Networking Platform 2727 - CSE 330 – Creative Programming and Rapid Prototyping

Socket.IO Client(index.html)

<scriptsrc="/socket.io/socket.io.js"></script>

<script>var socket=io.connect('http://localhost');socket.on('Hellofromserver',function(data){

console.log(data);socket.emit('Replyfromclient',{hello:'fromclient'});

});

</script>

Extensible Networking Platform 2828 - CSE 330 – Creative Programming and Rapid Prototyping

SimpleSocket.IODemo

Extensible Networking Platform 2929 - CSE 330 – Creative Programming and Rapid Prototyping

SimpleChatServerDemo