How to create a Realtime Chat Application with Pusher and React Part 1

hello and welcome to this video tutorial where we will be building a real-time chat application using pusher and next.js um so i'm just going to demo you very quickly um what we're going to be building today so if you have a user called ola and all that logs into our application so once allah logs in we see euler's name and we are we also know like how many users are in this room right now they're just there's just one user in this room and if we create a new uh instance of the application if i can spell the colors correctly right so if you create a new instance of the application and we call this person say wayne right so once when wayne joins the room uh when knows how many users are subscribed to this channel so right now the two users subscribe to this channel and all i will also get a notification that when just joined the chat and we're also going to put wayne's location there using the google maps api and we also update correctly to show that there are two users now in this channel or in this room and so if allah sends a message and says i win and sends a message uh and we go to wins instance we'll see that wayne gets a win guess the message because we need to subscribe to the channel and and wayne can say biola right um very intuitively so when wayne says buy ola and we come back to the chat we see when's response to all iai and and so if more users join the room for example if we have another user called toby joining the room when toby joins the room the two other users are already in the room will get notifications so for example uh wayne gets a notification on toby just joined the chat and all elsa gets a notification until we just join the chat so this is what we're going to be building today and we're going to be using the pusher channels api so if you go to the pusher website you'll see that pusher has got two products they've got one called channels and they've got one called bins so the channels products allows us to create real-time features real-time applications and you can see some examples here or some use cases real-time location gaming real-time results for voting systems for example um chat applications while the bims product allows you to create push notifications to all your users devices when things happen in your system and we're going to be building all of these using nextgs which is a react framework for production nexus is one of my favorites uh react frameworks it just works and we're also going to be using a pusher as well and so we can get started with this so first of all i always like to come to the next gs examples page just to look for a nice starter kit to work with my favorite has always been detailed in css1 just because i'm a huge sale in css fan and so we can simply copy this and our current instance cd into documents let me create a new terminal here set into documents and simply run this command we're gonna call this pusher demo all right so while we're waiting for our example app to install a starter key to install you can just basically come to the pusher dashboard if you already have a pusher account or you can go to pusher.com and click sign up uh to create an account with pusher because you're going to need some you're going to need a couple of keys of api keys um so you're going to need to create an account with the with pusher um so once you're done with that i already have an account with pusher i can easily just sign in so once you're done with that you want to go to the app keys section to see all of the ad keys for your project and we can so once our application is done installing we'll come back to this our application is done installing we can open it up in vs code you can see this is the pusher demo project um we're going to need to create a dot emv.local file first uh because this is the way nextgs allows us to bring in our environment variables and so you can come back to where your app keys are on the pusher dashboard copy all of that and paste them into your emv dot local and save them now the next thing we're going to do is to create a pusher instance that we can reuse because we're going to have a couple of api routes if you come into pages slash api you see that nextgs gives us an api folder to work with um so when anytime you want to write server side code you want to do all of that inside this api folder all right so i'm gonna create a new folder called leap and in here i'm gonna say index.js and i'm gonna create a new pusher instance but before i do that i'm gonna install the libraries that we need from pusha so i'm going to create a new terminal and i'm going to say jana pusher and push.js right so the pusher library is for for server-side code while the push.js library will work for the client-side code all right so let's get into this so first we're going to create a push-in stance for our application so we're going to say import pusher from pusher so this is this is going to be for the server side and we're gonna say export cons pusher because new pusher we're gonna create an instance app id and our app id remember we already brought our keys into our emv.local file and we're just going to reference the same keys in here process.if.app underscore id uh our key will be process the env key the secret we process.nv.secret our cluster so a couple of things that we need to set up this is the enviro cluster and finally we need to call this us use tls line and just say true all right so with that done uh we can start building out our apis so we can delete this data predict startup file here and because of what we want to do with using the the push up presence apis and if you go to the pusher documentation let me bring this up here we're going to be using channels api and we're going to be using the presence channels and if you read through the documentation you see that the present channel subscriptions must be authenticated right and so for us to do that we're going to need to create a an out art folder in here right and we'll create a push.js all right so now with this created uh we can this is going to be our route for authenticating our users so let's bring in the pusher instance um this is in leap yeah so we're just going to import pusher from lib or push our instance and now we can basically write the server side code for authenticating users handler and we can save request and response objects so the next js on the ap on the server side on the api side gives us access to the request and response objects just like in node.js um and so when pusher tries to authenticate users when you're when you and when it user subscribes to your channel or to your application um they're going to hit this endpoint and they we're going to have something called socket id uh we're also going to get a channel name out of the body and for our own instance we would love to also get a username so at the start of our application when user sign in we'll store their username in the application state and we'll pass that in the body of our request when pushers authenticating our users and this is going to come out of request of body right so every user in our application will need a unique user id that pusher requires and so we can quickly generate one there using javascript and so we'll call this mac.random and we'll say to string and we'll slice it yeah so what you want to do at this point though is you probably want to authenticate your users using something like json web tokens uh just to make your application more secure um but for this example we're simply just going to be generating a random string for user ids and working with that another thing that we need uh to continue working with this is something called present data so present data contains information about your users so when a user comes and is authenticated it's about to be authenticated in your app uh we need certain information about that user so for example the user id and the user id is going to be this random string that i've generated up here we also need a user info object which is which is something that you that pusher can send back to us when a user or users make requests in our application so call we'll say this is username and remember we're already getting the username out of the requested body object so we can simply just say username over here all right so now with that done we need one last step which is a try catch block um to finally authorize the user so we'll say pusher.authenticate so this is pusher's way of ensuring that your user is actually authenticated uh and can and can receive requests on this channel i will say present data and we'll consider that error if there's an error error okay so with the first part this is the first part of our api done um so when a user is for example when a user comes to the localhost 3000 chat route this is going to send a request to our backend to make sure that the user is authenticated before they can subscribe to the channel and receive requests on the channel all right so with this done now we can save this and we can go back to our api folder and create a new file and we'll call it index.js right so in this file what we're going to do is we're going to handle a request from our application so each time a user sends a new post a new chat in the in the channel um we're going to take that chat here and send it to pusher all right so let's get into that so again we're going to bring in our pusher instance uh where's that file yeah so we're going to bring in our pusher instance from lib and we're gonna again export the default function so the thing about next year is when you're working with xps apis is that they only allow you to export one default function per route yeah and again we have the request and response object and we're also going to have requests a body so in the body when we're making post requests to this endpoint we want to be able to get the message and possibly the username as well all right and now we can call push.trigger we're gonna we're gonna call our channel a presence channel um so when you're subscribing to a presence channel on pusher you have to prefix it with presents so if you look in the documentation you'll see more about that and we want to subscribe to the chat update event you can call this you can call the presence channel and chat updates you can call that any anything you want just remember to always prefix your channel name with presents and you can call your events whatever you want all right so we push out a trigger code we're going to need to access the object we're going to need to pass in our object here which we're going to pass message and username and then we want to give a response back to the client when that is done and we'll say status of 200. all right so our server side is now done and we can now focus on building out the client side server side done we can start working on the client side of application um we'll start from app.js so in this file what we want to do is we want to bring in use date because what we want to do at the start of application is we want users to be able to put in their username and then we want to store that in our parents uh state appearance component and then pass that on to the tutoring so let's say again you state from react we also need a use browser from next browser so next provides us a way to do routing within our application without having to install xml libraries all right so with that done we can say username and search username and say use state defaults nothing um and then we can also instantiate our router use router to silk and the next thing we can do is we can say undo login so when a user is successfully when user successfully logs in uh first we want to do a prevent default to prevent a refresh and then we can route them so we can say router push to slash chat so we're going to create a a chat page or a slash chat route for our users to be redirected to uh once they put in the username

Channel: Adebola

Views: 4,960

Keywords: pusher, react

Id: EbcpFYnhQRE

Length: 14min 45sec (885 seconds)

Published: Thu Mar 11 2021