Sowe'regonnahave a buttonwhichisgoingtothehavethetypeofsubmit, andwe'realsogoingtogiveitherean I d ofsendbuttonandlastly, insideofhere, we'regonnaputthetextsend, andtherewego.
That's howtheHTMLweneed.
Andifwerefreshthesepagesoverhereafterweclearthegoatlifebutton, weshouldseethatwejusthave a blankhtmlpageherewithourcontaineraswellasourinputonbothofthesepagesthatwecanuse.
Now, inordertomakethis a realtimechatapp, weneedtoinstall a fewdependencies, sogetstarted.
Wewanttojustdo n p m init, andthisisgoingtosetupourfileourprojecttobeusingandPMTherewegoandthenwewanttodoiswewanttoinstallsomedependenciessowe'regoingtofirstinstallsocket, notIo.
ThisisgoingtobeourrealtimeWebsocketcommunication.
Andthenwe'regoingtoinstallnodemonsowecando N p m I andthisone.
Wewanttobe a deafdependency.
SoyoumakesureyouputsaveDev.
SpellthatquicklyandwetypeoutnotemoneyandNewmanisgoingtoallowourservertoautomaticallyrefreshitselfeverytimewemake a change.
Sowedon't havetocancelourserverandrestartoursurgerynowinsteadofourpackagedotJason, Assoonasthatfinishesup, wecanactuallycreate a scriptherethatwe'regoingtousetostartourserver.
Oh, sowe'regonnasayconstantIoisgoingtobeequaltorequiresocketdotioandinordertoactuallycreditsover, allwedoispasstheportthatwewanttoserveittorunontothissocket I willrequireas a function.
Andthisisgoingtocreate a serverforusonthatport 3000.
Thenwhatwecandoiswecanjustuseourio.
Wecansay I owedawnconnectiononwhatthisisgoingtodoiseverytime a userloadsupourwebsite, it's goingtocallthisfunction, andit's goingtogiveeachoneoftheseuserstheirownsocket.
Andwhatwecandowiththissocketissend a messagedowntotheusersowecanjustsaysocketdotAimitandwecanputwhateverwewantinsideofthis.
Thisisgoingtobetheeventname.
We'rejustgoingtocallthischatmessageandthenwepassedtheparametersordatathatwewantAndthisdatacouldbewhateveryouwantittobeonourcase, we'rejustgonnamakeit a stringHoldHello, world.
Sonoweverytimesomeoneconnectstoourserver, we'resending a messagedowntotheclientwiththiseventchatmessage, andit's goingtosayhelloworldinsideofit.
Andnowyounoticewehaveanerror.
Weneedtohavethisfunctioninsideofhere.
Sojustmovethatprinceyaroundtheircorrectvoice.
Saveitandeverythingwillbedeepgreendownhere.
Andnowlet's create a separatefilehere, whichisgoingtobescriptdotJs.
Sowheneverwereceiveanevent, wewanttocall a functioninsideofherewiththedatathatwesentdownfromtheserver.
Andwe'rejustgonnafornow, Consul, aboutlongthatinformationasdataandagain, thisisgoingtobehelloworldbecausethat's whatwehaveinsteadofourserviceJsherenextinsideofherindexat h T mo.
Weactuallytorequirethesescripts.
Sofirstwe'regoingtorequire a scriptforSocket I owe.
Andwithourlibrarysocket, I Oh, it's goingtoexposepathcalledsocketdotio, andit's goingtohave a fileintherecalledsocketdotioslashorsorrydotJsAndthisisgoingtobetheJavascriptfilethatincludesthisrighthere.
Andthenthelastthingwewanttodoisjusttakeourmessageinput, andwewanttosetthevalueofthatmessageinputequalto a blankstringjustsoitemptiesoutthemessageeverytimewesendit.