Build REALTIME Chat Application with Laravel and Pusher

so hi guys welcome to my youtube channel in this tutorial video i will show you how to create a real-time chat application with laravel and pusher if till now you haven't subscribed to my youtube channel please do not forget to subscribe to my youtube channel and hit the notification bell so this chat application is going to be created with laravel and pusher it's going to be a real time chat application in which we are going to run it with a localhost server and the source code will be provided on my website the link will be provided in the description below of this video so in this we are not going to be having a database it's just going to be a real-time chat application that means if the user if me and a second user have opened the application at the same time whatever i'm typing in my message the second user can see whatever the user is typing in his message i can see this is how our application is going to work so without wasting the time let's start creating our chat application so before creating our chat application we need to set up our pusher so for setting up our pusher we are going to come to our google chrome all right up here and i'm going to minimize my terminal all right so this is a website link which you can see up here the link will be provided in the description below just come to the link create your account or sign in with your google account up here and up here you can go to the channels which you can see up here i have already created a chat app okay so what i'm going to do is i'm going to click on a manage button up here if you're creating it first time there will not be a manage button there will be a button named as create an app okay so what i'm going to do after coming to this section up here i'm going to click on a menu up here there's not at all an option i'm just going to make it in a full size and you can see up here there's an option up here that is saying create an app i'm just going to select up here and now i need to name my app so let's think what name i should provide to my app that is going to be youtube tutorial that will be great or let me go with chat hyphen yt that is going to be youtube and now we need to select a cluster up here that is going to be eu ireland and after that you can select this option if you need to create an apps for multiple environments when you select it you're getting the options up here your app will be called like chat youtube development staging and a production but i don't need it so i can just uncheck it out and choose your tech stack optional this is going to be an optional you can choose if you want if you don't want you could no need to choose but i'm going to choose it so for front end we are going to be using the vanilla javascript and for a backend we are going to be using the laravel that is our php framework so i'm going to select it and after selecting all of the options that they have given up here we can just click on a create app button and our app will be successfully created and as you can see our app is created and we are directed to a getting started page in which we can see our app name all right just ignore all of this options up here just come to the left menu up here and select the app keys after selecting the app case you can see up here we are having the app id we are having the key we are having a secret and a cluster just a small reminder that you should not copy my app key otherwise it will give you a big fat error so if you copied no problem it will somehow work otherwise it will not work if you want to create a new key or a new secret id just click on a button below up here and the new kill will be generated but i'm not going to create a new one i will be using the older one that is created one minute ago so what i can do is i can just hover on this three menu up here and click on the delete button to delete our second secret key and after that click on delete button again and our second generated key will be deleted so keep in mind just open this page side because we are going to deal with our app id key secret and the cluster in our laravel project so now i can minimize my chrome and i can open my terminal at the right hand side so now let's start creating our laravel project so cd desktop first of all i will be coming to my desktop directory to create my laravel project and for creating my laravel project you need to install composer you need to install laravel you need to have node you need to have npm after having all of these softwares installed on your pc you need to run a command that is going to be composer grade hyphen project laravel forward slash laravel all right and now we need to name our project and it's going to be named as uh chat hyphen app hyphen youtube and now i press enter now it's going to create a fresh laravel project for us so it's going to take some time so let me speed up the video till the installation is finished [Music] alright guys now you can see my laravel project is successfully created if i come to my file explorer up here drag it on my first monitor screen up here come to my desktop folder up here we can see that folder is created up here that is named as chat hyphen app hyphen youtube that is going to be my laravel project all right so now i'm going to close my file explorer and up here in my terminal i'm going to redirect that means i'm going to come inside my created folder cd chat hyphen app hyphen youtube this is going to be my laravel project and as you can see up here now i am inside my laravel project all right now i'm going to run a command that is going to be npm installed to install all of the needed dependencies in my project so now it's going to install all of the packages that i need for creating my project it's going to take some time so i'm going to time lapse this video till the time the installation is done all right guys so our npm install command is also finished successfully now the thing that we need to do is we need to run a command dot code in our terminal to open our project in our vs code editor so let's run a command up here that is going to be dot code and as you can see it is saying me that it is not recognized as an internal or external command operable program or a batch file maybe it works in our powershell command or a linux terminal or a mac terminal no problem it doesn't works in a command prompt so what can i do is i can just directly select it from our vs code editor i can come to my code editor click on open folder up here come to my desktop directory and here's a folder that is created that is chat hyphen app hyphen youtube i'm going to select it and click on select folder and now my folder will be selected in my vs code editor all right so as you can see these are all of the files that is there inside my laravel project all right that's cool that's really really amazing so now let's start creating our chat application so before creating our chat application we are going to open our browser screen at the right hand side of our vs code editor and now i'm going to come inside my vs code editor and going to open this dot env file up here which you can see inside my project folder i'm going to select that means i'm going to open that file up here all right so now what i'm going to do is i'm going to scroll down and in the 18 line number you can see there's a text written up here that is saying broadcast driver all right that is changed to log what i'm going to do is i'm just going to change this log to pusher because we need to broadcast our chat application in a real time in our pusher that we are going to be using while creating our chat application that's it now let's scroll down so now what i'm going to do is i'm going to come to my pusher website where we have selected our app keys we're going to come there and we are just going to click on a copy icon up here after it is displayed that it is copied we are going to come over in our vs code editor and after our pusher app id which you can see up here at the end of our dot env file we are going to press two times enter and paste it up here now i'm going to select all of the codes and paste it inside my pusher app id this is going to be my key so i'm going to copy and paste it up here this is going to be my secret key i'm going to copy and paste it up here and as you can see this is my cluster that is europe i'm going to copy and paste it after this empty one and now i don't need this copied text up here i'm just going to delete it that's cool that's it for our dot env file now we are going to create a new file with the help of our terminal that is going to be our event file so for doing that we are going to come to our terminal up here inside our project we are going to run a command that is going to be php artisan make we are going to run a command that is going to be column event so if you can't see up here what i am going to do is i'm going to make this terminal up here and you can see up here let me zoom it a bit and you can see the command up here php artisan make command and after that we are having a column we we're going to write event that means we're going to create an event that will occur when the user sends the message and i'm going to name it as message and let's press enter and now you can see up here that the event is created up here successfully that's it now we can minimize our terminal now where will our event file created we can come to our app folder which you can see up here inside that app folder we can see there's a folder that is known as events we are going to come inside that folder and after inside that folder we are having a file that we have created that is message.php now we can open our message.php file cool now inside my message dot php file up here what i'm going to do is i'm going to zoom my code editor a bit so you can see what i'm doing in a clearly so for zooming it i'm just going to close my sidebar you can close it with a short key that is going to be ctrl b all right if you need to open just press the same short key that is going to be ctr plus b to open the sidebar so i'm going to close it and i'm going to zoom my code a bit all right that looks clean now i'm going to scroll down and up here you can see the class is created that is named as message up here i'm going to write that message class implements and we have used up here should broadcast i'm going to use up here should broadcast so what i'm going to do is i'm going to select up here copy it and paste it after it implements should broadcast after our message is implemented we should broadcast all right and after this use variables up here we are going to create two more public variables that is going to be username and a message so let's create a public up here then we are going to be having a dollar symbol and our variable name that is going to be username now let's create our pub message variable that is going to be message that's cool and amazing now when we scroll down we can see there's a function that is created up here that is named as construct inside this construct function parentheses we are going to pass two of the variables that we have created up here that is our username and our message so let me pass it up here all right so after doing this what i'm going to do is i will be using the this command up here that means this username is equal to the username that i'm having inside my variable same thing i'm going to do with my message this message is equal to the message that i'm having inside my variable cool that's really really amazing so now when we scroll down up here we can see there's the public function that is created up here that is broadcast on we are returning a new private channel what i'm going to do is i'm going to remove this private up here and we're going to return a new channel up here and the channel will be named as a chat that will be broadcasted and we can see in a real time and after this public function we are going to create a new function that is going to be named as broadcast as so let me create a public function and let me name it as broadcast as parenthesis girl braces enter inside this function i'm going to return what i'm going to return i'm going to return a message and that is my class that is message i'm going to return it up in our broadcast as function up here now let me save it so that's it for our message.php file now we are going to come to our web.php file that is going to be our root file where we define all of the roots that related to our web pages so for coming to web.php file we are going to open our sidebar we are going to scroll down and we can see there is the folder that is named as roots inside these folders we are having a file named as web.php so we are going to open that file up here and close our sidebar again so inside my web.php file we are going to use three more things that is going to be our message that is going to be request and one is going to be the response that we are going to get from the user so let's use inside our app folder we are having the events folder inside that events folder we are having a file named as message that is going to be our message.php all right that we're going to use up here then we're going to use our illuminate forward slash http forward slash request then we are going to be using the illuminate slash http forward slash the response cool that's it now we are going to scroll down a bit and after scrolling down we are can see up here there's a root defined up here by default that is returning us a view that is returning us a welcome dot plate dot php page so what i'm going to do is i'm going to change this welcome to index because it is going to be my main page that's it now after doing after changing our view file we are going to open our sidebar and before changing our main file what i'm going to do is i'm going to run my application so for running my application i'm going to come back to my terminal up here and write a command that is going to be php artisan serve that's going to start a development service for our project and now what can i do is i can select this url up here copy it minimize my terminal open a new tab in my browser paste it up here and press enter that's going to run my application now as you can see up here we are getting an error that is saying that it's an invalid argument exception that means the index.blade.php file is not found what i'm doing is on my default url i'm seeing them to return the index file but the index file is not yet located there's a welcome file located that was defined before so if i just go with the welcome if i save it if i reload my browser screen up here we can see our app is running fine but i need index file to be called so what can i do is i can come inside my resources folder inside my views file we can see there's welcome.blade.php file up here let me just make my sidebar bit bigger up here i can just right click and rename my file as index.blade.php all right now when i save it and when i reload my page i should not get any error that's cool that means my root is defined up here successfully so now we can open our index.blade.php and edit our html code up here so what i'm going to do is i'm going to select all of the code and delete it and now when i save it and reload my page my page should be blank as you can see now my page is blank i'm getting only a single white page so now i'm going to write a basic html code up here and change the title to the chat application all right and after changing the title to my chat application inside my body container which you can see up here i'm going to create a div which is going to be having a class of app so we can style it with the css easily inside this div we are going to be having the header all right inside this header the first thing that we're going to have is a h1 tag for display our application name that is going to be chat application now when i save it when i reload my page as you can see it is displaying me the heading that is their chat application then we are going to be having an input in which the user is going to enter the username so let me create an input which is going to be having a type of text and the name of username and after that we're going to provide it id of username so we can work with javascript and let's provide it a placeholder so the placeholder is going to be enter username and now when i save it and reload my project up here we can see we are having our heading that is displaying chat application and we are having input that is displaying a placeholder that is going to be enter username that's our header all right so inside my app class only i'm going to create another div which is going to be having an id of messages all right so what's going to help this what is this div going to do in this div whatever the user is writing a message in our message input and clicking on a send button the message will be displayed in this div in our center of our application like a whatsapp or a messenger after this div we are going to create a form which is going to be having an id of message underscore form all right so inside this form the first thing that we're going to have is we are going to be having a input and a send button so let's create an input which is going to be having a type of text and the name of message and now we're going to provide it id that is going to be message underscore form or we can provide it id that is going to be our message input in which the user is going to enter the message and now let's provide it a placeholder that is going to be message and now let me close the input now i need to create a button that is going to send our message so for creating a button we are going to be using the button tag up here we are going to provide it a type is going to be submit because we are going to submit our message and we are going to provide the id that is going to be message send and now let me close my button tag up here now i'm going to provide a text to my button that is going to be sent as simple and now i save it and now when i reload my application up here we can see we are having a message input and our send button so i will be explaining you the structure of our chat application because i have not provided you a live demo so what is going to be up here we are going to be having a header in which we are going to be having a heading that is being displayed up here we are going to be having a username input in which the user can enter the username and it should be entered otherwise the user cannot send any kind of a message so when the user enters the username it will be saved and after that user can enter the message that he need to send all right hi there and when the user clicks on a send button we are going to display this this message with the user's name in our div which is having an id of messages which you can see up here have you got the structure of our website if you got it that's cool if you did not don't worry about it we'll get through it in short time all right so our structure is created up here now let's link our css and our javascript file css for styling our application and javascript for adding some functionalities some powerful functionalities in our application so first of all let's link our css file so for linking our css file we're going to have right up here a link tag and we're going to provide it a rail that is going to be stylesheet and href to link my file dot forward slash if i open my sidebar up here what does this dot forward slash means that means inside my resources folder only come outside of views folder and there's a css folder inside the css folder i'm going to create a file that is going to be app.css and if i open this css file the file is already created cool now i can just close my sidebar and even close my link same thing i'm going to do with my javascript file after my div that is going to be my app dave and i'm going to create a script tag which is going to be having a source up here that is going to be in outside of my views folder there's a javascript folder and there's a file named as app.js and i'm going to close my script tag that's it so now i have linked my css and my javascript file with my index.plate.php after it's done let's start styling our application so for styling our application we can see up here that we have linked our css file that is there inside our css folder but inside our resources folder only so we can see up here we are having our resources folder inside this resources folder we are going to open our css folder and open our app.css file and just for a basic styling what i'm going to do is i'm going to add up here a body tag and i'm going to change the background hyphen color to red when i just do that and save it and reload my application as you can see the background color is same white it is not changed to red so for running our app.css file we need to run a command in our terminal that is going to be npm run dev and what it is going to do it is going to compile our css and our javascript file from resources to our public folder it's going to create our css and javascript file and in which we're going to be having our css file and our javascript file included in our public folder that is going to work in our front end so for a clear example i'm going to come to my terminal up here i'm just going to stop my server local server up here and i'm going to run a command that is going to be npm run dev for a clearness i'm just going to clear all of the command that's up here by writing a command that is going to be cls all right and after that we're going to run a command that is going to be npm run there for compiling our css and javascript file let me just run this command it's going to take some time so i will just make my video bit faster till the time it is finished all right guys as you can see there's an alert box appeared up here on my windows that is saying the laravel build is done successfully and we can see up here they are showing up here us a message that is saying compiled successfully in 308 for ms and our javascript file that is there inside our js folder in our css folder we are having our css file is compiled successfully now if i come to my vs code editor up here and if i open my public folder we can see the css and the javascript file is created successfully and inside that files we are having our app.css file if i open that we can see the same code that i've written inside my resources folder is compiled in my app.css that is there inside my public folder all right so now i'm inside my resources.css file all right and now when i reload my page the background color should change to red and boom we are getting an error up here because we have not run our application so for running it back again we're going to come back to our terminal and run a command that is going to be php artisan serve or not serve it is going to be serve all right and our development server is started let me minimize my terminal and reload my application back again and as you can see our chat application background color is successfully changed awesome so now let's start styling our application so all right guys so now what i'm going to do is i'm not going to explain all of the css code that i'm going to write up here for styling my chat application to you because this video is only in the depth of how to create our chat application functionalities not how to design our chat application so what i'm going to do is the css code that i'm going to write up here is going to be time lapse in a speed so let's start so all right guys so now we have done styling our application now i've saved my stylings up here if i reload my application up here as you can see up here the stylings are not applied the background color is still red so what i need to do is i need to come back to my terminal up here stop my server and run a command back again that is going to be npm run dev so let me clear a code from my terminal up here run the command that is going to be npm run dev and after running this dev command it is going to compile my css file and my javascript file back again and as you can see it's done successfully all right now i'm going to run my application back so for running it that is going to be a command that is going to be php artisan serve command all right so my development server is started now i'm going to minimize my terminal and now when i reload my project up here you can see boom the stylings are appearing up here successfully cool and now there's a single error while styling my application that was this message box should be displayed at the end of my at the bottom end of my screen so for styling i have provided the id that was message it should be messages so i have added s again come back up here to repeat the same format back again run the command of rundev and after it is compiled successfully run our application back come to our browser screen around our vs code editor and now when i reload my application boom now it looks really really cool we are having a heading here the user is going to enter the username that is going to be any username that's going to be del corise and the user can enter the message up here hi there and when i just click on enter nothing is happening the page is reloaded so now we're going to add some functionalities with javascript that is going to be dealing and working with our chat application all right guys so now we are going to come back to our web.php file and i'm going to close my sidebar with a short key that is going to be ctrl plus b and now i'm going to create a new route from up here that is going to take the username and a message that the user is entering in the input field that we have created for username and the message so for that i'm going to create a root and the root is going to be using the method that is going to be post method we are going to be having a parenthesis in which we are going to be having a single quotes we are going to provide a url that is going to be forward slash send hyphen message comma now we are going to create a function up here and in this function the parenthesis that we are having we are going to push two arguments that is going to be request and the variable that is going to be dollar request cool and now i'm going to close my route with the semicolon now inside my route what i'm going to do is i'm going to have my event function up here in this event function i'm going to create a new message now what does this new message do this new message will create for me a new class that is having the name of message so i'm going to say them to create me a new message parenthesis i'm going to request the username sorry i will be requesting from the input the username all right and after this parenthesis we are going to be having a comma i'm going to request the message from the input so input inside the parentheses i'm going to enter the id that is going to be message that i have provided to my input and after that i'm going to end it with a semicolon that's it and it is going to return uh square brackets if it is successfully done we're going to be having a fat error function and it's going to be returning us true and i'm going to end it with a semicolon that's it let me save it and that's it for our web.php file now we're going to add some functionalities with the help of javascript so what i'm going to do is i'm going to close all of these files that are opened up here so it will be really easy to work in our smaller screen i'm going to open my sidebar inside my resources folder we can see that we are having a javascript folder in which i'm having app.js file and bootstrap.js file all right so in my app.js file you can see that it is requiring dots forward slash a bootstrap that means it is requiring my bootstrap.js file in this file we can see up here we are having a commented lines of code up here that is echo exposes an expressive api for subscribing to channels and listening for events that are broadcast by laravel echo and event broadcasting allows your team to easily build robust real-time web application so now what we are going to do is we are going to select these lines of code up here and we are going to press ctrl plus question mark to uncomment it out after uncommenting it out we can see what we need to do is we need to install laravel hyphen echo and pusher hyphen.js in our project so for installing it we are going to open our terminal so let's open our command prompt up here i'm going to stop my server that is running up here by pressing ctrl plus c and i'm going to clear all of the code that is written up here by writing a command cls and now i'm going to install laravel hyphen echo and pusher hyphen js in my project so let me come to my terminal up here and i'm going to and i'm going to write a command that is going to be npm i what does i means i means we need to install that and i need to save it so hyphen hyphen save what i need to install i need to install the laravel hyphen echo file and pusher hyphen js and now i'm going to press enter to install these two files in our project and after it's done what i'm going to do is i'm going to run another command that is going to be composer require pusher forward slash pusher hyphen php hyphen server all right as you can see we are getting an error up here that is saying me your requirements could not be resolved to an installable set of packages that means it is using 7.0 version so we are getting an error up here because it's using the php version that is 7.0 the latest version is 8.0.12. so here's the use the option minus w to allow the upgrades downgrades and removals or for packages currently logged to specific versions we can fix it easily so we are going to write the same command back again so for getting the back same command back again we are going to press the up arrow that is on our keyboard and after that we are going to add hyphen capital w and now let's press enter now it's going to work fine all right we're not getting any error that's cool all right guys now it's done now what i'm going to do is i'm going to run a command that is going to be npm run watch what does this command do this command do if i have changed or if i have added any kind of a code in my app.js file no need to run npm run that again and again so it will automatically run it so i'm going to run this command that is going to be npm run watch so this command is going to be run in my terminal up here so i'm going to open my vs code editor and my browser screen up here as you can see it is saying the laravel mix is done successfully and it is watching so now let's minimize our terminal now i'm going to open my terminal new terminal that is going to be opened in my vs code editor and now here i'm going to run my project by running a command php artisan serve all right let me reload the page amazingly it's working fine so for checking it what i'm going to do is i'm going to come to this app.js file up here and i'm going to create a alert that is going to be hello world now when i save it what should it do is it should display me the alert message without running a command npm run there and my build will be run automatically and it will show me an alert at this point up here bottom below let me end it with a semicolon and let me save it as you can see we're getting an alert that is displaying laravel makes build successfully all right so now when i reload the page we should get the alert that should display us hello world and as you can see it is displaying me hello world that means my npm run watch command is running up successfully now let's click on ok and let's start writing our javascript code so the first thing up here is that we are going to create four variables the first variable is going to be named as messages underscore element alright the second variable that i'm going to create that is going to be username underscore input to get the username from the our username input that we have created in our application now let's create our third variable that is going to be message underscore input to get the message the user is entering in our message input and the last variable that we're going to create is going to be message form all right so let's come to our first variable and up here i will be using the document dot get element by id in parenthesis i'm going to be having a double quotes and i'm going to select the id that i have provided to my messages element that is going to be messages let me end it with a semicolon all right so now when i come to my blade file up here let me scroll up here this is going to be my index.blade.php file we can see up here that we are having a div which is having an id of our messages in which we are going to display the messages that the user is entering in our message input all right so we have selected it now inside our second variable we are going to select our input for our username the id i've provided to my username input is username so for selecting it i'll be writing a command document.getelementbyid same thing i'm going to repeat up here again i'm going to select the id that i've provided to my username input that is username now i'm going to come to my third variable i'm going to write a command document dot get element by id parenthesis double quotes and message high underscore input and now let's come to our last variable document dot get element by id parenthesis in which we're going to be having a double quotes and the id that i have provided to my message form that is message underscore form for checking it we can come to our dot env file up here not sorry not dot emp file we can come to our index.php file up here and we can see our form is having an id of message underscore form all right that's correct now we are going to select our fourth variable that is going to be our message underscore form and we are going to add an event listener to it we are going to see when our form is submitted that means when the user clicks on a send button we are going to add some functionalities so when the user clicks on the submit button that means when our form is submitted we are going to call a function up here which is going to take an argument that is going to be e that means an element and inside this function we are going to select our e and prevent it as a default and now we are going to create a variable that is going to be hallett has errors has underscore errors and that equals to false that means we are not having any kind of error now all right now we are going to be using the if and else statement if our username input okay if our username input if its value is double equals to null that means if the user is not entering the username we're going to execute this code in which you're going to show an alert that is going to be please enter a username [Music] and after that i'm going to select a variable that i have created is has errors that equals to i'm going to make it true because we are having an error then we are going to create our second if statement that is going to select our message input if its value not input if its value is double equals to null we are going to execute this code in which we're going to display an alert that's going to display please enter a message and then we're going to select the variable that is has errors and we are going to make it true now we are going to create another if else statement up here in which we are going to select our has errors variable if our has errors is true if we are having any kind of an error in our username input or our message input what we are going to do is we are going to return [Music] that means we are going to return outside of our message underscore form that means this function that's cool now we are going to create another variable which is going to display us the message in our console.log so now after my last if statement i'm going to create a variable that is going to be options that equals two we are going to be having an object in which the method that we are going to be having that is going to be a post method comma the second thing we are going to be having a url that is going to be the url that means the root that i have provided in my web.php file if i open it up here that is send hyphen message so let me just write it up here forward slash send hyphen message let me add a comma and now we need to send the data so data is going to be having an object in which you're going to be having a username that is going to display the username that the user have entered in the input field so for that what i'm going to do is i'm going to select my username input dot its value same thing i'm going to be doing with the message message input dot its value that's it amazing cool it's done all right and after that what we are going to do up here if we come to our bootstrap.js we can see up here we are requiring our axios so let's come to our app.js and after our options object that we have created up here we are going to use the axios up here in which we are going to call our options variable all right the laravel build is successfully done and after that what we're going to do is after our ad event listener function we are going to select our window dot we are going to do the echo statement up here in which we are going to have our channel that we are having so echo in our channel that means displaying our channel and what was the channel name that i have provided in my message event that was a chat so for checking it we can come to our sidebar we can come to our events folder up here we can open our message.php and scroll down a bit we can see we have created a new channel and the channel name is chat all right so i'm saying window dot echo the stuffs in my channel name chat all right in this i am going to execute a code that is going to be console.log all right so first of all let me add this listen up here in which we are going to be adding a dot message all right comma we are going to be having a fat arrow function up here which is going to take an argument that is going to be e that means an event in this i'm going to console.log what i'm going to do console.log i'm just going to use the console.log to my message so let me save it and inside this what i'm going to do is i'm going to create a messages i'm going to select my messages element in which i need to display the message that the user have entered in our username and our message input so i have selected my id in which i need to display all of my messages that means a div i'm going to use the inner html up here that equals to how i'm going to display it so we're going to be having a single quotes up here plus equals to a single quotes in which you're going to create a div which is going to be having a class of message all right and now we're going to close this div up here and we're going to create a strong tag inside this strong tag what i'm going to do up here is that we are going to end our single quotes up here and we are going to concatenate and display first of all our username so our event and we are going to select our then we're going to be having the plus operator back again single quotes we're going to be showing a column up here and we're going to end up here our strong tag [Music] beautiful and after that we are going to be adding again a plus operator and then we are going to be having e dot message all right then you're going to be having the plus operator back again single quotes and we're going to close our div up here and now let me end it with a semicolon beautiful and now we're going to add a space after my strong tag ends and let's save it all right so now we can reload our chat application to check whether our real-time chat application works or not so for that i'm going to reload my chat application okay it's done now we are going to enter our username up here that is going to be easy to code and i'm going to write a message that is going to be hi there and now when i just press enter it is displaying me the message that is hi there so for a big example what i'm going to do is i'm going to drag my this screen at left hand side i'm going to open a new tab and i'm going to drag it in the right hand side and i'm going to copy the localhost server up here and paste it in my next browser screen and reload even my left browser screen up here all right for a good example now in my first chat application thing that is opened in our new device and our second chat application that means this one is opened in our another device if our project is uploaded in our server so i'm going to enter a username that is going to be del coris and up here this is easy to code all right and now let's write a message if i write a message that is going to be hi there comma how are you okay and now when i press enter the message is sent and del coris has sended the message it is being displayed in our dell course chat app and we can also see in my easy to clear code chat application all right so i'm going to write a message that is going to be i am fine let's press enter and the message is delivered and even the dell course can see the message and even i can see the message in my messages div this is how we create our chat application with the help of laravel and pusher if you like the tutorial video please do not forget to subscribe to my youtube channel and hit the notification bell and i will see you in the next video

Channel: Eazy2Code

Views: 664

Keywords: programming, coding, php, laravel, chatapp, pusher

Id: vl5CJIhy5oU

Length: 53min 31sec (3211 seconds)

Published: Sun Nov 14 2021