Node.js & Pusher Real Time Polling App - Node.js & Pusher Real Time Polling App [2] – Front End JS & Chart

Programming, Science & Technology

Node.js & Pusher Real Time Polling App [2] – Front End JS & Chart

alright guys so in the last video we set up our backend with node Express pusher cores some other stuff and we built the the form on the front end with

materialise we have our all of our scripts connected now we want to add the front-end JavaScript so what we need to do is when we push this vote button it needs to make a request to our back-end

to this this route right here this end point which is slash poll okay and then pusher is going to trigger an event that we're going to subscribe to on the front end and it'll then get the points and

the OS that was submitted and K whatever OS and also just a message a thank you message so in our main J s that's on the front end let's create a variable called forum and we'll set it equal to document

dot let's use get element by deep because we gave it an ID of vote – forum all right and then we're gonna add an event listener so we'll say form dot add event listener

and in here we want to listen for a submit and we'll just put an arrow function here and let's pass in our event parameter so we'll just pass in E and let's do an e dot preventdefault

just to prevent the default behavior and now this is where we want to make requests actually before we do that we need to add a couple more variables one is going to be the choice now there's a

lot of ways to get the checked value the older way would be to do like a select by class name or something like that and then loop through them grab the correct value we're gonna use query selector

which makes things a lot easier so we'll say query selector and we're gonna grab the input that has the name equal to OS which is all of them but we want the checked version so we can use

colon ok so you can use any kind of selector that you could eat that you could use in CSS and this makes it really easy and then we just want the value okay so you

want to make sure you do dot value that'll give us our choice and then I'm gonna create a variable called data which is just going to be an object that has OS equal to that choice and that'll

be the data that we send along with our post request all right so to send our post requests we're going to use fetch so we'll say fetch and the URL is going to be HTTP localhost 3000 slash pol okay

and then we're gonna send a second parameter with an object and we want to make sure that this is a post request so we'll say method equals our method is post and then we want to send the body

which will contain the data okay now I want to wrap this data in a function called JSON dot stringify so we can make it a JSON string before we send it off and then we're going to need one more

property here of headers and we want to set this to new headers and inside here we're just gonna pass in an object and let it know that it's jason with by using content – type and we're gonna set

that to application slash jason all right now fetch returns a promise so we want to go right here get rid of that semicolon and do a dot then I'm actually going to put that on a separate line I'm

using the prettier extension so if I save it might yeah it knocks it back up but just for now I'll go ahead and do that so with fetch we have to do two dot

bends because first we have to map it to the type of data we want to return which is Jason so res dot Jason and then we need to do another dot then okay and then if there's an error we can

do a dot catch as well so this dot then will actually include the data and all I'm going to do with this data is console.log it okay and then for the catch that'll give us an error if there

is one and then I'll console dot log the error so that's our request all right now this is not going to do anything to do with the chart yet but let's just save it and let's open up our console

and just make sure we can actually make that post request so I'll say Windows and vote and nothing happens let's see did I include this in the HTML script source main je s I missing something

here formed out event listener submit let's try again oh there we go all right so we get back success true message thank you for voting

now it's also triggering push is also triggering an event right here this OS poll an OS vote with this data but we're not catching it yet so what we're going to do is we're going to implement canvas

je s and build our chart and then we're gonna basically subscribe to this and then add those add the data points by this trigger right here okay so we're gonna go completely under the form

events actually let's give this a comment will say form submit event and we're gonna go all the way down under it and then we're gonna implement canvas je s so let's go to canvas je s and just to

give you an idea of how it works we'll go to the docs and let's see working with data basically what we want to do is create an array called data points and it's

gonna have for instance it'll have label windows Abell Mac and then each Y value is that going to be the number of points which one point is one vote that's just to

make it easy all right we're gonna start with all zeros and then once we implement our database we'll fetch from the back end the number of votes in the database and we'll fill that data points

all right but for now let's just create the data points and I'm using let because we're gonna actually be changing this late later on so let's say let data points equals an array and each one will

have a label so this will be Windows and they're all gonna have a y-value of 0 that should be a comma all right so let's put a comma here and let's copy this down we need 4 of them so this one

will be Mac OS Linux and other alright so those are our initial data points now we need to create a variable with our chart container okay remember in our index file we have our chart container

ID let's grab that set that to document dots query selector and it's gonna be the ID of chart container alright and then we're gonna just do if chart container exists then we're going to

