Node.js & Pusher Real Time Polling App
Programming, Science & Technology
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
-
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