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

server side done we can start working on the client side of application um we start from app dot 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 state parents component and then pass that down to the tutoring so let's say again you stay 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 date defaults nothing and then we can also instantiate our router use router to sync 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 chats so we're going to create a a chat page or a chat route for our users to be redirected to once they put in their username um so we're going to say android login change over yes so this would set the username so we say search username i'm gonna say e dot so i get this value uh we would also have username passed down to all our chart components and finally we would what else do we need we need the add a login function as well so we'll say under login and login right and now we can go into index.js this is a starter file that we started with so we can take all of this out uh maybe we can leave some more distilling classes actually take all of this out we also need this and we can create a simple input component i will type text um let's bring in our props from our app components we created under login change and create an android login all right so let's go with the form here and we'll say input type is text placeholder would be entire username um and we'll say unchange and do login change all right so let's run our server and see what that gives us so we're running on localhost 3000 okay so we have our mp field right there uh let's style it a little bit so we can say border one what else can we say yeah let's see all right so we have it brought up but we need to give it a color so let's say butter black all right so let's give it a pattern y of two and pi in excel two and let's make it rounded and we should probably change it to like a gray it's like a light green cool so we have all of that working and we need a submit button so let's start this a little bit as well all right and make it rounded i think we need a little bit of a margin too cool so and our form should have uh i don't submit listener and we'll pass this the underlying function all right uh so all of this looks good um right now if you click submit it's gonna take you to slash chat but we don't have that as created yet so in our pages again we're going to create a new file called chat.js and we're just going to say export default function chat and just return hit d for now say we are in chat all right um so with that done let's make sure that we can get the state out of our as of our app right so when we come into chat let's take the prop username and let's display these names so we say i username and chat all right let's try this out so from here if you say your name is ola and you log in you say i allow in chat cool so that works perfectly um and we can start to deduce about i'm just going to copy these classes and paste them in here all right so now that we've been able to to take the user's username from the landing page and we were able to redirect them to chat um we need to build out the the rest of our application which is uh the actual chat feature okay all right so we can say import remember we already have uh pusher installed the push.js library installed for the client side uh one thing i need to point out though is that we won't be able to use this key uh the way it is right now in next.js and the client side uh as an environment variable so nextgs provides us something called next public so if you want to use something on the client side but still make it an environment variable you would have to prefix it with next public so if you say next publix key then we can use that on the client side so we can just copy and paste our keys and go back to our chat.js file and so now we can install axios let's say you're not ics right and we can bring in axios from axios because we're going to need to make requests to our server so with that done we can continue doing some work all right so we're going to bring in pusher we're going to create a pusher instance again like just like we did on the server side but this time around we're going to do it on the client side and then we can say processor emv the next public key and then pass in some objects as well our cluster is the eu cluster yeah that's our environment variables earlier and then our end point so push our the default or endpoint at slash pusher but if you notice that with our serverless application um there's an extra route there which is slash at flashlight and so we're going to need to change the default um pusher route so instead of saying instead of inside just has pusher slash alt we're going to have api pushers right and then we're also going to pass in some extra params which will be the username yeah so when the application starts up we want to pass in the username um to the backend all right so with that done now we can start to think about the states that we need in our application so let's bring in our use states from react and now we can begin to so every time there's a new chat in the application we need to store all of those chats somewhere so we'll say set chats and we'll say it make it an mcra um and then we need so when a user types a message and they send it we need to set state for that as well so we'll say cosmetic set message and we'll see if states will be an empty string so we can also keep track of how many users are online online users can and initialize this to zero and if we want to see which users are online you can say online users online so this this is all your states um originally we're going to be populating that state all right so with all of this done we can continue the rest of our application um what we want to do is we also want to bring in use the effect from react so that once our component once our chat component mounts um we can begin to do things with pusher so first of all we want to subscribe to the presence channel which is the channel that we created here on the back end so if you come into what uh if you're coming to index.js you see we are triggering the presence channel and so that's what we want to subscribe to when our component mounts and so what we need to do for that is we need to start off with use effect i like to write an extra check to check if my component is mounted um see if component is mounted and then i can say if mounted and do some do some logic in there and then return when we amount i want to set this to false okay so when we're mounted what we want to do is we want to do a couple of things with the pusher so first of all we need to create a channel and we need to subscribe to that channel be sure to subscribe and the channel that we're subscribing to is the presents channel because that's what we're triggering on the back end now with after subscribing to that channel uh the couple of other things that we need to do we can bind onto events that are happening on our channel and listening listen for all those events uh so the first thing i want to do is when someone successfully subscribes to the channel uh what do we want to do we want to increase the count right we want to check how many people are subscribed to our channel so how do we do that we can call so let's just say when a user subscribes to the channel we can say channel.bind push our subscription succeeded if i cancel succeeded correctly um and members and this will take a callback uh so we can just say set online users account and set that to members account so pusher gives us a members um thing in here that we can bind to and read how many users in the channel from there all right so with that done um the next state that we would like to track is when a new member joins the chat so when someone when there's a successful successful subscription to our channel we want to track that but we also want to track when a new member joins the chat right and and this is this is very similar so subscribing to the channel and also generate the charger but very similar but they have different methods so i'm just going to put that up here if you needed so when a new member joins the chat what do we want to do again we want to bind to the channel and we want to listen to the push pusher member added event this gives us a member callback but when we get this callback all we want to do is to just um again set the set account and this time around can call channel.members.com so on the channel channels object we have a couple of methods of concord and one of them is members accounts that will tell us how many users or how many members are currently added to our channel now with that done um something else that we want to get is the the username of the user that that just that just joined the channel that just joined the chat right and so we can set online users and we'll say prestige here so that we don't erase the previous state we keep the previous data as well and this is going to be an array and inside the array we're going to expand pre-state and we're going to say username will be member info so we're going to access the member object that we're receiving back in our callback add the username all right

Channel: Adebola

Views: 1,299

Keywords: iMovie

Id: gMvlI7OU-yM

Length: 14min 29sec (869 seconds)

Published: Thu Mar 11 2021