Laravel + Socket IO | Build Real-Time Notifications (Free)

hello guys said the id guy here and in this video we will cover the real-time notifications that we can integrate into laravel so the github repository link is in the description box and the branch name that i am pushing this code will be named socket io so make sure to pull this branch and build it on your own and let me know if you face any issues or any kind of glitches i'll be happy to help you out so in this video we will discuss socket i o so the first thing will be the installation and setup the second thing will be building our use case that i will demonstrate in the app so third thing will be the testing i will show you how it works then the up and down sides to using socket io uh where i will discuss the alternatives that is pusher and laravel echo and all that and then at the end my personal notes so let's begin yeah so the first thing that you have to do is log into the app with the super admin credentials so super admin at my sorry shopify.com one two three four five six and after that you will see you will see this element right here send real-time notifications so click on it and you will see a message and a user so let me open up an incognito tab and i will log in with one of the user that i have yeah so this is the user it has uh its own dashboard and in the menu we can see that it is user one sorry so this is the user user1 so let me go back to that tab so i will say this is a message from super admin oh i'm sorry let me start up node server.js yeah so let me refresh and i'll hit and refresh here as well yeah so this is a message from super admin send it so here i can see that i have received a message from the super admin then i can say another message from super admin and i can hit again so here i can see another message i didn't work on the ui that much you can figure it that out on your own okay so now let's look into the implementation of it so the first thing i did was create a server.js file into the root of the project so this is our server.js now we need to run npm install and npm i think npm install will cover it enough for you because it will automatically install express and it will automatically install a socket i o but in case it doesn't then you may need to run npm install then npm install express and then npm install socket.io these three commands you need let me just put this other comment here npm install after that npm install express npm install socket io yeah so these three commands should cover it so first thing we are creating a server out of it and then in the i o variable we are requiring the socket i o with the server variable here and in the course we are setting the origin to http shopify project.test which is the one present in my env so make sure that this value matches your env app url uh value so let me show it here so this is the value and it matches after that so on connection we are console logging connection and then on the socket when it receives this event from the front end then uh this object that i am receiving here so it has a user id and a message so it uh broadcasts this notification sorry this event uh to the broadcast socket and on disconnect i have commented this out and then at the last we are listening on port 3000 so in the terminal you can see the locks that are getting generated so here i am with user 7 and the message says this is a message from the super admin so this is the server side setup that you have to do and on the client side let's see what we need to do so in our views i want to start with app so this is the one if condition i added here so if auth check is returning true then i am taking a hidden input type with the id user id and the value contains the user id so that's fine and at the end i put yield scripts so now inside the scripts file i added a jquery here because i realized i hadn't i didn't have the jquery so it was throwing that kind of error so then i included the socket io.js uh cdn file and then at the end i created a custom script file called socket if script so let me open up so it will reside in public asset js folder so when you open this up it's a very simple script so it will listen to a localhost 3000 then i'm logging it and then the user id will be taken from the user id input hidden type that i just showed you and when it receives it so on the main div element it will prepend this uh html and that's it for the client side so whenever you refresh on the client side and you inspect it so on the console you should see this f and inside this you should see connected equals true so that is fine um yeah so on the server side now we have to do uh this part right here where on the uh on the click of the send notification button what do we do so i created another uh folder called notifications inside the super admin views and inside this there's this index.blade which i am using and what is what this file is doing i mean this route is it's taking all the ids and names from the user table but it's not taking its own uh record so id not equal to auth user id and it is selecting idn name so that's how i populated inside this select input box and i wrote the script here itself so this script is only for this index file so when we hit submit so the id i assigned it as submit so on the click event i am preventing the default action i am console logging it again i should maybe comment this out and i'm creating an object here so this object contains the user index as the user.val and the message as the message.val so above here so this is the id message and this is the id user so take the values from these two and just hit socket.emit send notification to user so what we specify here that we are emitting so this has to be caught in server.js so socket on send notification to user this is again emitting this receive notification user specific to the object dot user so not everybody gets on the notification only the user that is intended to get it gets it so this is the real time demonstration once again i'll show you so yeah this is refreshed itself so we can say simple message so send and here we got simple message so this is how the real-time notifications can be built here and so now we will discuss the upsides and downsides of this implementation so the upside is clearly it is free uh it can scale a lot you do you you don't need to put any kind of pricing on this you don't need to spend money and it is beginner developer friendly so anybody who's not even working and who's just trying out real-time notifications can have this implemented in their system the downside to this implementation is i don't know how it will work on the production server so clearly you have to get the server.js up and running onto your production server and on port 3000 i think you need to open up the security groups and you might need to get an ssl not an ssl so the port 3000 should be open so this can run easily so that is the only downside i see to this implementation but it is simple enough that could be explained to new developers so they can try it out on their own so it might need a little bit of experimentation you might need to configure nginx to let the 3000 port request come in you might need to configure your server itself to open up the tcp port for 3.3 000 so all that so that is the only downside otherwise uh the upside is it is free and doesn't require a lot of complicated code it is quite simple as i have shown you in this tutorial and you don't need pusher that is the one thing that i have been seeing on youtube where people are showing real-time notifications using pusher now pusha requires pricing you have to pay money in order to get their upper level services they do have a free version but uh with this socket i o you don't need to worry about pricing anymore yeah so that's pretty much it for this video try it out on your system uh make sure to pull the branch socket io uh not the main branch and let me know how it worked out for you if you face any kind of issues please let me know in the comments down below i'll be happy to help you out that's about it thank you

Channel: Sid The IT Guy

Views: 30,997

Keywords: shopify, rest, api, laravel, development

Id: hqE4-Yqn--0

Length: 10min 21sec (621 seconds)

Published: Sat Aug 27 2022