create a variable called chart and we're gonna set it to a new I think it's canvas J s dot chart pretty sure let me just yeah right here new canvas J s chart and then we put the name of the

container in quotes so we'll say chart container and then we have a second parameter which will be any any any objects we want let me just get rid of this sidebar I'm sorry I said objects

options we want inside of this object so I do want to do animation enabled which will give us that little that so the the chart will slide up the bars we'll set that to true you can also set the theme

there's theme one theme to I'm just gonna set it to theme one and then we can do a title which is actually an object and I just want it the text now later on I wanted to actually show the

number of votes but since we don't have we can't have that yet because we don't have a database hooked up I'm just gonna say OS results for now and then we want our data for the chart which is going to

be an array and we want to put an object in here with the type okay so it's gonna be a column chart you can also do a bar chart I think you can do a pie chart you can look at the documentation if you

want to learn more about canvas and then we want our data points which are going to set to the data points variable or array that we have above all right then we want to render our chart which is

going to go right here so chart dot whoops chart dot render and let's save that and now if we reload chart is not a constructor let's see what do they do wrong Kant's chart

equals new canvas Jo this should be an uppercase C there we go so it's so now we have our canvas nothing's going to happen if we vote we're just going to get our response down here we need to

implement the subscription down here so we're gonna go right under the chart render and if we go to our pusher dashboard here and we look at the client-side implementation we're gonna

grab this to log to console this will basically just show you everything that's going on in the console we also need to initialize our app like that and we then we need to subscribe so we're

gonna actually copy all of that and put that right here okay your ID app ID will be different and it's okay to have this here it's not putting your app secret anywhere cuz this is the client-side

anyone could see this by just saying view source but it's okay to just have this and then when we subscribe we're not subscribing to my channel or binding to the event to my event what we want if

we look at our back-end is OS poll an OS vote all right so we're gonna change this to OS – poll and we're gonna change this to OS – vote all right and then for this we don't want to alert data message

what we want to do is we want to basically add the data to our chart okay so the way that we can do that is by taking our data points we're going to manipulate the data points array and

that's why I had to use let and not Const so we're gonna set it to data points and then we're gonna map through it we're gonna use the high order function map and I'm just going to use X

here and then we want to check to see if the X dot label is equal to the data dot OS okay and if it is let's take let's say X dot Y meaning the Y meaning this this value here so X dot Y

and then we're going to append to it so plus equals we're going to append data dot points okay which could be anything but we remember we set the points to one so right here each point is one and then

after that we just want to return X okay if it's not equal so we want an else here to the data dot OS then we just simply want to return X and do nothing else all right and then we need to

re-render the chart so we're gonna go right here and just say chart dot render all right let's save so now if we go and let's just refresh this and now you'll see we're getting all these logs in the

console because we we said logged a console but if I go and I vote let's say windows vote there we go it's put on the chart if I say Mac vote and we can vote more than once if you wanted to

implement something so that people can't vote more than once that's beyond the scope of this but we can so now you can see Mac has two windows has one alright so we now have our real-time

functionality if I were to go to a different browser I'm sorry different tab or client whatever it's gonna start over because we don't have our votes stored anywhere

all right so what I'll do is reload this page but if I vote on this page you'll see it on this one as well all right so we do have we have the real-time functionality complete so now what I

want to do in the next video is start to implement a database on the backend so that we can save our votes so that this doesn't happen and we can actually come and see how many votes there are and

that stuff alright so that's that's basically how you use pusher for real-time applications I just want to take a step further and add a database so I will see you in the next video

Part 2 of 3: In this video we will code the front end JavaScript, make a request to the backend on form submission and subscribe to the Pusher real-time response, adding the result to the CanvasJS chart.

💖 BECOME A PATRON: Show support & get perks!
http://www.patreon.com/traversymedia

VISIT MY WEBISTE: Check Out My Udemy Courses
http://www.traversymedia.com

CODE: PusherPoll Github Repo
https://github.com/bradtraversy/pusherpoll

PUSHER WEBSITE: https://pusher.com
MLAB WEBSITE: https://mlab.com

FOLLOW TRAVERSY MEDIA:
http://www.facebook.com/traversymedia

http://www.instagram.com/traversymedia
https://discord.gg/traversymedia

    build a poll app build a polling app canvasjs javascript javascript chart javascript pusher mongodb mongoose node mongodb node mongoose node poll app node pusher node.js node.js mongodb node.js pusher poll app pusher pusher real time real time app socket.io