recallthat http is request/response protocol · •recallthat http is request/response protocol...
TRANSCRIPT
• Recall thatHTTPisrequest/responseprotocol• AJAX allowsyoutodoHTTPrequest/responsewithinapage,butitisstillrequest/response
• Aclientalwayshastoinitiatecommunication.– I.e.Maketherequest
• Whatifyouwanttheservertobeableto"push"informationdowntotheclient,forexample:– Newemail– Newnews– Updatestoasharedchat/drawingcanvas– Gameevents
©JoeMertz– MobiletoCloud:BuildingDistributedApplications
• Workarounds havebeendevised• E.g.Polling
– Client continuouslypollstheserver• E.g.LongPolling
– Clientsendsarequest,whichtheserverdoesnotrespondtountilithassomethingtosend
– Ifsomethingcomesalongtosend,itcompletestheresponseandtheclientwillimmediatelysendanewrequesttoholdontoforlater
– Iftherequesttimesout,theclientsendsanewresponse.– Analogy(fromthedaysofpostalmail)…
• Cheapfriendcan'taffordstamps.• Sendfriendstamp,heusesittosendyoualetter• Whenyoureceivemessage,immediatelysendhimanotherstampforthenexttimehewantstosendaletter.
©JoeMertz– MobiletoCloud:BuildingDistributedApplications
• Providesfortrue two-way ongoing communicationbetweenaclientandserver.
• Eachsidecan"send"messages.• Eachsidehaslistener"onmessage"• WebSockets arenotrestrictedbytheSameOriginPolicy– It isuptotheservertochecktheOriginheaderanddecidewhetheritshouldreplyornot.
• Note:– Someold browsersdon't implementWebSockets
©JoeMertz– MobiletoCloud:BuildingDistributedApplications
// Create a new WebSocketvar wSocket = new WebSocket("ws://www.example.com/socketserver")
// When the WebSocket is connected and readywSocket.onopen = function (event) {
// Send a message to the serverwSocket.send("Initial message to the server.");
};
// Handler for when a message arrives from the serverwSocket.onmessage = function (event) {
console.log(event.data);};
©JoeMertz– MobiletoCloud:BuildingDistributedApplications
©JoeMertz– MobiletoCloud:BuildingDistributedApplications
• RequireaWebSockets module– ws isverypopular– https://www.npmjs.com/package/ws
• CreateanewWebSockets Server• Definehandlersfor– onconnection– onmessage
• Andsendmessagestotheclient
• Library forfull-duplexcommunicationbetweenclientsandservers
• Builtonengine.io,socket.io providesanabstractionabovewhatevertransportmethodsareavailable inthebrowser:–WebSockets– LongPolling
©JoeMertz– MobiletoCloud:BuildingDistributedApplications
• Alsoprovidesasimpleabstractionfor event-basedprogrammingacrosstheserverandmultipleclients
• Clientscan– emiteventsbacktotheserver– listenforeventsfromtheserver
• Servercan– listen foreventsfromclients– emiteventsbacktotheclient– emiteventstootherclients– broadcastemiteventstoallclients
©JoeMertz– MobiletoCloud:BuildingDistributedApplications
• Ateachtable,createagame• Aneventissimplyaword
– Itcanoptionallybeaccompaniedwithashortphrase• OnepersonistheServerwhocan:
– listen foreventsfromclients– emitaneventtooneclient(pointtooneandsay…)– broadcast emiteventstoall clients(pointwithbothhandsandsay…)
• TherestatthetableareClientswhocan– emiteventstotheserver– listenforeventsfromtheserver
• ClientsortheServercangenerateeventsatanytime(dependingonyourgame-play)
• Clientscannotemiteventspeer-to-peer(Servermustrelay)©JoeMertz– MobiletoCloud:BuildingDistributedApplications
• on(event,function(parameter-object){…}• emit(event,parameter-object)• events– connection– disconnect– developer-definedevents
©JoeMertz– MobiletoCloud:BuildingDistributedApplications
• socket.emit(…)– emitsbacktotheclient
• socket.broadcast.emit(…)– emitstoallconnectedclientsexceptthe socketthatstartsit
©JoeMertz– MobiletoCloud:BuildingDistributedApplications
• Demo• Codewalkthrough
©JoeMertz– MobiletoCloud:BuildingDistributedApplications
1. AddawelcomemessagetocountPlayers–Whenanewplayerconnects– Serveremitsa"welcome"eventtoit
• Dataoftheeventis{message:"Welcomeplayern"}– Where"n"istheordinalnumberoftheplayerwhohasjoined
2. Createasimpleappinwhichuserscollaborate/compete/communicate.– Actionsbyeachuserisbroadcasttoallusers– Periodically(e.g.everyonesecond)serverbroadcasts
somethingtoallusers
©JoeMertz– MobiletoCloud:BuildingDistributedApplications