Module 6 –Node.js and Sockettodd/cse330/cse330_lecture... · 1Extensible Networking Platform-CSE 330 –Creative Programming and Rapid Prototyping 1 Module 6 –Node.js and Socket.IO

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


PreviewofCreativeProject– Due4/25/18

• Comeupwithanideautilizingskillslearnedfrompreviousmodules– Shouldbecomparabletoworkofpreviousmodules– Youmayworkaloneorinagrouponthismodule

• CreateyourCreativeProjectrepoandpushtoityourprojectdescriptionalongwithagradingrubricafteritisapprovedbyaTA

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


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


CSE503SPerformanceEvaluationExample


WhatisNode.js?

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

• Runsoverthecommandline

• Designedforhighconcurrency– Withoutthreadsornewprocesses

• Neverblocks,notevenforI/O


Concurrency:TheEventLoop

• InsteadofthreadsNodeusesaneventloopwithastack

• Alleviatesoverheadofcontextswitching


Non-blockingI/O

• ServersdonothingbutI/O– ScriptswaitingonI/Orequestsdegradesperformance

• Toavoidblocking,NodemakesuseoftheeventdrivennatureofJSbyattachingcallbackstoI/Orequests

• ScriptswaitingonI/Owastenospacebecausetheygetpoppedoffthestackwhentheirnon-I/Orelatedcodefinishesexecuting


I/OExample




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


Node.js VS Apache

Platform Number of request per second

PHP ( via Apache) 318,727

Static ( via Apache ) 296,651

Node.js 556,930


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);


Node.jsExamples


Module6IndividualDemo


Socket.IO


WebSockets

• Transportprotocolforwebcommunication– AlternativetotheXMLHttpRequestobjectusedforAJAX

• ProvidesBi-directional,fullduplexcommunicationchannel

• Designedforimplementationinwebbrowsersandservers

• Extremelylowoverheadforpayload,justtwobytes

• APIstandardizedbyW3C


TCP handshakeHTTP Headers (request)

HTTP Headers (response)

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

+ +

HTTPOverhead(foreachrequest)


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

• Note the diminishing returns as bandwidth increases

Dofasterconnectionshelp?


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

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

Docloserserverhelp?


data + 2 byte overhead

data + 2 byte overhead

BrowserServer

WebSockets

TCP handshake(just first request)

• HelpreducethenumberofRoundTripTimes(RTTs)


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


DatafromOct29th 2014


Socket.IO

• Websocketsforall– Websocketsarenotsupportedinallbrowsers

• SocketIOsupportsavarietyoftransports– HTML5WebSocket– FlashSocket– AJAXLongPolling– ForeverIframe


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);


Socket.IO Server

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

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

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


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>


SimpleSocket.IODemo


SimpleChatServerDemo

Documents

Module 6 –Node.js and Sockettodd/cse330/cse330_lecture... · 1Extensible Networking Platform-CSE 330 –Creative Programming and Rapid Prototyping 1 Module 6 –Node.js and Socket.IO