Node.js & Pusher Real Time Polling App

[Music] hey what's going on guys so today we're gonna be building a full stack real-time polling application and what I mean by

real-time is there's no need for refreshing the browser you're gonna see the votes or the results as they come in and we're gonna be using canvas j/s on the front end to display the results and

a chart now we will be using quite a few different technologies we'll build the back end with nodejs and Express and we'll be using a service or an API

called pusher for the real-time subscriptions basically when a vote is submitted to the server through the form pusher is gonna trigger a response and it's gonna update the front-end which

will be in vanilla JavaScript and it will then we'll see what we'll see that reflected in the chart all right so you could use something like react or angular in the front-end but this is a

good example of an application where you don't need a front-end framework okay unless you're gonna add a lot more stuff to it the way it is now there's really no need to add a framework it would just

add bloat to the application now I'm gonna break this up into at least two videos maybe more depending on how long it takes but first I want to implement everything to make it a real-time

application where we'll be able to submit votes and see them as they come in but when we refresh the page everything will go away in the browser because the data won't be persisted

alright so once we get that initial functionality then I want to move on and add MongoDB and Mongoose so that we can actually persist the votes to a database so when we enter the application we can

see all the votes that are already there alright so if I were to reload this you'll see the votes are there because I already have them persisted to the database okay so let me just give you a

quick demo I have two tabs open and these are basically two different clients if this was live this could be somewhere in I don't know your upper and this could be somewhere in Massachusetts

in the US and if I were to vote let's say Linux we'll give Linux some love and say vote it goes up from three to four and it also goes up over here so anyone viewing

the application is going to see that change as well they're not going to have to reload their browser okay which is a very powerful thing and you can see if I go to em laughs which is what we'll be

using for MongoDB it's basically just a remote Mongo database you can see all the different votes here okay and each vote has an ID and ID is added by default and then it has an OS and points

okay and we can change points if we want but I'm just going to leave it set to one for each each vote okay so let's see what else do we want to look at pusher pusher is not actually let's go to the

pusher home page first so pusher is not a polling service or anything like that polling is just what I chose to do with it but it's just it's just used to build

real time applications so chat chat rooms things like that and is those are good ideas for real-time apps data analytics stuff like that and as far as pricing goes for free you'll get a

hundred max connections and two hundred thousand messages per day okay so a message is basically just a like a subscription or a a triggered response from your server in our case it'll be a

vote so 200 thousand per day for free if you were to deploy this make this a production application that actually had traffic then you'd want to pay more okay or do you want to pay something just

like with any other service same thing with M lab or Heroku all of these services they give you a certain amount of whether it's data or bandwidth or requests they give you a certain amount

and then once you pass that threshold you have to pay okay so it's great for testing and learning and developing so that's what we'll be building guys let's go ahead and get into it now you're

going to want to create an account with pusher it's completely free to sign up you can sign up with github which is what I did and then once you're signed up you

can go to your dashboard now I already have an app created so you're looking at the dashboard for that and it shows you the total messages the total connections you've had for the day stuff like that

but I'm gonna start from scratch because I want you guys to be able to follow along so I'm gonna go to your apps and create a new app all right so you should be following along if you want if not

just you can just watch but we're gonna call this pusher poll that's gonna be the name of the app and then we can choose our front-end technology so we can use Android angular iOS backbone

JavaScript jQuery or react okay I'm going to choose JavaScript for the backend tech I'm gonna choose nodejs but as you can see this is not limited to JavaScript you can use Python PHP even

specific frameworks like Django symphony so it's it's very powerful and very diverse so right here you just just ask you what you're building I'll say real-time polling app and create and

there we go so now we have a new app created this is our dashboard and then it gives you an example of just a very bare-bones implementation on the back end we're using nodes so we want to

install the pusher module and then just initialize it you want to make sure you use your own app data here your ID and secret key all that stuff and then when we want to send a or trigger a response

we use pusher dot trigger and then on the front end when we want to catch it we subscribe to it like this push your dot subscribe okay so we don't really have to do anything else here this is

just our dashboard if we go to overview again you'll see all your connections and stuff like that but we can close this up for now and get started with our application okay so what we're gonna do

is create a new folder I'm gonna create mine in my Dropbox code prod and I'm gonna create a new folder here called pusher pull and we're gonna open that with vs code you can use whatever text

editor you want of course but I'll be using vs code I'll also be using the integrated terminal which if you hit ctrl or command backtick that'll open I also have github our git bash integrated

with my terminal here alright so let's go ahead and generate a package.json file with NPM in it and we'll just go through this real quick well quick description I'll say real-time polling

app and entry point I'm gonna use app J s see author feel free to put your own name license I'm gonna say MIT okay but you can put whatever you want doesn't really matter all right now we need to

install some dependencies so I'm gonna clear this out and we're gonna do NPM I our install we want to Express we want body parser because we're gonna be handling a form submission we need to

