I built a CHAT application in 5 MINUTES using Laravel and Pusher!

I built a chat application where you can send and receive messages with all of your friends in any location built in five minutes using laravel and Pusher first thing you want to do is open up your terminal run this command to install laravel let that whiz through once it's done you need to navigate inside of your project next we need to install Pusher which is our mechanism for sending messages we're going to set up a placeholder controller and a placeholder event now that's all done open up your code in the editor and let's start coding in your web PHP file clear the current routes and create a new get route to the home page and point this towards The Pusher controller we made earlier copy it a couple of times and change it to a post route and put in broadcast and receive next we're going to go to our app folder HTTP controllers and open up our Pusher controller inside we're going to have three methods indexed broadcast and receive each of these methods is going to return a view in broadcast we're going to pass an array of message which will be the message we send out when we chat same thing is going to be for the receive in the broadcast method add the broadcast function with the push-up broadcast event we created earlier include the message and make sure you add two others so we don't get lots of duplicate messages then scroll up to the top and add inner use so it knows where The Pusher broadcast is now next open up the push-up broadcast event I have public message and add another message in the Constructor then pass the Constructor message to the public message in broadcast on replace it with a return array with public Insight add a new method called broadcast as and return a string chat lastly scroll to the top and add implements should broadcast now we're going to go create the views that we're returning in The Pusher controller open up resources and go to views and we're going to create three blades index broadcast and receive blade in the receive blade we're going to have a small div with a class left with message added an image and we're just going to inject the message that we passed in The Pusher controller then it's almost the same thing in the broadcast blade but instead of left is right and then just flip the image the other way around open up your index blade and add a basic HTML structure inside your head add the JavaScript library for Pusher and then another JavaScript library for jQuery then in our body we're going to add a few divs we're going to have a div with class chat another div with class top another div with class messages and another div with class bottom in top I'm just going to add a div with a P tag plus a small and let's just include an image too just to make it nice in bottom we just need a form with an input this is going to be where we're going to input our chat message with a submit button for our messages section we just need to include one of the blades that we created earlier this would be the first message we displayed you do need this bit don't forget to add in your messages array at this point you should be able to open it up in your web server and this is what you'll see it looks a little bit ugly we need to add in The Styling to save some time and since showing you the CSS with me in this video is like 30 minutes long go over to this URL which is on the live site and copy The Styling I'll leave a link in the description in the code go to your public and make a new style CSS paste the contents in then go to your index blade scroll to the top and add another line in place the link in to your style CSS give it a refresh and now it looks a hell of a lot nicer but we can't send messages just yet we need to add in the final JavaScript at the bottom of the index so after your body add in a script tag inside add in a constant for push-up this right here will be API key we'll come back to that in a minute so subscribe to the public Channel and we're gonna listen for chat messages the data that we're going to broadcast out will be received in this variable post the data we received to the receive route that we created previously don't forget your cross site request forgery token and it will give you a response with some lovely formatted HTML which you can then just append to the previous message in your done function then add this line to scroll to the bottom each time you get a new message to broadcast the messages we're going to send off from our form we need to capture the event when we click the submit button on our form first thing prevent the default action then create an Ajax post method to the broadcast URL it's very important that you pass in your socket ID in your headers otherwise you're going to get lots of duplicate messages then pass in the data that you want to send off in your done function and like before it'll return to lovely HTML which you can just depend to your last message clear the value you've just sent from the messages and scroll to the Bottom now all we need to do is get our AP AI keys for Pusher and we'll be able to send messages head over to www.pusher.com and sign up put your email in and your password verify your email and you'll learn on The Pusher dashboard click get started and just create an app go to the API keys and copy the details then go to your dot environment file find Pusher and populate accordingly finally go to your broadcast driver and change it to Pusher and you are done open up your web browser in two different windows and you can start chatting with yourself or if you actually have a friend unlike me you can deploy this to a web server and ask them to chat with you so with that I would love it if you'd leave me a like let me know in the comments what you think And subscribe until next time Ross

Channel: Code with Ross

Views: 40,148

Keywords: Chat laravel pusher, laravel, php, pusher

Id: ER-wOKXrbuw

Length: 5min 21sec (321 seconds)

Published: Sat May 20 2023