real time multiplayer in html5 - build new games
DESCRIPTION
Tutorial for make multiplayer games with JavaScript and HTML5TRANSCRIPT
-
Design
Engines
Graphics
JavaScript
Mobile
Multiplayer
Platform
ClassesatBocoupVisualizingDatawithD3.js
April30May1,Cambridge,MA
AdsbyBocoup
BuildNewGamesOpenWebtechniquesforcuttingedgegamedevelopment
RealTimeMultiplayerinHTML5
Jul18th,2012|by
Multiplayerandbrowsers
Whenyouconsidermakingmultiplayergames,therearemanymethodsavailableforcreatingagamethatfriendscanplayonline.Thereisagoodvarietyofmultiplayergametypestakeforexampleacardgameyouplaysynchronouslywithfriends.Turnsaremade,informationisexchangedin(semi)realtimeandthegameprogressesindiscretesteps.Anotherexample,Chess,canbeasynchronous.Playerstaketheirtime,contemplatingpossibleactionsandplaytheirnextmoveoneweekfromnow.Thesetypesofmultiplayergamesexistinbrowsers,andhaveforalongtime.Thenatureofthebrowseritselfmakesiteasytomakesemirealtimegames,butwewantmorevisceralrealtimeaction.
CardgamesandChessbothusuallyrequire
Articles Authors About
Topics
SvenBergstrm
-
communicationwithaserverandcommunicationwiththeotherplayersinordertoworkonline.ThisisthefoundationofamultiplayerexperiencetobepossibleandforalongtimethishasexistedviaHTTP,wherePOSTandGEThavealwaysbeenusedtomanagegames.
Thetroublewiththesemethodsisthedelay,postingamessageandwaitingforaresponseeachtimeisjusttooslow.Itworksforthesemirealtimeandasynchronousgames,butrealtimegamesrequiremessagessentandreceivedsometimesintheregionof33~66timespersecond,somethingthatisnotquitepossiblewithHTTPalone.
Luckily,inmodernbrowserswecantakeonestephigher,andhavearealtimeconnectionbetweenaserverandclients.Thepurposeofthisdiscussionistopresentoneoverviewofhowmultiplayergamesaremade.Wewilllookatinputprediction,lagcompensation,clientinterpolationandmoreimportantlyhowtodothisinyournormalbrowserusingwebsockets.Thearticlewillpresentaplayabledemowithparameterstoplaywith,showcasingtheconceptsdiscussed.
Thetechnologiesthatwehavechosenandwhy
Socket.io
isapowerfulandflexibleserversideandclientsidecomponentthatenablesrealtimenetworkinginyourbrowser.Notonlydoesitsupportnewertechnologieslikewebsockets,butitalsofallsbacksafelyontoaFlashnetworkinglayer,XHRorJSONlongpollingandevenanHTMLfiletransportlayer.Mostappealingaboutitperhapsisthesimplicityandinherentlyasynchronousnatureitbrings,whichisextremelyusefulwhenwritingserverandclientcode.
Anotherbenefitofusingsocket.ioisthefactthatitties
socket.io
-
intoNode.jsseamlessly.WhencoupledwithExpress,onconnection,itcanservetheclientsideincludes,gamefiles,anddata,makingtheintegrationcleanandeasy.Onceyousetitup,theamountofcodebetweenfirstconnectionandcommunicationwithaclientisnothingshortofamazing.Anditwouldworkinallbrowsers,mobileincluded.
Node.js
isaneasytouse,flexibleandcrossplatformtool.ItislikeaswissarmyknifeofeventedIO.Ithasamassivefollowingofdedicatedusers,developersandmoduleauthors.Itissupportedonagoodnumberofserverhostingplatformsforwebapplications,andiseasytoinstallonadedicatedserverofyourown,sofindingahostshouldnotbeaproblem.
AmongmanyofthesegreatmodulesavailableforNode.js,isawebframeworkcalled .Itcoversservingfiles,complexrouting,clientauthenticationandsessions,andmuchmore.Itfitsperfectlyintothestackbetweensocket.ioandourclients,wheresocket.iocanserveitsfilestotheclientsthroughExpressandExpresscanhandlethegamecontentforus.
Canvas/HTML5
Thisarticleusesa2Dcanvastodemonstratethemethodswearegoingtocover,whichallowsustodrawsometextandboxesreallyeasily.
Gettingstartedwitharealtimemultiplayerconnectioninyourbrowser
Coveringallpossibleoptionsandinstallationsandconfigurationsfortheabovetechnologyisalittleoutofscopeforthisarticle,buteachoftheabovetoolshavetheirowndocumentationandshouldnottakelongtohavesetupandworkingtogether.Forthesakeof
node.js
Express
-
brevitywewilldiverightintomakingasimplegameexampleinstead.Theinformationbelowistheminimumrequiredtosetupanemptycanvas,connecttothesocket.ioserverandreceivemessages.
Startwithasimplewebserver,enterExpress
ThecodeforasimpleExpressserverisreallyshortandstraightforward.Itservesfilesonaportspecified(4004inthiscase)anditonlyservesfilesfromtherootfolder(likeindex.html),andfromaspecificgamepathwespecify(likegame/).
Socket.io,addingtherealtimecomponent
Nowweaddthecodeforthesocket.iopartofthenode.jsserver.ItgoesinthesamefileastheExpresscode,justbelowitasshowninthegist.TheserverwillattachitselftoExpresssothatitmayservetheclientfileswhenrequested.Wedonothandleanysessionsinthisexamplespecifically,butyoucanlearnaboutusingthosefromthissite:
.
Index.html,connectingaclienttotheserver
Theclientsideneedsverylittlecodetobeabletoconnecttotheserver.Aswegofurther,itbecomesmoreintwined,butthisisallthatisrequiredtoconnecttotheserverandsendorreceivedata.
Gettingintothegameplay
Whatweneednowisasimpleinteractiveexampleforthistotieinto,togetourfeetwet.Wearegoingtohavetwoblocksrunningaroundinthesamespace.Thereisalotofcodeandlogicthatgoesintocreatingsomethingthatrunssmoothlyovertheinternet,andanygamerelatedcodegettinginthewayisnotas
http://www.danielbaulig.de/socketioexpress/
-
usefultothisarticle.Instead,wefocusonthemultiplayeranduseasimpleexampletodemonstrate.
Somenotesondevelopingrealtimegames
Notalldevelopersmakegames.Therearesomethingsthatarenewtodevelopersthatareenteringtheworldofgamesthatshouldbecoveredbriefly.
Framerateindependence
Whenablocktravelsacrossthescreen,itcanbeasimplelineofcode.block.position.x+=1;This1here,whatunitisthatmeasuredin?Actually,thisisonepixelbutitismoving1pixelperframe.Eachtimetheloopruns,wemoveonepixel.Thatisat30framespersecond,itmoves30pixels.At60framespersecond,itmoves60pixels.Thisisreallybadforgames,becausehardwareandperformancecanvaryfromonedeviceorcomputertoanother.Evenbetweendifferentbrowsers,thisproblemcanbeahugedifference.Oneplayerreachesthewall,theotherbarelymovesatall.
Inordertoensurethattheblockmovesthesamedistanceoverthesameamountoftime,theconceptofdeltatimeisused.Thisvalueisthemillisecondsperframe(mspf),whichismeasuredwhileupdatingyourgame.Itishowlongoneupdatetakes.Bytakingthetimeatthestartofyourloop,andthetimeattheendoftheloop,youcanworkouthowlongtheupdatehastaken.
At30framespersecond(1/30)thedeltaisabout0.033s.Oneframe,every33.3ms.At60framespersecond(1/60)thedeltaisabout0.016or16.66msperframe.Soletssaythattheballismovingat1pixelperframe.Tosolvetheproblemofframeratedependence,wemultiplyanychangeinpositionbythemspfvalue,balancingoutthetime,makingthedistancealwaysthesame.
-
Ourexamplecalculationbecomesball.position.x+=(1*deltatime);.Withbiggerdelta(slowerframerate)theballmovesmorepixelsreachingthedestinationatthesametimeasatasmallerdelta(higherframerate).Thisgivesusconcreteunitsthatwillactthesameatanyrenderspeed.Thisiscriticalforanimations,movementsandprettymuchanyvaluethatchangesovertime:theyallshouldbescaledtothemspf.
Planningforchange
Gamesareoftenadynamicthing:theyrequiretweakingandchangingofmanyvaluestofeelgood.Iterationisabigpartofgettingthisright.Thisiscommonsenseformostprogrammers,butalwaystryanddesignyourcodesothatyouhaveasmanyvaluesandvariablesaspossibletotweak.Thenexposetheminareallyeasytouseplace,soyoucanconstantlyrefinehowthegamefeelsandhowitworkswithoutmuchdiggingandeffort.Tryandbringyouriterationtimedownasmuchaspossible.
Inthedemoaccompanyingthisarticle,wehaveexposedourvaluesvia sothatyoucanchangeandinteractwiththedemoinrealtime,andfeeltheeffectofthechangesasyoumakethem.
Multiplayergamesinrealtime
Gamesareadifficultthingtomake.Gettingthegame
Dat.GUI
-
playtofeelgood,physicstobesmooth,collisionstobecorrectandcontrolstofeeltightallthesethingstakehardworkalready.Addingamultiplayercomponentmakesthisfarmorecomplex,asthereisnowaserverinvolved.Playersneedtobeinformedofotherplayersactionsbutthereisanetworkdelay.
Networkingonahighlevel,asimplelobby
Thewaywewillapproachnetworkingourgameexampleisfairlystraightforward.Ourgameinthisdemocanonlyhavetwoplayersinit,forsimplicity.Inourdemo,aclientconnectstotheserver,thentheservereithergivesthemanexistinggametojoin,orcreatesagameforsomeoneelsetojoin.Thenthegameisaddedtothelistofgamesontheservertoupdate,andtheclientsupdatetheirgameontheirend.Thisisillustratedbelowitworkslikeaverysimplelobbysystem.
Networkingandthegameloops
Whenitcomestoarealtimegame,wewanttorunthe
-
gamelogicitselfontheserverANDtheclient.Thisisduetothefactthattheserverneedstobetheauthorityonthestateofthegameatalltimes,buttheclientneedstorunthegamelocallytoo.Eachframeontheserver,inputfromthenetworkwillbeprocessedandappliedtoplayers,andthatchangeissenttotheotherplayersatafixedrate.Ontheclient,inputwillbecollectedandsenttotheserver,andpositionscanbeupdatedwhilewaitingforthemessagestocomebackfromtheserver(clientprediction).
Theapproachwewillbeimplementingworksasfollows:
Clientpressestherightkey,clientmovesimmediatelyrightServerreceivestheinputmessageandstoresitforthenextupdateThenextserverupdate,theplayerinputisapplied,movinghimrightontheserverstateAllchangesinstatearesenttoallclientsClientreceivesthemessageimmediatelysettingclientspositions(authoritative)Clientcansmoothlycorrectmistakesinpredictionfromthefirststep
Thegameserversetup
Ontheserver,wehavetwoupdatesrunning.Theoneupdateisrunatahighfrequency,whichupdatesthephysicsandstateofthegame.Wewillcallthisthephysicsupdateloop,whichisrunevery15ms(about66updatespersecond).Thesecondupdatewecancalltheserverupdateloop,whichisrunataslowerrate,every45ms(about22updatespersecond).Intheserverupdateloopwesendthestateoftheservertoallclients.Mostofwhatwewillimplementisbasedonthetheorypresentedinthe
.
Theserverupdateloopslookslikethis::
networkingoftheSourceEnginefromValveSoftware
-
Theserverphysicsloop(15ms)
Dontletthetermphysicsscareyou,inourexampleitisextremelysimplelinearmotion.Wetaketheinputfromtheclients,andwemovethemaccordingtowhattheypushed.Iftheypressleft,youmovethemleft.Whenweaddclientsideprediction,weneedtoalsotelltheclientswhichoftheirinputswehadprocessedlast.Sohowdoesourserverupdatethephysics?
ProcessinputthatwestoredfromthenetworkWorkoutthedirectiontheyintendedtomovebasedoninputstoredApplythechangesofthisdirectiontotheplayerpositionStorethelastprocessedinputnumberClearanyinputsthatwehavestored
Theserverupdateloop(45ms)
Theupdateloopsendsthestateoftheservertoallclients.Thisvariespergameofcourse,andinourexamplethestateconsistsofplayerpositions,theinputsoftheplayerwehavealreadyprocessed(thelastprocessedinputnumber),andthelocalservertime.
Whatyousendinthestateupdateisuptoyou,andoftenmorethanoneserverupdateloopcanbeemployedtolowertheamountoftrafficused.Asimpleexamplewouldbeaday/nightcycle.Ifthecyclewas
-
changingatamuchlowerratethaneverythingelse,youcansendthestateofthesunevery5secondsinsteadofevery45ms.
Theclientsetupandupdateloops
Ontheclientwealsorunmultipleloops,oneforthephysics/gameat15msagain,liketheserver.Thesecondistheregularupdateloop,butinsteadthisonerunsat60fps(preferably),orasfastastheclientcanrunthegame.InHTML5weusuallyrelyonRequestAnimationFrametohandlethisupdate,callingwheneverthebrowserupdatesthewindow.Thisupdateloopisdetailedbelow,andisquitestandard:
ClearcanvasDrawinfo/statusHandleinput(sendsinputmessagestoserver)Updateposition(usingclientprediction)Movetheotherclientsbasedontheserverposition(interpolation)Drawplayersoncanvas
Theclientphysicsloop
Theimportantthingabouttheclientphysicsloophastodowithkeepingtheclientpositionsinsyncwithwhattheserverhasdecidedourpositiontobe.Thismeansthephysicshastomatchtheserverwhenitdecideshowfartomoveus,andthisiswhythephysicsisupdatedatafixedrate.Boththeserverandclientphysicsshouldarriveatthesameconclusion,giventhesameinputs.Ifyouhavepressedrighttwice,theresultsshouldbealmostidenticaltowhattheserverwillcalculateyourpositiontobe.Thisiswhatmakesclientpredictionpossiblewhenattemptingtomaskthedelayinanetworkandtheclients.
ImportantNetworkingConcepts
Clientprediction
-
Wehavementionedthisbeforenow,soletstakealookatwhatexactlyitentails.Inanaiveapproachtonetworking,youmighttrythefollowingmodel:
Clientpressestherightkey,telltheserverMessagearrivesatserversometimeinthefuture(200mslatency)ServersendsbackthenewpositiontotheclientMessagearrivesattheclient(200mslatency)Clientupdatestheirposition400ms+later.
ThisapproachmightworkwelloverLANconnectionswherethelatencyisreallylow,butwhenconnectingplayerstoaserverviatheInternet,latencycanbeanywherefrom30msto800msrenderingthegameunplayablebecauseofthedelay.Whenyoupushakeytheresponseissobadlydelayedthatitwillnotbeaverygoodgametoplayatall.Buthowdowesolvethis?
Clientpredictionisthesolution,andsimplymeansactingoninputimmediately,predictingwhattheserverwillcalculateaswell.Weapplyinputwiththeassumptionthatyourresultsandtheserverresults(whenevertheyarrive)willbethesame.Whenaclientpressestherightkeytwice,andendsupatx=2,theserverwillarriveatthesameconclusionandtellyou600mslateryouarestillinthecorrectplace.
Thisisimportantforimmediatefeedbackontheclientside,andeventhoughupdatesarerunningviaaserver,theclientpositionsshouldmatchup.
Interpolationofotherclientpositions
Nowallweneedtoupdateistheotherclientpositions,astheyarrivefromthenetwork.Again,anaiveapproachwouldbetosimplysettheirpositionsassoonasthemessagearrivesfromtheserverbutthisleadstoextremelyjerkyrenderingoftheotherclients.
Thesolutionistostorethepositionswegetfromtheserverandinterpolatebetweenthem.Thismeansthat
-
wedrawthemafewframesbehindtheserver,butitallowsforverysmoothupdatesofallotherclientpositions.Inourdemo,basedontheSourceEnginearticlelistedabove,wedrawtheotherclients100msbehindtheactualserverpositions.
Allofthisisimplementedinthedemoandelaboratedonbelowincodeform,butformoreinformationandverygooddiagramsonthetopic,GabrielGambettadidanexcellent ontheconceptspresentedincludingclientprediction,interpolationandthereasonswhytheseworkbestforrealtimegames.Mostimportantforourexampleisthatwestoretheinputsequenceofeachinputtheplayergivesus.Weusethistotrackwheretheserverisinourlistofinputs,andwereprocessinputthattheserverhasnotyetreceived.
Understandingthedemocode
Thedemocodepresentedattheendofthearticlefeaturesaworkingsetofthetopicsdiscussed,includingsomedebugcontrolstotweakandseechangesanddifferencesinapproaches.Thedemolookssomethinglikethis:
Nowthatwehaveseenthetheoryoftheexample,wecanstarttoseehowthecodecomestogether.
Howthecodeisstructured
Thecodeinthedemocontainsfourfiles,eachwithdifferentportionsoftheexample.Thefilescontainthefollowinglogic:
three part series
-
client.jsThelogicforthegameclientsetupinthebrowser.app.jsTheserversideapptorunonnode.Thishandlesallthenode/express/socket.iosetupandcode.game.server.jsThelogicforthegameserver(lobby).game.core.jsThelogicforthegameplayitself,bothserverandclient.
Coregameplaycode
Thecodeinsideofgame.core.jsistheimportantpartofourexample.Thecodeissharedbetweenbothserver(runningonnode.js)andtheclient(runninginthebrowser).Thisallowsthecodetousetheexactsamefunctionsandalgorithmstoprocessinput,synchronisemovement,andsharedatastructures.
Classesofthecoregameplay
Thegame.core.jsfilehoststhreeclasses,describedindetailbelow.
Thegame_coreclass
Thisclassisthedrivingfactorforthewholegamestate.Itrunstheupdatefunctions,ithandlestheoutputsandinputsofthegameandmanagesthegameasitchanges.Thegamecorecanbedescribedasthegameworld.Itcontainstwoplayers,aboundary,anditrunstheworldlogic.Itmakessurethephysicssimulationsarestartedup,itmakessuretheyrunontimeandithandlesthelogicoftheplayersinputs.
Thegameworldiswheremultiplayerhappens.Wewantthegameworldtoexistinthreeplaces(forthisdemo).Wewanttorunacopyofthegameworldoneachclient,andoneontheserver,pergame.Thisiswhatthelobbydoesingame.server.jsitcreatesaworldforeachsetofplayersthatjoin.
Allthecodeisnamedaccordingtothepurposeserved.Ifthefunctionnamestartswithclient_,thiscodewill
-
neverbecalledontheserverside.Ifthefunctionbeginswiththetermserver_,similarlythiscodewillnotrunontheclientbuttheserveronly.Allotherfunctionsonthegame_coreclassisdirectlyrelatedtothegamestatethatgetssharedbetweenserverandclient.
Thegame_playerclass
Theplayercodeisprobablyalotlighterthanyoumighthaveexpected,buttheplayerclasssimplymaintainsitsownspatialpropertiesandknowshowtodrawitself(ifrequired,likeonthebrowserclient).Ontheserver,ofcourse,thedrawfunctionisjustnevercalled.
Anexamplefunctionthatissharedbetweentheclientandserver
Importantfunctionsinthemultiplayercode
Someofthefunctionsaremoreimportanttomultiplayerthanothers.Letslookattheimportantconceptsoutlinedincode,toseehowtheflowworks.Thecodeexamplesaresometimessimplifiedtodemonstratethekeyconcept.
Entityinterpolation(otherclients)
Theinterpolation/smoothingoftheotherclients.Thisishandledinthisfashion:
Storethenetworkmessagesfromtheserveraboutotherclients,foratleast100msInterpolatebetweenalastknownposition,andanewerpositionintime(100msbehindtheservertime)Drawtheinterpolatedclientsattheinterpolatedposition.
Thewayweachievethisisasfollows:
-
Clientprediction(localclient)
Thepredictiontakesplaceintwoplaces,whenreceivingserverauthoritativeresponses,andbeforedrawingweprocessourinputasithappenslocally.Thelogicforthisis:
HandleinputfromclientStoreinputandthetimeofinputforsmoothinglaterStoretheinputsequenceSendtheinputsandinputsequencetotheserverOnconfirmationfromtheserveroflastknowninputsequence,RemoveinputsthattheserverhasalreadyprocessedReapplyinputsthatstillremaintobeconfirmed
Hereisthecodesimplifiedtoshowtheinputhandling:
Conclusionanddemo(codeandlinks)
Multiplayerisacomplexthing,andhopefullythissimpleexamplehasgivenyouaninsightintoaworldofhavingfriendsplaytogetherinrealtime.
Viewthedemo
Getthecode
Knowyourenemy(furtherdiscussion)
Keepinmindwhileyouventureintotheworldofrealtimemultiplayeritisbothachallengingandrewardingexperience.Dosomemoreresearchoutsideofthisarticleandfindoutjusthowyourrealtime
http://underscorediscovery.aws.af.cm/?debug
https://github.com/FuzzYspo0N/realtimemultiplayerinhtml5
-
gameneedstobestructured.Therearemanygreatresources: hasextensiveexperienceandgenerouslysharesawealthofknowledgeonthetopic.Besuretoreadallofthearticlesonmultiplayerandprogramminggamesthatruninrealtime.Hecoversthebasicsof
,andalsojustasimportantishisarticleanddemoon
.
AnothersetofgoodarticlesarefromForrestSmith,whoworkedontheSupremeCommanderengineatGasPoweredGames.ThisarticleisaimedatRealtimeStrategyGames(RTS):Thefirstpart,
andthesecond,.
Jul18th,2012in.
Tweet 560 241
Warning:
Comments
Comments Community Login1
SortbyBest
Jointhediscussion
Reply
McFunkypants 3yearsagoThisisphenomenallyuseful,wellwritten,andprofessional.Thankssomuchfortheamazingexample.I'vedonetonsoflaggyrealtimempusingajaxandphp,whichasyoumightimagineisahugehassleanddoesn'tscaletomorethanahandfulofconcurrentplayers.Keepupthegreatwork!
18
skroob 2yearsagoIfyouwanttogetthistoworkwithnewversionofnode:
Recommend 17
Share
GlennFiedler
WhatEveryGameProgrammerNeedsToKnowAboutNetworking
NetworkedPhysics
SynchronousRTSEnginesandaTaleofDesyncsSynchronousRTSEngines2:SyncHarder
PostedbySvenBergstrmMultiplayer
116peoplelikethis.Like Share
-
Reply
ofnode:app.jschange
line36res.sendfile('index.html',{root:__dirname})
line52res.sendfile(file,{root:__dirname})
4
Reply
SvenBergstrm 2yearsago
>skroob
Thanks,thishasbeenupdatedintherepotoday!
1
Reply
PeterValdez 3yearsagoVeryinterestingreadconsideringthatImyselfusedsocket.io,node.js,andcanvastomakeapetproject(someindividual.com/grid).Notnearlyaspolishedbyanymeans,buthavingsomemultiplayernoFlashappupandrunningwassogratifying.
Again,greatpost!4
Reply
SvenBergstrm 3yearsago
>PeterValdez
Itisreallyrewardingindeed:)1
Skroob 2yearsagoGettingarathernastyerror:
TypeError:Argumentstopath.joinmustbestrings
atf(path.js:204:15)
atObject.filter(native)
atexports.join(path.js:209:40)
atexports.send(c:\www\game\node_modules\express\node_modules\connect\lib\m
iddleware\static.js:129:20)
atServerResponse.res.sendfile(c:\www\game\node_modules\express\lib\respons
e.js:186:3)
atapp.get.file(c:\www\game\app.js:36:13)
Share
Share
Share
Share
-
Reply
atapp.get.file(c:\www\game\app.js:36:13)
atcallbacks(c:\www\game\node_modules\express\lib\router\index.js:272:11)
atparam(c:\www\game\node_modules\express\lib\router\index.js:246:11)
atpass(c:\www\game\node_modules\express\lib\router\index.js:253:5)
atRouter._dispatch(c:\www\game\node_modules\express\lib\router\index.js:28
0:5)2
Reply
SvenBergstrm 2yearsago
>Skroob
Thiswasfixedintherepoaswell,itwasjustachangetothewaythepathwashandedin.
Reply
PrashantOnkar ayearago
>SvenBergstrm
HiSven,Iamgettingthesameerror.Canyoutellmewhatsthefixplease?Iamnewtothissite.
Reply
SvenBergstrm
ayearago
>PrashantOnkar
Youmightbelookingforthischangespecifically?https://github.com/underscored...
Ifyouhavethecodefromtherepo,itwouldautomaticallybeinthelatestcode,unlesssomethinghaschangedsincebutnobodyhasreportedanyissuessofar.
Reply
eldad87 2yearsago>SkroobI'mgettingthesamething.
SvenBergstrm 2yearsago
>eldad87
seecommentabove:)
Share
Share
Share
Share
Share
-
Reply seecommentabove:)
Reply
MiguelRipoll 2yearsagoThisarticlehelpedmealot,thanks!
1
Reply
Genkikami 2yearsagoOkaysoIamtryingtojustuseyourtutorialforsettingupthebasicwebserver.SoIcopiedtheexpressandsocket.iocodenearthetopintothesamefile(app.js)andtheonlythingIchangedistheline:
res.sendfile(__dirname+'/index.html')
ThenwhenIcompiledtheprogramonmycommandlinewith"nodeapp.js".ItcompilesbutassoonItrytoconnecttotheserverthroughmy"localhost:4004"Igottheerror"Error:ENOENT,stat'....\node_modules\socket.io\socket.io.js".Ichangedthepathintheindex.htmlfilethatIsendfromtheservertobe:
Butthisresultsinthiserrorinmywebbrowserconsole:
SobasicallyistheresomethingbigthatIammissing?Suggestionswelcome:).UncaughtReferenceError:requireisnotdefinedsocket.io.js:12UncaughtReferenceError:ioisnotdefinedlocalhost/:26
1
Genkikami 2yearsago>GenkikamiOkaysoigotitworkingineededtochangethestartercodefortheserverinorderforittowork:varhttp=require('http'),server=http.createServer(app)
Bothoftheseneededtobeaddedandthenchangetheline:
app.listen(gameport)
Share
Share
Share
-
Reply
to
server.listen(gameport)
andchangetheline:
varsio=io.listen(app)
to
varsio=io.listen(server)
Theneverythingcompiledfineandranwithnoerrorsinthebrowser.
1
Reply
SvenBergstrm 2yearsago
>Genkikami
Thanksbtw,forcommenting.Thiswasupdatedintherepotoday,buthadbeeninthepullrequestsforawhileIhadjustbeenoccupiedelsewhere.
Reply
AsadMemon 2yearsagoIamworkingonaddingsupporttomorethantwoplayerstothisproject.Feelfreetocheckit.https://github.com/asadlionpk/...
1
Reply
Colton 10monthsago>AsadMemonI'mgettinganerrorfromyourproject:TypeError:Argumentstopath.joinmustbestringsatf(path.js..)
...AndIamnotseeingafix.Anyideas?
Reply
Divyanshu 2yearsagoCanSomeonepleasetellme,whereandhowtolearnnode.jsorserver.io,asisearchedalotthereisnotevenasinglegoodtutorialtostartwiththebeginning,shouldihavetobuyabook?Ifsopleasesuggestagoodbook!Reallyneedtocheckthesefeatures,thanksinadvance!!:)
1
Share
Share
Share
Share
Share
-
Reply
Abhi 2yearsagothisisbrilliant,thankyou
1
Reply
DushanNedelkovich 2yearsagodemolinkisnotworking:(
1
Reply
incompl 2yearsago
>DushanNedelkovich
Ifixedthelink,thanksforpointingthisout!
Reply
Frowz 2yearsago>incomplVeryinteresting,ilearningnode.jsorserver.io,keepupthegreatwork!
Reply
SvenBergstrm 2yearsago
>DushanNedelkovich
http://underscorediscovery.aws...
Reply
Sandy 3yearsagolearnalot,Thanks
1
Reply
GlennFiedler 3yearsagoAverywellwrittenarticle.Goodjob!
1
FlorianBsch 3yearsagoNoteacoupleofthings:1)You*have*toconfiguresocket.iotousewebsocketsonly,orit'lltrytofallbacktoXHRsorJSONP,whichare(asyoudescribed)woefullyinadequateforanythingapproachingrealtimecommunication.2)WebSocketsarebasedonTPC/IP,whichwhilegoodandreliable,isnotaveryfastprotocolanditusuallyincursuptomultiplesecondsoflatencywhengoinglongerdistances(syn,ack,ack,syn,etc.).3)UDPwouldbemoresuitableforgames,howeverbrowsersdonotsupportthatyet.4)However,WebRTCisaddinganunreliabledgramchanneltoit'sprotocol,whichis,effectively,UDP.Thisisexpectedtolandinlate2012
Share
Share
Share
Share
Share
Share
Share
-
Reply 2012
1
Reply
SvenBergstrm 3yearsago
>FlorianBsch
Yep!Iamconfidentthatsocket.iowillmakeadditionalsupportforthattoo!
Websocketsaredefinitelythebestoption,thoughforlessinstantaneousgamesyoucouldeasilyfallbacksafely.
1
Reply
Angelblade 3yearsagoAmazing,wonderful,thankyousomuch
1
Reply
realUser404 3monthsagoToobadmanypartsofthecodearedeprecatednow
Reply
Lucidbrot 3monthsagores.sendfileisdeprecatedyoushouldnowuseres.sendFileinstead
Reply
thegreat1200 3monthsagoHowwouldIaddusernamesandchat(withcommands)?Also,canIhavemorethan2playersconnectedtothesameroom/server?Icanonlyget2toconnect.
Reply
HaseebAhmad 8monthsagoI'mplanningtomakeBrowserbasedmultiplayergameasafinalprojectinBSComputerScience.Thisarticlewasveryhelpful.Formyproject,I'mthinkingjavascriptforclientsideandjavaasserverside.Ifyoucouldsuggestsomearticleoranythingformyproject,thatwouldbeverynice.
Reply
MnhM ayearagoThisarticleissouseful,thankyouverymuch
RickS ayearagonode.jsisverypoorlydocumentedfornewusers.
Share
Share
Share
Share
Share
Share
Share
Share
-
Reply
node.jsisverypoorlydocumentedfornewusers.Onlinetutorialsareevenworsewhenexplaininghowtouseit'sI/OandSockets
Edit:donotevenbotherwiththisThereareno(good)webhoststhathassocket.io,node.jsorexpress.jssupport.IfyouhavetheenergyandtimetofightAmazonhostingbemyguest.I'llsticktoJava.
Reply
swifton 4monthsago>RickSWhataboutheroku?Isn'tthatagoodwebhost?
Reply
Mane ayearago>RickSYes,Iagree,node.jsdocumentationisdirectlyjustapidocwhatitincludes,sogooglingaroundhowtouseitisfasterthanactuallyreadingit.Andasforthewebhosts..Whatyouaretalkingabout?Whataboutheroku?nodejitsu(firstwithpropersocket.iosupport?)andspeakingofhostsandthelaginthisdemoIassumethatitisrunningonsomefreeinstancewhichhashighlatency.BUT,Ifyouareabouttomakeagame,settingupproperserverwithgoodCPUandlowlatencymightbeneededanyway..Ihaven'tdoneanycalculationsbutIfearthatthose"dynolike"herokuetc.solutionsmightnotbeaproperwaytogo..soyoueventuallyhavetofighttosetupgoodserver)
Reply
RickS ayearago>ManeOneword:GitHub...Ican'tNOPEloudenoughwheneverasitedeclaresGetHubmandatory.Ilivein2014,not1995.
1
Reply
Mane ayearago
>RickS
WhattheheckisGetHub?1
Share
Share
Share
Share
Share
relatedarticles
-
morestuff
EditedandoperatedbyBocoup.
EditedandoperatedbyBocoup
TeamSnake:APostMortem byDariusKazemiOptimizingWebSocketsBandwidth byEricLiWebSockets:AGuide byJackLawson
Creatinga3DgamewithThree.jsandWebGL byNikhilSureshSimulatingNaturalSystemsinaWebBrowser byVinceAllenMakingGamesFun byBurakKanberVectorFieldObstacleAvoidance byAlexanderSutherlandAnintroductiontotheCraftygameengine byDarrenTorpey
Home