get the data so body parser is used for that we also want pusher and we also want korres because i want people from other domains to make room to be able to make requests without having issues

alright so i think let's also add mongoose we won't be using it till later but we might as well add it so those are the main dependencies now we're going to install one more as a dev dependency and

that's node mon so that we can constantly watch our applications so we'll say npm i - - save - dev - make it a dev dependency and then node mon okay and we're gonna create two scripts in

our npm file as well or a package.json file so we can get rid of this test and let's say start so this will be the main start script which will be node app dot j s so that's for like deployment your

your standard start and then we'll do a dev script which will use node on so we'll say node Mon app dot je s and node Mon we'll make it so that we don't have to keep refreshing our

application our back-end so let's save this and that should be good now what we're going to do is create our App J's file and let's go ahead and open that up and we're gonna start off just building

a basic Express server so let's bring in Express I'll say Const Express equals require Express and you guys will bring in some other stuff as well the path module is included with nodejs it's just

to deal with file paths we're gonna use it to to declare the public folder now for the front-end you could build it anywhere I want to keep everything in the same push or pull folder so we'll be

building it inside the public directory but you don't have to we enabled cores and you'll be able to actually make requests from anywhere so you don't need to do that but it's just for simplicity

okay and we're not using any kind of template engine or anything like that it's just going to be an HTML file with some front-end JavaScript so we also need body parser which again is for

getting the data from our form and we also want cores for cross domain functionality or authorization alright now what we'll do is create our app variable and set it to Express and next

thing we'll do is let's set our public folder so we do that by saying app dot use Express dot static and then in here we just want to reference the folder we

want to use here we're going to use the path module and the join method and we're just joining the current folder which is under stubble underscore order name and then we want that we want that

to go to the public folder all right so basically current directory slash public should be our static folder now under that I'm just gonna do the body parse or middleware this is just a couple lines

that you need to have if you're going to use the body parser it's right in the documentation as well so it's gonna be apt dot use body parser dot jason and then we also want app dot use body

parser dot URL encoded and we're gonna pass in an object with extended and set that to false all right so just standard middleware and then we want to enable cores you don't need the cores module

for this but if you if you didn't use it you'd have to add that to the code manually which is like I don't know five or six lines of code by using the core the cores module we can just do app dot

use and then pass in cores like that alright so next thing we'll do is create a port number I'll set that to three thousand and then we want to be able to start the server so we do that with app

dot listen pass in the port number and we can put a call back or an arrow function and then I'm just gonna send a message to the console that says a server started on port and I used back

ticks inside here so we can use this syntax for our variable and that should do it so we'll save it and now what I'm going to do is create the public folder and create an index.html file okay now

we're gonna finish the backend first but I just want to make sure that the the front-end loads the index page loads so in this file let's use Emmet will do exclamation tab which will give us our

head body tags and inside the title here let's say push or pull and then we'll put an h1 here and let's say OS vote and that's it for now I just want to make sure this loads so

we'll save this and it should load because it's index.html and it's in the public folder and we don't have a specific route set in our app J s so it should work so let's go down here and

say npm run dev let's see oh I already I have something running on three thousand let me just cancel that real quick all right so let me see should work oops should work now hopefully yep all right

so it's running on three thousand so let's open up a browser I'm just gonna go like that and we'll go to localhost 3000 and there we go so it's loading the index.html file from the public folder

which is what we want so like I said we're gonna do the back end first which isn't going to be too difficult especially since we're not implementing Mongoose or anything like that yet but

what I want to do is anything that has to do with pusher or with our poll I want to put in a separate file so we're going to use the Express router so what we'll do is create a folder in the root

called routes and we're gonna have a file in there called pull dot Jas okay and then let's go back to our App J's file and let's include that so we'll just go right under here and let's say

Const pull equals require it's gonna be dot slash it's in the same folder it's in the same root directory and then in routes and then pull okay and then to be able to use that with the router we're

gonna go down to the bottom right before the port and let's say Const I'm sorry not constant app dot use and we want to say anything that goes to the slash pol URL is going to reflect in the

pull file okay which we just set right here alright so we'll save that and then we'll go to our pull j/s now it's going to give us an error because it's telling us yeah we haven't set up the router yet

so let's go into Polje s and inside here what we'll do is first bring in Express because we need to use the Express router all right and then we're gonna create

our router so router equals Express dot rotor and let's go ahead and set up I'll say router dot get for the slash now since we're in the pull routes file when we do a slash that actually means if we

go over here that actually means slash pull okay because in the app J s that's what we set anything set to slash pull will reflect in the pol file and slash will actually mean slash pol so we'll

put in our arrow function here and every route should have a request and response passed in and then let's just put in here res dot send for now and we'll just say I don't know pull and then if since

