Real-Time Chat Application with Laravel 8 using Socket.io

[Music] hey what's up guys so it's avi nation programmers and welcome back to another tutorial so in this video i'm going to explain you that how we can create a very mini chat application using socket.io right so the plan is to integrate socket with the help of laravel so you are able to build some chat application and in this video i'm going to explain a very basic channel application and you can understand about what socket is and how we can integrate with the larval and the installation right so here you see we are using socket 4.0 and first i want to show you the demo and then later on we're going to explain all the things that we're going to do right so we have two different uh screens and that means that we have one user and the second user right so if i just try to add a comment hi and this is gonna just pop a broadcast to the second right it's just similar like we have two chat application two different person have the communication so if i just write here like something high i am good and this is gonna uh again broadcast uh to the end of the screen right so i am fine so so basically the concept is that that how we can basically create a buy by communicational uh chat app right so i think so that's enough for the demo and let's jump in and get started in the coding section all right so let's get start for the installation so that i'm gonna copy the very fresh installation for the larval 8 so i just want to open up my git patch here and let's install the larval 8 so all i need is a simply type composer create dash project laravel slash larval and the name of the application and my case would be china right to just simply press enter make sure you have installed your composer and i'm using composer latest version which is 2.0 or one i believe and i'm using the larval current version so make sure you have all updated right now uh so sockets are actually basically uh to connect bi-directional communication right so if i just want to click on the get started here or you can also open the documentation so write a chat application so you see here it's a guide where you can have a chat application it will really help us to resolve so many complexity in the php right just like it involves polling the server for changes so it keeping track of everything right which includes time stamp and there are other other different uh features that it provided so these are the very basic installation that how we can create the uh the very basic uh connection how we can serve so make sure you have your node.js installed in your application if you haven't so just install that nodejs.org and so that's where it will be helpful for us to work with the npm commands and so so make sure you have installed the recommended version for that if it's fine or you can use a latest feature if you want all right so i hope this is gonna take some time for the installation and i will be right back once it's done all right guys so the installation has been done now let's uh change the directory and move into the chat application and i'm going to use here vs code so simply just open that right so um so let's write the code uh and make sure you are a familiar little bit about the larval application and the very basic things and uh if you haven't so you can watch my uh series on laravel 5.7 which is or but i think so if you want to understand the basic concept so for that it's still fine right okay so let's go inside your root directory and create here a file with the name of server.js so whatever you want to name it you can give it the name of app.js server.js it's all completely up to you just it's just the recommendation right okay so um i'm here i'm gonna create a very basic server with the help of node.js and you know what when we are creating a server with the help of node we are able to connect and integrate with the sockets so that's what the plan is so i'm going to open up here the terminal as well so we have to run few commands here so in order to install here express the reason why i required express because express is a back-end web server for the node.js application so that really so that that can help for uh for basically creating a very basic a very basic uh server for the node.js right so let's install the express here first so npm install express right so this is going to install the express in our package.json file so i'm going to uh bring this in inside here with the help of command.js so cons express equal to require express so if you have worked with the node.js so that really good for you so that can understand you better right so let's create here a variable with the name of app and that should be equal to the express right so express method next we have to create here a variable with the name of server and that server will help us to get the http now basically http request will help us to uh to create the server and and let's create here a method of create server and let's bring this in the app a variable inside that right okay now whenever we are working with the socket star io so i need to install the package here the dependencies for the socket diode so if i just go to the documentation here and you see we have installed the express here we also need to install here something which is known as socket dot io so there we go so our server that integrates with the node.js http server a client library that loads the browser so it will serve the client automatically and how to install the one module so the very basic is that npm install socket.ios so this is going to install the socket for us right so just simply uh paste it inside your terminal you can use git bash for that all right so this install the socket.io and let's bring this in inside here so cons io equal to require so we need to bring the dot io inside here so it should be socket dot ir all right so let's bring the server as well as i need to bring here the course and the reason why i bring the course it's still fine that you can bring only the uh you can only pass one parameter and so basically i need to um to protect i don't need to protect my url i can just want to connect with any url so for that i can just bring here the origin and that will let us help to avoid the errors in our console so we might get some errors related to the urls that your urls are not secure so just bring here the cross origin errors right so let's bring here the origin and that means that we need to uh that should be with the all url so for that i just need to pass here staric right so actually i just need to remove that okay so that's fine and the server and i'll actually forget to bring here course yeah that's fine okay now next i need to apply here a very basic condition so that's where the the beginning start for the socket so the first thing that we need here is in our application that we need to build a connection so in order to build the connection with the sockets means that we can uh communicate with the server with the help of connection so we have to build here our connection with the help of io dot on and i will tell you what actually is so first we have to listen the server so i just forgot to bring that server listen so server dot listen and i need to bring here the port number 3000 and let's give here the uh pass the callback and that callback should show the message that something is running so let's give it a message that server is running right [Applause] all right so this saves it now if i just try to apply here a condition let's give it a node and the name of the file which is server so let's print enter and this is going to show us the message that server is running right that means now our server is running for the node okay now i was explaining here that now we have to apply we have to build a connection with the help of sockets the first thing that i need here is i need to establish connection so io so basically this io is coming from the where we have required our sockets and now in order to this on method we'll have the event emitter which node application provides so we can have the even emitters for multiple events so this includes that connection as well so we have to apply we can you can just give it in the past here the connection so that will let us that yeah we want to build a connection right we want to build a connection with the server and next we have to pass here something which is known as socket so basically this socket uh callback will help us to pass different uh events different pipelines so we have to pass that and with the help of that socket we are able to send chat to the server or we can send or receive the events so this this object is really helpful now next thing that i need here is i want to connect now in order to i just want to show you here a message so console.log and let's pause here the connection and in that case it's it says that yeah if the connection is established that means that we are connected and on the other hand if it's not now for the other case i want to get this socket now this socket object that we are get from this from this parameter inside our connection so with the help of socket dot on we can also disconnect that means that if the user is not connected that means it will show us the message that yes you are disconnected so let's pass your disconnect [Applause] and i again need to pass your socket just like that on top even though i don't need that and we can just simply show here a message and let's pause here the disconnect all right now if i just try to run the server and node server you see the server is running now if i just want to open up my uh open up my server run my server so php artisan server so this is basically the server that i run for my laravel application right so let's go to your browser and tries to run that and you see we have this now let's open up your console and it's blank that's fine now if i just try to refresh here you see that nothing is going to work here and the reason why because just open up the node yeah so basically we haven't set up the connection on the front end right so let's go inside our resources views and welcome.blade.php so i just need to remove every single thing which includes the style all right so just remove that styling i don't need that uh even i don't need the body styling uh just remove everything from the body tag all right so just bring here simple body dag and now if i go back and refresh this so it looks like this i just need a very basic layout to just grab the get bootstrap and i want to grab the cdn so let's bring this in here okay so i want to change the title to to chat app socket.io right and just remove the style tag here and next thing that i need here is i believe that's fine i just need to apply very basic styling later on so we can also do that okay so right underneath that i need to bring write some jquery code as well and i need to pass bring here the socket as well so what actually i'm going to do i i need to apply here a client side node so what actually it means if you go to the learn go to the documentation version 4 you see here that basically that this is the node.js client and this is the node.js server so we are basically uh passing the bi-directional communication with the help of events so this should be the browser client so this this is gonna send and receive the message right and i can also i also need to apply the installation for the client side so let's click on here installation and these are all the recommended browsers for it so make sure you have the right browser i need to get this cdn so i need to include that cd in here for the connection so let's gonna copy that and i just need to bring this in right underneath that and yeah okay so because i need to write some jquery as well so let's bring here code.jquery.com and grab the cdn from here so let's copy that and i just want to paste it right on top of it okay so here i'm gonna write here a script tag and here i'm gonna write a very basic jquery so let's pass here dollar function which is a shorter form of dollar document already function all right so right inside here i want to let the ip address so let's create a variable with the name of ip address and pass your ip address of your uh which is basically the larval server so the localhost you can write here 127.0.0.1 and with basically this all is the server that you're running make sure it should be same all right and the next that i need here is the socket port number so socket underscore code that should be 3 000 and make sure it should be same what you have your node server running here right so it should be 3000 and let's connect that so with the help of i o so we make sure you bring the cdn in for the socket so it's 4.0.1 and i need to bring here socket let's create a variable and with the help of io i need to uh basically pass the ip and the socket so let's pass your ip address and i just need to concatenate that with the colon and let's bring here the socket underscore code all right so that's fine now in order to build a connection there is a very basic thing that is required is socket dot on so this will let us to build a connection and make sure it should be similar similar to what we have here inside our connection right so let's saves it and i just want to open up my uh terminal and if i close my server make sure you close the server and run that again i just run my server and i go back to my chat app and i refresh my page and let's go back to the server and you see now it's the connection is established right so if i just try to refresh this two two three times and you see now it's gonna console uh on to our terminal and you first see that it shows that your connection is established then it says disconnect means that once it's refreshing and once refreshing is done the connection is established so i just again refresh it twice and you see once it disconnect and then it connects right so that's how we have built the very basic connection right okay so now the next thing that i need here is we can have to send the message we have to send that message to the server so in order to do that make sure you have your socket object in and so let's suppose let's bring here socket dot on now this could be very much confusing for you if you're working for the first time so socket dot on means that we are receiving something and we also have another method which is socket dot image so basically emmett means that we are sending the heaven and on means that we are receiving the oven right so make sure you know the difference between these two okay so the socket dot on and i want to pass a message or you can uh pass here's anything whatever you name it so i want to name here send chad to server but make sure it should be similar where you are sending the chat to the server i'm gonna show you so socket.on we want to send them the message uh to the server and we have to pass here another uh callback for the message and that message should uh show let's write here console.log i wanna i'm gonna pass a message so basically this message is passed to the server right so whenever i type something i just want to remove it for now and just want to add the uh something that we can chat means that we can enter from the form that we will create just now so let's i'm gonna do is create a very basic layout inside my body uh so let's create here a container and inside that container i'm going to create a row i just want to give it another class of okay leave that for now and i need to bring here the chat content so chat dash content oops actually that should be chat content all right so inside here i need to bring here my ul and i need to bring here my allies let's write something here and next right after this div i need to bring here my chat section just give it a class whatever you name it so chat section inside here i'm gonna create another class of chat dashbox and i just want to create a very basic input field so chat dash input i want to give it the background of y and that's fine let's create here an id of chat input oops it should be chat input and here i'm gonna write here contempt editable right okay just leave that blank now let's apply here some css here so just saves it and let's have a look and how it looks so it looks very much nothing is visible here so i need to create here a style so let's create here style tag internal css i'm gonna write so i want to give here a margin rows to here so i need to create a class just to make some space so i just need to create here a class and i need to bring inside here so dot chat dash row and i need to give here some kind of a margin of 50 pixel next i need to bring here the chat uh actually just forget to just leave that let's get the ul so i need margin zero padding of zero next i need to give it the list style none all right so let's give here ul allies and i need to give some color so i want to give it a padding of 8 pixel and i need to give some kind of a color background so that gonna indicate some different difference between the sender and the receiver so just for the difference i just want to give a color nine two eight seven eight seven and let's give it a margin to the bottom of 20 pixel all right so next i need to bring here ulli nth dash child means that means that every second you ally i want to give it the color so i just want to write 2 n minus 2 so every second interval if you bring here 0 so 1 2 so if you just try to calculate it so right after the second it will give that color to whatever i apply here so background let's write a c e c five c five all right i hope that color should be matched what i expected and next we have our very basic chat dash input so i want to give it the border of one pixel solid light gray or light ray actually next i need to give the butter so border top right radius 10 pixels so if you don't want to apply any styling you can skip that all of these if you want to save time but it looks good so butter dash top dash left that's radius let's give it that 10 pixel i also want to apply some padding so 8 pixel 10 pixels right saves it and let's have a look so this looks something like that right so if i refresh this so i just want to if i just want to skip that bg that's white so it's um i just want to give that id and smaller so leave that bg dash you can want to give bg dash dark to show the background dark if you want but i don't think so it looks fine bc dash white is fine all right so i just want to make something which is which looks visible right so that's fine and i just want to give that color white okay so that's fine okay so it's it's very much looks better okay so let's go inside and apply here few more things that we can add inside our chat so once something that i want to add inside my chat so with the help of this id i'm gonna get the if you have are familiar with the dom i have a dom crash course too you can watch that video it's very simple like if just write here a variable with the name of chat input and i wanna with the help of jquery selector i'm going to get its id so let's use dollar and i'm going to get its id right chat input now i need that whenever i press the input field means that if i go here and type something and press enter and this is gonna pop up the message on the top with the help of ally right now it's not dynamic but i'm gonna make that dynamic later on with the help of dom all right so let's uh write here up uh something which is known as key press so chat input dot key press uh so key press method so this method will help us that whenever i press something this is going to call a function with the help with i just pass here evan and this event will help us to uh to their their few codes that are required means that if i press enter it has a code of 13 so that will help us too so i want to display a message so i'm going to create here a variable so whatever i type dollar this dot html so i'm gonna show you so let's pause here console message and go back to the browser and i'm gonna open up my console so let's suppose if i type here something you see that it's gonna show you right under your console so key press will help us whatever i type here this is going to keep pop-up pop the message on our console so we are getting the message with the help of html right whatever i type on the html this is going to display the message okay next thing that i need here as i explained so with the help of that evan i'm gonna get the code so if i want to press enter this is gonna show the message so e dot one uh sorry it should be e dot uh which yeah equal to 13 that is for enter and i i don't need that it will do anything for the shift key so i just explain you what actually it means means that if i press enter and if i just press the shift key um actually it should be e dot shift key right so let's pass here alert and one all right so that's going to show what actually we are doing so i refresh this and as long as i type something and press enter you see that now with the help of this code we are able to get the alert right and basically shift means that if i write something here and if i press shift and enter so rather it should give me an alert it it can help me to write more more messages right more more lined off code okay so just remove that and let's go back to the code terminal okay so i now i need that as i explained that i have sent the chat to the server i need to display that and i want to i want to send the message to the server so for that i can just simply use socket dot emmett so emmett will help us to send the message so first here we send this chat to the server now this this will help to send the message back to the to the uh backend to the to the client side right so we are able to get the message and whenever i type something here so i want to repeat it again that whenever we are whenever we send the chat to the server and it will receive the message so we can uh we can receive the message with the help of socket.on and if i want to send the message or broadcast it to the different i can use here socket dot on so here i use socket dot image and let's pause here that whatever i pass here so this is going to send the chat to to the server and with including some message so this message is basically whatever we type here anything that i type here is going to display it this player's message and i want to i'm going to show you just in a little while all right so i i want here that whenever i send a chat to the server and i want my um my input field to be cleared so for that i just need to bring here chat input dot html and i want to make that blank just simply press that that means that it will clear the screen and return the written false so let's saves it and go back to it and let's write here hello press enter you see now it's clear i need to run my server uh again let's just just close that run the note server its connection is established so if i just type here hello and if i go back to my uh terminal and you see here if the hello is display right so that means that whenever whatever i send chat to the server side and it will send the message and it will us it will basically get the message uh with the help of message right now i need that to broadcast so broadcast means that i want to display it to the multiple screens so for that i can do here is let's go back to the server and let's write here um or basically i need to do one more thing here before i should write it to the server should change a chat to the client i need to do is right after that i want to bring here socket dot on [Applause] and socket.on will send now i want to send the chat to the client so i'm going to create here send chat to the client side to the front end so for that i just create here a function again a callback function and that should have the message and that message should have here i want to write my ul so basically uh i need to append my url so here we have something which is chat content which is the class so i need to remove that because i want to display that dynamically so just grab this class and bring this in so chad content ul so i'm gonna append it so i'm gonna pass here ally with the opening and the closing and let's also bring here the message whatever i pop so dollar message all right so how it's worked and now if i go back to the server.js and we have to display that message to the client side so we are going to use here the emit so like right after the message whenever when we send the channel we have to broadcast or we can simply emit that so first i'm going to show you one me one way is so i o dot um dot sockets dot emit so that's how we can emit it and with the help of that i'm gonna send the chat um actually it should be server check just send chat to client and i need to display here the message [Applause] so let's saves it i need to close the connection and let's write here something i'm going to open up two different screens actually just want to isolate that make that smaller just close all right so so i'm going to refresh this [Applause] so it's not going to work for us so let's go back to the console yeah it's showing us the error it says connection refused refresh that okay let's go back and check what actually is wrong yeah something is actually missing here it says emit cannot read property emit of undefined so i oh actually it should be it should be now if i run that again node server it's running and let's go back and now if i type something here yeah so now it's working right so i forget to bring here the sockets dot it should be i o dot sockets dot limit right all right so with the help of that we are able to send and receive the messages right but i want that when i have one user for instance we have one user and that should be the second user if i type something hello that's not going to show the message i want that that it will it will the receiver should get the message but the sender should not get that message so for that i need to bring here another object which is the broadcast so let's comment this out and i just want to bring here socket dot uh so with the help of that object socket dot broadcast so broadcast dot emmet and again i just need to get that send chat to the client side to the front end and i want to display that message whatever i get so simply just add that and i need to run my server again and now you see here it shows two connections the reason because we have running the server on the two sides so that's why it's showing connection twice and let's go and refresh this and if i write here hello so you see that the receiver is however getting the message but the sender is not so if i write here i'm good that's great all right so i hope this gonna make sense and i hope you guys little bit understand something out of it it's not something which is very complex but i hope that is something which is very tricky that here you see how you can basically pass different uh how you can send the chat to the server so the gist of this whole video is that what actually is we we basically required the sockets we establish the connection and when the server is running and now next we have to send uh the chat means that we have to send the chat to the server side to the backend and we we create that and we pass it to our front-end side and whatever the message that i type here i want to send that chat to the server so we create here another uh another parameter or an object inside the emit and it's gonna send it to the server side and once we type something to the we we we pass that message to the client side so i again pass here with the help of emit and broadcast will help us so how many screens that we have it would broadcast the message whatever we type right so i hope it you guys could understand something out of it so if you really love this video so don't forget to like and subscribe and i'm gonna see you in the in the next coming videos

Channel: AB Nation Programmers

Views: 17,398

Keywords: chat application in laravel, laravel, sockets, real time chat app using sockets, integrate sockets in laravel, Chat App Tutorial with Laravel & Socket.IO, Realtime chat application with php, socket.io

Id: MNf0piqRdHg

Length: 36min 11sec (2171 seconds)

Published: Tue Apr 20 2021