we're using the router we have to export it with module dot exports equals router and save and now let's go to slash pull get requests and you can see we get that sent to the browser all right

so later on what will happen here is will fetch from the database all of our polls and we'll send a JSON response to the front end but for now that's fine so when we submit our form okay so this

page will have a form and it's going to make a post request to slash poll so what we can do is say router dot post to handle our post request it's going to be - slash poll but remember we're in the

polls route files so it's just gonna be slash here and then we're gonna just pass in here request/response and then this is where we actually want

whoops we actually want to trigger pusher so if we go back to our pusher dashboard which is here and let's see is this the right application no all right so if we go to our pusher dashboard and

we go to get started let's go down here we need to bring in pusher we need to initialize it with our app data and then do the trigger inside the post okay so let's bring in pusher and we're

in the pull j/s file let's see so const pusher equals require pusher and then i'm gonna grab this here now you'll have different app ID love a different ID key secret all that stuff make sure you use

your own okay and then i'm gonna paste that in there and then for the trigger i guess i'll just go ahead and grab that so when the forms submitted its gonna hit this route and then we're gonna call

pusher dot trigger but we don't want to use my channel i'm not going to use that so let's put in here OS - pol and then instead of my event let's use OS - vote and then we don't want to send a message

that says hello world what we want to send is the points and the actual vote or the OS so let's do points and i'm just gonna put a 1 here and then the OS is gonna come from the forum which we

can get from request dot body dot OS okay because we're using the body parser and then as far as what we're going to return it's just going to be a jason we're gonna say res dot

Jason and pass in here will say success true and we'll put a message which will be a string that says thank you for voting alright and that's it so we'll save that and up until we start to work

with the database this should be it for the back end okay so now what we'll do is in the front end the index.html let's finish up the UI here which is pretty simple we do want to use materialized

CSS so I'm gonna just go and search for materialized CSS comm get started and we're gonna grab the stylesheet the CDN here and let's put that in the head right there and then the JavaScript will

grab that script put that right above the the ending body tag now materialized also needs jQuery so I'm going to search for the jQuery CDN and we're gonna grab the uncompressed version doesn't really

matter and just grab the script tag make sure you put it above the materialized okay so if we save that and we go back to our front-end you can see that the it's changed a little bit now I want to

wrap everything in a container alright so we'll go ahead and bring this h1 let's bring that up here and then we're gonna put a paragraph and we're just gonna say vote for your favorites OS to

develop on and then we need some options so we're gonna put in a form gonna give it an ID of let's say vote - form and we don't need an action get rid of that alright

and then inside the form let's put every every radio button inside a paragraph I'm just gonna make this smaller actually let me make sure yeah okay so everything's good on the back end so

inside the paragraph we're gonna put in input and we're gonna give it a type of radio and it's gonna have a name let's say name is gonna be OS for all of them ID for this one will be Windows and the

value for this will be Windows with a capital W alright so underneath that we want to have our label which will be for Windows that should match the ID of the input and we'll say Windows alright

let's save and see what it looks like so far good so now what I'll do is take this paragraph I'm just gonna make this smaller so we'll take this paragraph and we'll just go ahead and copy that down

three more times so should be four total and let's change the ID here - Mac OS change the value to Mac OS that and that and then this one here will be Linux value should be uppercase

that's what's actually going to be put in the database let's see let's just say Linux distro meaning that whether they're using a bun - or mint or anything they can choose this option and

then the last one will be other all right and for the text I'm just gonna say something else for should be other alright so those are our options now let's put in an input with the type of

submit and the value will be vote and let's give it a class of BTN to make it look good and save reload and there we go there's our form now as far as the HTML the only other thing we need is a

container for the chart so I'm gonna go below the form and just put in a couple line breaks and then under that I'm gonna have a div with the ID of chart container and we're also gonna give it a

style and that will be a height of 300 pixels oops 300 pixels and then let's do a width of 100% so 100% and that should be good okay so that that's where our chart

will go nothing's going to show up yet because we need to have to initialize it in the JavaScript now there's a couple things we need to add here in our scripts we need to add the CDN for

canvas j/s as well as the CDN for pusher on the and all right so we're gonna search for pusher CDN and this first option here from CDN je s we'll grab right here

pusher Minjae s I'm gonna copy the script tag and we're gonna put that right under the materialized script and then let's also search for canvas je s CDN and we're gonna grab the canvas min

script tag and put that right here okay and then we're gonna have our own JavaScript file on the front end as well so let's put in script source and we'll call it main dot J s so let's save that

and let's create that file so in public we need a main dot J s file all right and this is where all of our jobs our client-side JavaScript is going to go now this video is getting kind of long

so I think I'm gonna go ahead and stop it here now that we have our back-end pretty much done until we're dealing with the database and then our front-end UI is done all of our scripts are

connected now we just want to write our client-side JavaScript so we'll do that in the next video