Build a Real-Time Web App with Laravel Reverb - COMPLETE TUTORIAL (Laravel, Livewire, Alpine & more)

larl Reverb is a first-party websocket server for larl applications and it's now 1.0 which means we get to dive in and let's build an application using larel Reverb which means we get realtime access for all of our users across our application on our server and let's build it from scratch why don't we dive in so this will be a different type of video where you're going to code along with me so this will be a little bit longer of a video we'll be diving into exactly how do you build a Lille Reverb application a real time application and what are the steps that you have to think about as we build this so we're going to be using larvo we're going to be using Livewire particularly with volt the class-based API and why don't we get started so this is the finished product that we're going to build and hopefully it'll turn out looking a little bit like this when we go through the whole application process but the user will be able to see other users Mouse on the screen you can see on the left side this dot of color kind of hovering around and then every user will be able to turn on and off the switch so if this there's multiple users across the application they'll be able to see other users Mouse relative to the space and size on the screen and then also be able to just take turns turning on and off the switch additionally we'll have this active users tag over in the bottom right just to show how many people are on the site at any given time so there's going to be a bunch of different features that we're using for this application and then I'll show you how you can build this from start to finish okay I'm going to go into my code folder and then we're just going to start by saying Lille new and we're going to call this uh build Reverb with me and we're going to actually start with the starter kit even though we're not going to be using any authentication features for this I to start with it just so that we have larvo and Livewire kind of scaffolded out or and kind of installed and ready for us again you can easily not choose it and then install you know all the things separately but I just like to use it to have a great starter kit and we won't use start mode we'll initialize the GI G repository and we'll let this go ahead and finish we use a sqlite database we'll run the migrations we'll create it all right and then I'll go ahead and go into that folder so build Reverb with me we'll go ahead and run mpm run Dev just so we have the dev server hooked up for us and let's go ahead and open this in our vs code okay the first thing that we're going to do is I just like to get things set up so that we have one Livewire volt component that we can start scaffolding this out and building this out for us so the first thing I'm going to do is I'm just going to remove um these routes I'm going to go into off. PHP routes and I'm just going to remove all of these as well because we don't necessarily need them and I just don't want them in the um I just don't want them in the uh application itself so that when we deploy it there's no you know there's no authenticated users now let's go ahead and in our web so we have welcome here so let's go into our welcome oops let's go into our web routes we have welcome so we we'll go ahead and edit that actually let's go into welcome and we'll just call this we'll call this home. blade. PHP so we'll go back into our web routes we'll say this is home perfect and now what we'll do is we'll just kind of gut this out so I'm just going to remove all of this and why don't we we say uh our toggle switch game so basically you want a bunch of different users who are connected who are have this web application open on their their web browser they'll be able to toggle it back and forth you know so um we're going to go ahead and input a new Livewire component here so why don't we call this maybe we'll just call it toggle like toggle switch so we'll go ahead and say PHP artisan make uh volt and we'll call this toggle and that's going to since we selected the volt class component API that's going to automatically create a toggle class component scaffolded stub out for us so when we first what we're going to do is in our web routes or in our home I should say I want to say that this is the Livewire toggle there we go and let's go into our terminal and we'll just say heard open what this is going to do is it's just going to open up that browser because we're using Lille herd to run the uh kind of local development for us and we'll also use it for our Reverb server but I'll show you how to set up and run a local version of your Reverb server if you don't have larel herd the pro version is what allows you to kind of enable services like Reverb out the gate okay so we have this ready to go I'm going to go ahead and open this up that way it's just in our browser right here and we're ready perfect so the first thing I want to do is I want to just get a toggle on the page and we'll use some so I'm going to go ahead and paste this but what we're I'll show the full code in the GI repository basically what we're going to do is in this div we're going to create a new X data so this is Alpine and what we're going to do is just set up some local state so what that looks like is um oops we'll need some quotations here so we'll set up some local state and basically we just want a um we want a toggle switch so and actually why don't we go ahead and bind this to live wire as well so we'll go ahead and say public uh toggle switch equals to false yeah there we and then we can combine and entangle this to the Livewire components so what that will look like is we just want the local toggle will call it and we can entangle that to the toggle switch there we go that should be good so let's take a look at what this looks like in the browser okay flip switch does not exist on component toggle I I see that's because I have this onchange flip switch method so we'll go ahead and remove that for now okay so we have just our Pure tail one CSS but with an Aline JS state that is entangling in this case just kind of linking the state of the wire method with this Alpine stair and this will come in handy later because what we're going to do is we're going to uh make sure that this switches first locally before we turn turn it because if you if you were to think about this we want every time this turns on and off to be sent to the server well that could get very expensive and also just slow if you turn it on you don't want to wait and for the server to tell it that it's off or turn it uh on and wait for the server to tell it that's on we're going to sync it locally first and then kind of entangle it which means that first it's going to change it locally and then it's going to send it off to the server so this is a great way to do this perfect um why don't we install larvo Reverb so we have a toggle switch ready for us to start listening for when this toggle is actually switched on and off and that's what Reverb is for it creates the ability to listen and to send events with laravel laravel Echo specifically which is the websocket websocket extension of Lille so so that when we turn on the toggle we can send an event and anyone who is listening to that event in Lille Reverb the re Reverb is kind of like the server hosting those events anyone who's listening the event on our server will then be able to do whatever we want to do when that event is listened to and Live Wire also has capability to do this out of the box so that way we can say okay we have these events now we'll just listen to them and do something and we will barely have to leave this Live Wire volt component okay so why don't we install laravel uh Reverb so the first thing I like to do is let's go ahead and go to reverb. lal.com and we'll go ahead read the docs that's a great way to get started uh so installing we can install Reverb using the install broadcasting command when we do that oops PHP Artisan in install broadcasting yes let's install Lille Reverb perfect and it's as simple as that now if you are wanting to run Reverb locally you do have to set up a connection with these application credentials as well as um a couple other things that you might need to do so I would advise checking the docs here PHP AR is in Reverb start is what starts that because I'm using larel herd we have these connection variable already ready to go so it's kind of already hosting this larl uh herd service for us so why don't we go ahead and grab those environment variables and we'll put them into our code so we have EnV and we'll just pop them down here perfect now we should have we should set um looks like it already set our broadcast connection to reverb which is when we installed that Reverb PHP Artis installed broadcasting we're going to install and build the node dependencies as well and then that should be it that should be everything we need to do within larel Reverb again read the docs if you aren't using larel herd but it's as simple as uh after install running the Reverb start command perfect okay switch still works but now let's go ahead and hook this up the first thing that we need to do is we need to actually create a event to listen to and so the event that we're going to listen to is just maybe we'll call it uh so we say PHP artisan make event and we'll say this is switch flipped that's a good way to put it because what we want to do is anytime that switch toggle switch is flipped we could say toggle switch if we want I guess but we'll say switch flipped anytime this switch is flipped we need to send an event so that we can listen to it and flip it on the local version of a user's uh browser so um in switch flip the first thing that we need to do is uh this class switch flip because it's an event we need to implement should broadcast and so that's basically just saying that this event is now a broadcasting event but there's one more thing we need to do we need to say should broadcast now and basically what this is going to do let's pull it in this is just saying instead of waiting and automatically sending this to a q which is lille's default for should broadcast should broadcast now is just going to push it out immediately okay um why don't we in our construct here accept the toggle switch uh variable and then we'll say this toggle oops this toggle switch uh is equal to the toggle switch variable that we pass in so we're just saying um we'll go ahead and initiate that here so we have a toggle switch um variable and then this toggle switch is the toggle switch variable that is passed in to the Constructor and then we're going to create a new channel and why don't we call this the switch channel um okay so we'll bring that channel in that's illuminate broadcast and then we'll go ahead and have a public function of broadcast wi which excepts an array and we will say that this should return the toggle switch of toggle switch so what this broadcast WID method does it's saying whenever this because we're saying we're accepting this toggle switch here and then we're setting the toggle switch variable of this event instance to toggle switch to whatever that toggle switch method in this case because it's a toggle we have you know we have uh false or true and so it's as simple as that so we don't have to say you know we we we don't have to call this a Boolean we just have this it's either true or not true this broadcast on is saying we want this event to be broadcast on this channel called switch this broadcast with is saying okay now I want to when I'm pushing this broadcast out to who ever is listening I want to actually send the value of the toggle switch so we're not just listening for it we're we're we're setting this toggle switch value and then we're broadcasting to whoever's listening the actual value okay so now in our uh Live Wire component why don't we go ahead and set this up so the first thing we want to do is hm well the first thing we want to do is actually set the initial value because we need to know is it false or is it true but then we also need to when we load the page we need to say is this false or is it true so the first thing I want to do is let's go ahead and call the mount command and again this is just saying when this component loads let's go ahead and set the toggle switch so we're saying that the toggle switch is initially false that's true we want it to be initially false but why don't we go ahead and set this in the the cache as well and we can use our database driver we can use redis for this but we already have it set I believe the cache is set to database and that's perfectly fine um we should be good to yeah we should be good to set that so let's go ahead and in our public function Mount why don't we go ahead and first we'll just set oops first we'll just set the toggle switch to grab the cash so we'll say cash and we'll get um the toggle switch and if it's not in the toggle switch why don't we set it to false and we're just going to remove this so that because we're kind of doing the same thing here so let's grab the cache so we'll say use illuminate support facades cache great um and then that should be good so now why don't we start broadcasting so if we are to turn uh refresh this component turn it on now let's pull up our cash okay so we have the cash and if we were to refresh that looks like nothing's in there so let's go ahead and see what's not working properly ah yes and we don't have it in the cach yet because we actually need it to be to be to we need to actually say when we toggle it we want it to set in the cache so right now we just have it uh automatically set to be false but we're not actually setting the cache we're just saying if we don't have uh we're just saying if we don't have it in the cache we'll just set the value to false so why don't we go ahead and set the cache and what we can do is we can say public function why don't we call this flip switch because we did have that uh we did that bound to flip switch so why don't we do that flip switch there there we go okay public function flip switch and what we want to do is we'll first cache and we'll just say forever we want cach the toggle switch and we'll want to cach it to the value of the toggle switch and this is probably a good way to set it to false then here because that way we can say um if the switch needs to be toggled then we'll set it to true or set it to false whatever that value is okay and now here's where we can broadcast that event and it's going to be as simple as broadcast new and we'll say switch flipped because that's the event that we created and we'll say that we want to send with it because remember we're sending the value of the switch so we'll send the value of toggle switch and we say two others and this is basically just saying we want to send this to everyone else who is listening to others perfect um that should be good tongle switch yep there we go and do I have the right number of parentheses I think that's it there we go there we go okay so let's go ahead and pull in the flips or switch flipped event and instead of wire switch why don't we actually bind that to H why don't we actually use Alpine to call this so that way we can first flip the switch locally like we did before so we'll just say X on change uh we'll say wire. flip switch and so this is the benefit of using Alpine Js because it's so tightly knit with Lara live wires we can say when this changes then we'll call the Live Wire method this is a great way of kind of having that optimistic UI of of we when we push this to a server we're going to have a couple milliseconds of latency but we want the switch to feel like it actually switched even before it hits the server um syntax error let's see expecting unexpected token okay let's go ahead and take a look unexpected token so this toggle switch to others uhuh because the parenthesis should be there there we go okay so now let's go ahead and push your error after restarting the Reverb service in Lille herd it looks like everything's working properly so why don't we pull up the cash again because now we should be able to see the cache in our database so we have the taco switch ion of one turn it off and we have the toggle switch Buon of zero okay so everything is working correctly to toggle the cache switch so why don't we go ahead and make sure that Reverb is set up correctly and we're and we're pushing that event out properly so again we have a toggle on the page everything is storing this into the database so if I was to let's go ahead and maybe we'll duplicate this so we can set it over here and this is just to show that the cache is working and we have it mounted properly so that we grab the correct State because if I was to change this and then over here I'm going to refresh and it's set properly change this refresh and it's set properly change refresh again stays the same so we have that working properly but we don't have to have the user refresh this in every single instance well what would you do if you weren't using larvo Reverb again larel Reverb is a websocket server so that way we can do this in real time or as close to real time as possible at least Eventing it sending the event in real time and receiving it in real time and all we have to do is just wait on the delay of the server well a way to kind of fake this in live wire for example would be to say okay instead of putting this on Mount maybe I want to um well maybe I'll I'll change this to public function WID and then I'll return uh maybe I'll return toggle switch um which is set to the cache git of toggle switch and then I could say um H yeah I could say then in here we could wire pull this and we could say every like 500 millisecond ah we actually got have to set the toggle switch to get the cash and then we can return the toggo switch variable that we have so if we were to now refresh this what this is doing is now waiting and pulling it every 500 milliseconds and it will essentially be in real time but that's very expensive on our server what we're doing is every 500 milliseconds and we could maybe we could change ches to every you know every one second so now it will refresh every 1 second Bam Bam you can see how this might be difficult on our server because we if we have let's say a thousand people on this website and every single one of them is pulling the server every 500 milliseconds okay it works great but it's not necessarily something that you would want to do and this is AAR Reverb video where we're looking at actually broadcasting events and doing this all in real time so let's go ahead and revert everything that we just did so we'll change this back to public function Mount and we'll change that there okay perfect so we're actually we're sending it to the cache but we are an we're sending an event as well but how do we listen to that event well the good thing is um laravel Live Wire makes this incredibly easy to do go ahead and delete this that we just have this page so what we can do is H we need to listen for when the switch is flipped and what we can do is um put this attribute in Live Wire we can say on and then we'll say Echo switch again that's the channel that we set up in switch flipped we're listening to this channel so on Echo switch we're going to listen for the switch flipped event okay now anything below this attribute it means that we can run this so we can say public function uh we'll say h we'll say notify switch we'll say uh register maybe that's a good way register switch flip and we'll accept the payload and that's the payload of the event so that way we know what value it should be set and we'll say this toggle switch should be set to the payload value okay and then we'll go ahead and change the cache as well because we want to make sure the cach stays up to date if anyone joins the website after this switch is Switched you don't want to have to wait for them to have someone else flip the switch or for them to flip the switch you want it to be real time before anything happens for new users I did not bring the attribute in for our PHP class so we want to use Live Wire attributes and we'll use the on attribute so let's check this now refresh on both just to be sure on okay nothing works and live troubleshooting simple as a stray uh stray dollar sign there we go let's see how that works now and Bam that was a lot harder than it needed to be but it just goes to show that sometimes there is a bunch of different smaller things that can come in the way especially when you're building live so we have this ready to go now this is a great first step uh and we can just call it there we can deploy this and everything will be working properly as long as we have our Reverb server started and running anyone who joins this can then just click around on the website so how can we take this realtime app even though it's simple and apply some more Advanced Techniques it's real time we can toggle the switch and we can see when others toggle the switch as well but we might not know how many people are toggling it we might not see when they toggle it exactly can we make that a little bit more apparent well we can still use the power of Lille Reverb to make this happen what if we start off with first um show showing others where our cursor is on the screen now we're going to be diving into some Advanced Alpine and live wire to make this happen and we're going to move pretty quick but hopefully this gives you some tips and tricks of how to continue to use broadcasting Echo and lville Reverb to make something like this happen for your next project so first we're going to add a fancy cursor effect for our own user the person who is viewing the screen and this will be a great starting point to to see how can we get the cursor position for others and broadcast that this is just kind of a great way to to show okay hey here's how to grab the cursor location and then we'll move forward from there so there was a great video on what if Pixar made coding tutorials and it was by a person named hyperplex and so we're going to grab the canva that was linked from that video so the video and the canva is in this description but it's just this neat little falling star effect with a cursor really beautiful right so let's go ahead and implement this into our application and then we'll move forward from there so the first thing that we're going to do is just grab the JavaScript from that canva so we can just grab all of this and then we're just going to create a new file in our JavaScript folder we're going to call this why don't we call it magic mouse. JS we'll just go ahead and paste that in perfect looks good well yeah all of that looks fine so you see down here we have this star. class name and this is actually pulling in uh the font awesome icon that we can have this falling from the cursor well why don't we bring in that CSS import into our application so that way we have these fonts applicable so in our bootstrap.js why don't we go ahead and we'll import um we'll go ahead and import Port font awesome dfree CSS all. min. CSS okay and then we'll go ahead and bring this in um through mpm so we can go mpm install font awesome or actually it's it's excuse me it's Fort awesome SL font awesome dasf free looks like that is not correct let's go ahead should be the at Fort awesome there we go so that's at for awesome font awesome dfree perfect and then let's go ahead and import the Magic Mouse so that we can say import um we'll go ahead and import Magic Mouse perfect because that's our our Javascript file that we just had here and instead of fa- solid we can call um I believe it's called fa star there we go so that's the that's the star that we're going to be importing from from font awesome so it's going to be look a little different from that from this uh this code pen right here but let's go ahead and take a look so last thing we need is we actually need the CSS and we can just go ahead and paste copy and paste this into our app.css file now why don't we go ahead and look at our thing and okay it's looking pretty good except that is not the uh not the star so let's see what happened there so we have the star fa star and why don't we put a f as well let's take a look what that is there we go that looks a lot better okay so everything is still working as we would expect but now we just have our own single cursor and this Javascript file is going to give us a lot of insight as how we can Implement a broadcast to just display and actually broadcast when the cursor has move so why don't we handle this piece by piece first so we have our Magic Mouse now let's actually go into our our Live Wire and start hooking this up so if we go into our toggle let's go ahead and start by hm well first we need to know where the the user is and for that case we need to know when there is a new user on the page so in our public function Mount we can say if there is no session that has uh well I don't always say a user ID then we can put a user ID to the session for this particular user and we can use this cool un unique ID um so we can say user ID equals user ID and actually we'll say uh this is a unique ID and we'll call it user underscore true okay so now we can say there's a public user ID perfect and just for uh security sake why don't we say that this is locked so no one can actually change that ID once it's set so we can use Live Wire attributes locked perfect so user ID and then we'll also put these put this into the session perfect else we'll go ahead and set the user ID to whatever it was in the session for that user ID so this is just saying in the user's local session We'll add this ID okay hm now why don't we start to broadcast or start to actually just grab the cursor and maybe we can display like the XY coordinates on the screen for that cursor why don't we have an array of all of the mouse positions that are going to be displayed on the page so why don't we say public we'll say mouse POS or we can say cursor positions well we'll say mouse positions uh well that'll be equal to an empty array perfect now we'll go ahead and say h why don't we start with linking that up to our Alpine data so we have the local toggle but now we'll also say that there are cursors so the cursors are going to be entangling entangle the mouse positions perfect now let's see why don't we use Alpine's X4 coordinates to then Loop through that cursor's array so what we can do here is we can set like maybe after this div and actually we move all this to a a newer div so we'll we'll we'll set we'll set all this into a newer div so X data and we'll just remove this that way we we kind of separate the div from this particular class okay there we go and then we can set that here okay and now why don't we underneath here we can say that there's a template this is the what Alpine can use for our X4 we can say cursors and cursors and now yeah why don't we so this is what uh copilot's kind of sharing with us we just want to um we don't even want to bind this St we just want to show or we want to maybe display out these cursors so we can just say this cursor dox and cursor. Y okay so now we have like some X and Y coordinates at least displayed so how can we get those onto the page well why don't we do that in our hm why don't we do that in our Javascript file so we can go into our Magic Mouse and we already have this handle on move function now this is where I think we want to kind of hook into this to to make this a little bit work for not just the individual's cursor so first we want to make sure we do this in relative uh sizing so first we want to say let's let's get a viewport height and width so we can say con uh viewport and we'll say viewport uh we'll say viewport width equals window.in width we'll do a viewport height and now why don't we go ahead and uh also let's see let's see let's see why don't we also get the center because we want the mouse the cursor to be relative to the center of the page because you can see here that our our our toggle is on the center of the page so we want every other Mouse to be identical to that because if we were to you know resize this we don't want it to be off the page that you can't actually see why don't we go and what we can do is let's grab the center so we can say the center X is the viewport divide by two Center Y is vport divid by vport height ided by two and now we can say that the absolute position of the mouse is going to be uh X is let's see we'll say um because we're handling this on move so we have this e value of e client X and Y E do client y perfect now we can say the uh relative position there we go is it's not minus because we need it to be okay so it's it's X it would be e of client x minus qu y ided by the viewport width of half of the vport width so it would be let's go ahead and remove this then it would be X is e. client X Center x divided by and that would be this here divided by viewport with and actually it would be vort wh divided by two okay and then yes yes yes yes so client y minus Center y okay divided by viewport he by two okay so this should be accurate because now we have the relative position to the cursor because we have the viewport height we have the viewport width we have the center so now we have the absolute position of the cursor in those X and Y coordinates but we now we also have the relative position because we want it relative to the center and now we're adjusting the new mouse position perfect and but we don't want to adjust the last Mouse position with the mouse position we want to do that with the absolute Mount absolute position yeah yeah yeah okay now we don't necessarily need the mouse position anymore because what we can do now is show the relative position based off of where that cursor is so we can say we have create glow yeah we can update the last Mouse position based on the absolute position there perfect and we should have the same working Mouse maybe not yet because we haven't hooked it up yet so update last Mouse position aha yes create glow for the absolute position see what we have and nothing just yet okay we need to create star for the absolute position again because we're changing this for the cursor that's on the page but now we also want to kind of modify this for any cursor that's going to be on the page on for someone else's client okay let's see here and looks like we still have absolute position that we need here is there any other place for Mouse position doesn't look like it aha there we go so we've got that working for that and we've kind of set up the the next steps for what the relative position again this is going to be everyone else's cursors so this is where we can start broadcasting these elements broadcasting everyone else's cursors so why don't we just get this to the live wire component first because we have you know we have all this if it's moved we this is just all the original JavaScript we just modified it to also have the absolute position which is the original mouse cursor but now we also have a relative position which is going to be everyone else's cursor relative to the center of the screen now why don't we just push this data the the the relative position to the page first and then we can start like displaying a cursor for that so why don't we say if is Page active and we can go ahead and say that that page active is going to be true no matter what so we can say uh let is Page active equals true because when this loads the page is active someone has loaded this in their client and why don't we also just set up a a like a a maybe like a broadcast position that way we know where the mouse has been if someone loads it we need to know where the cursor is at that exact instance so we can say let Last Broadcast position equals null okay now we have if is page if is Pages active and we can say that the uh uh Last Broadcast position is for Last Broadcast position and this looks right not equals to Absolute position except this is going to be relative positionx relative positiony okay let me go ahead and wrap this it's easier to to read okay if page active why don't I also format this with um we're going to say We'll format this with the typescript and JavaScript there we go okay all right rep perfect so if that is true then or and we should say if the window is Live Wire okay if Live Wire has been loaded then we'll go and say window. live wire. find and this is where we can actually find the element that we want to kind of push into this so we can say document. query selector and we want to select the wire ID um and we want to get let's see wire ID we'll just grab that itself so that we can get the attribute of wire ID for you probably want to do the move Mouse and that's what we'll call that uh element and we want to get the relative position of that okay and we also want to put Last Broadcast position into yeah that looks right awesome so everything is looking great there except it looks like we might have yeah we might have missed there we go so now we can format and that should look a little bit better okay so we already kind of have set up that this is going to be finding the move Mouse wire method so why don't we create an event that we can use use to then dispatch that move Mouse method because this is just saying anytime a cursor moves we want to run the move Mouse method with the relative position that we're going to kind of pass into that so actually before we even create the event why don't we just create the method and then maybe we can just display that on the page so that way we're just displaying uh you know displaying it for the user so let's go ahead and say in our toggle because we need a move Mouse method or a move Mouse function we can say public function move Mouse and why don't we just go ahead and accept well not it won't be a payload it's going to be the position of the mouse and then we can say yeah why don't we just set this yeah move Mouse positions to position why don't we see what this does so okay let's go ahead and see template for each Mouse positions as position and why we do that I don't know what that's doing right there uh oh it's because it's showing you in style that's why so we won't use the actual style why don't we actually say change of this class just so we can have something easier to show so that is doing it a little bit better okay so we are displaying we are grabbing that curser and we are you know getting the X and Y coordinates again how is this happening um looks like we're we're not doing it the exact right way so because we're we're probably adding it to Mouse positions when we just need to really have only one per user so let's fix that but first let's let's kind of like recap What's Happening Here we have this magic mouse that is getting the relative position that's the basically every cursor other than yours because the absolute position is going to be the individual user's cursor and we're just going to run the move Mouse position based off of this window. live wire. fine there's probably better ways to do this but this is the way that kind of first came to mind one I've used in the past okay again there's better ways to do this because we're just kind of like adding it for every single kind of element so we have a bunch of elements being added onto the screen so why don't we fix this so instead of this mouse positions equals positions let's go ahead and actually create a uh a users's payload in this case we need to make sure that each individual user has their own cursor that's kind of set and being broadcast so H why don't we say that this is a payload then and we want to set the user ID to this user ID we want to set the position to position and that's the position that the mouse is um being pushed into the Page by that JavaScript and we also need to make sure user has a unique colors why don't we do this I've I've created this function that's a Generate random color function basically just grabs a random color I used uh chat GPT for this I am not that smart uh so we'll go ahead and say this is public user colors so we can have that be an array of specific colors for each user and um where we Mount and we toggle the switch why don't we also add to the user colors we'll say they that this user ID and we're going to generate them a random color okay now each person has a random color in the payload they have a position as well as a color that looks correct and then that looks good so now we can actually display this information so now we have this payload so what we could do is if we wanted to display onto the screen but for now let's go ahead and um well we'll go ahead and just kind of like comment this out for now but what we'll do is push this to a new event so let's go ahead and create one so we have let's do PHP artisan make event and we'll call this mouse moved we could say cursor move want to say mouse moved and there we go let's go ahead and go Mouse moved perfect awesome and now let's what what do we need we need their user ID we need their Mouse position and we need their color so we can say public user ID public position public color there we go now in the construct we need to accept the payload that's what we kind of created in that live wire function and we just need to set all this so user ID uh position and color and that looks good okay now we need to broadcast on why don't we go ahead and name this channel the mouse movement channel that sounds good Mouse movement bring in that channel and we should be good to go there okay so we have move Mouse and we're broadcasting that now so we can create a we can create a new broadcast we can say broadcast new mouse load Mouse moved and we can set the payload uh because that looks all right because we're setting user ID here so we can just bring in the payload and two others there we go okay so now why don't we get the other Mouse positions now that we're broadcasting it we should have that beam broadcast so now how can we accept that and just at least first display those XY coordinates on the page well H why don't we why don't we first start by cuz we need to wa or listen for the mouse movement so why don't we go ahead and create maybe we'll do Under This switch flipped we need uh yes on Mouse movement when the mouse is moved that's that event that we just uh created we need to actually create a public function why don't we call this uh we we say register switch flip so let's do the same thing register Mouse moved and we can accept the payload and why don't we do let's let's see what this does so we can set the mouse positions to the payload and why don't we just go ahead and again bring this out and maybe we can do mouse positions as position and we'll do uh let's see or maybe we'll even just do no that should be cannot use because we probably need the actual like maybe we'll do user ID just to see just to make sure this is working properly Mouse move not found class Mouse moved not found let's see aha we did not broadcast it so we need the use uh app SL events SL Mouse moved and I think that's not happening because we need to implement should broadcast now and there we go because we actually need to show what's being broadcast so if we then listen for this and why don't we go ahead and reset that to this mouse positions payload we can Mouse position as position let's see now okay that's not working just yet okay position right there we go so it's actually being broadcast because I mean we're getting an error but um so why we go ahead and D dump the payload just so I can know what we're working with so we have the user ID we have the position of X and Y and then we have the color okay so this is looking pretty good so now we can actually do something with this information so why don't we go ahead and say we can say if the uh payload [Applause] position is not equal to null then we can go ahead and set the mouse position and we can go ahead and then create the payload here and say a payload of a user ID equals payload of the user position because that's the what we're grabbing and then if uh it's not set if is set is not true then we can set the user colors to the payload user ID okay that looks great and we'll set the user colors to the payLo ID yeah perfect this looks good and then we'll set else we need to unset the mouse positions basically remove the user ID from the mouse positions if that's not true this payload right here perfect now we have that is correct there we go you can see here on both sides we have the X and Y coordinates relative to the center of the screen okay this is looking pretty good so far why don't we start to set how many active users there are because we now we know how many cursors there are on the page so why don't we go ahead and have an update so why don't we go ahead and have a public active users count and why don't we also lock this on the page there we go probably need to lock this as well and we'll lock this and we'll lock this so all of that should be said because we're not actually changing this the code itself is changing all this so This should all still work properly oh toggle switch needs to be unlocked because the user is changing that that's an input okay so everything else should still work why don't we create a new uh public function of let's say update active users count and we'll just go ahead and say that this active users count should be equal to count of we can say the mouse positions and plus one depending on like and you as well because the mouse position is only going to be everyone besides the person who is on the page so on Mount we can update the active users count and then on Mouse moved we can also update the active users count so when we now can display this out we can just use that kind of uh just use this down here say active users is the active users count so we have you can see here there's two active users because me on the left and then the person displaying on the right you can see here that the button still works the active users is only showing one because it's counting the current cursors and then over on the right there's a current cursor from someone else and then that person so that's why you're only seeing one and then when I switch this you see one two and same here with two two perfect okay but what happens if someone just like I'm doing right now clicks away or maybe Changes tabs we don't necessarily want to count them on the page they're not active so why don't we add some JavaScript too like remove them from the cursor so why don't in our maybe in our magic mouse let's go ahead and do this so in our Magic Mouse JavaScript what we want to do is basically on visibility change which is an event listener and on blur and maybe even like then we can say when the browser when the tab is focused we can change the the active state of the page so why don't we go ahead and say well we a document. addevent listener set for visibility change and we'll go ahead I'm just going to go ahead and copy this so we can kind of add this what this is doing is we're just saying with visibility change will is is page is page is active is equal to if the document is not hidden um and if it's not if page active is false and there is a window ey wire then we'll go ahead and set inactive this is the new method that we're going to create right now so let's go ahead and in our um toggle switch we'll go ahead and create a new uh is in or set in active is I believe what we called it so we have public function set inactive and here's where we're just going to remove the user from the page from their Mouse positions from the user ID from the colors if that person runs that based off of this JavaScript again this is a great way to kind of say hey here's my JavaScript file I'm watching for a bunch of stuff we could probably do this in Alpine but I don't want to clutter it up too much and we have this file ready for us and since we're already checking for the cursor we're just saying if this page is not active we want to run that live wire method so um we have set inactive and what we want to do is we want to unset want to unset this mouse positions for this user ID and we want to update the active user account because we want to remove them and then why don't we also broadcast that Mouse move because now we're we're broadcasting it to move it so we that should be the case because we want to broadca cast the um we're not broadcasting the color here because we're not we're not necessarily setting it but we do want to set the position of null I guess we could broadcast the color of n but we're already kind of doing that with the user ID on the page so we can go ahead and send that to others perfect this looks correct because we're basically just saying we want to remove the user ID or we want to remove the position that is active to this user ID so we want to set inactive okay let's go ahead and refresh this looks like I have some incorrect Mouse moved new mouse moved we have the user ID huh two others there we go undefined array key color so we can just set color to null okay we have one always switch it one switch it one now there's two switch it one now there's two over here perfect okay that looks like it's working correctly but now we actually need to start displaying the cursor on the page because we still have the coordinates we still have everything ready to go but now how do we start displaying the cursor now I'm just going to copy and paste everything that I've done for this but I'll walk us through it and again the GitHub repo is in the description below so make sure to check that out but basically what we want to do is with that cursor now we want to just display that and we're going to be using Alpine JS to do this first off what I'm going to be kind of pasting in is what I found was after deploying this to production because we're checking and emitting a broadcast every single time the cursor moves there's a lot that it needs to kind of account for there's a little bit little bit of lag the cursor movement looks very choppy so I created this JavaScript to basically smooth out the cursor so we're setting a smooth cursor variable and when this Alpine component is initiated we're basically watching the cursors and setting those values to the smooth cursor's value now what this is doing is for every it's basically just looping through it and animating those specific cursors kind of give just a little bit of DeLay So that there is a more smooth and fluid movement for those cursors using some animation frames so again all of this is in the GitHub repository down below and now that we have this app.css for the cursor dot what we're doing here in our toggle is we're setting the background color for that cursor based off of the user colors that we're uh entangling with this wire. user colors array so now we can see that curse and you can s of see like the smooth fluidity that this provides so if I was to pull up Safari for example and we'll say build free. test now we also see this across multiple browsers so if I was to say uh let's we go ahead and bring this down here so now we have this broadcasted to every single instance of this browser that is accepting this it works perfectly fine okay here's some bonus content where I'm actually going to deploy what we just built to Lille Forge because it makes it incredibly easy to do so so I already have this domain set up where I'm just going to be using reverb. josh.com it's a Lille application and we're going to go ahead and add our site and what this is doing is basically just creating a new site on our server I already had this server set up on hetner and this is actually not even hosted in the US so this is a EU header server I'm going to use a git repository for the one I just uploaded and that's Josh Siri SLU Reverb with me so we'll go ahead and use that build RB with me go ahead and refresh it so we have the branches available for us we won't use a database and we'll go ahead and install the composer dependencies and we'll say install repository now once that running all we have to do is there's going to be a button available for us to turn on reverb for this site for our server and then we just have to make sure that we have mpm install mpm run Dev ready to go and we should be good to go because I've already set up the DNS records for reverb. josh.com it should be a lot quicker and we can do this real time so real time for a real- Time application okay so it looks like everything is working properly so we'll take a look at our deployments just to be sure but we'll go ahead and say mpm install uh mpm uh run build so we'll update that and let's go ahead and deploy now okay so it's adding the composer require composer dependencies and looks like it ran mpm run build there so looks like we're good to go and then in our application here's where we should be able to turn on um let's go ahead and refresh this now we can turn on larel reverb so we just let's set this up yeah we'll say th concurrent connections if you are watching this and it's broken this is probably the reason I probably I can set this my header box is capable of doing a lot more well we'll just say a th for now once that's turned on it's going to enable and basically set up your server for the recommended requirements for Reverb if you don't do that uh you can go ahead and go or if you don't use Lal Forge for whatever reason it makes it incredibly easy you can read the doc and there's a whole running Reverb and production section which basically just says hey here's the recommended settings to use Reverb in production so looks like that's all good to go you can see here that it set up a new deployment script to restart Reverb every time we deployed this uh this site as well as in our server we should see a new Damon um to basically run Reverb with the ws. Josh Siri DNS so I did set up all that DNS so it should be ready to go for us so in our site I'll go ahead and deploy just in case there any changes it shouldn't need to be redeployed but we'll go ahead and deploy anyways and then let's see what happens okay deployed and pull this up and pull this up in safari so it's a separate browser you can see here this is running live in production so we have this toggle switch that has been turned on and off by this separate Mouse this separate cursor that we see on these screens if I was to go ahead and switch screens all sudden you can see uh where this is being shown so hopefully this is a great primer a simple look into what web sockets with larvo Reverb and Echo and broadcasting all can look for you in your application but also more in-depth look as to how you can build something pretty extraordinary with just a little bit of JavaScript with some Alpine JS some live wire and larvo Reverb it's all about making realtime use cases for your application [Music]

Channel: Laravel

Views: 8,177

Keywords: Laravel, Laravel Reverb, WebSocket server, LiveWire, Volt class API, Laravel tutorial, Laravel live coding, PHP tutorial, building real-time apps, Laravel for beginners, Laravel LiveWire, Laravel Echo, WebSocket tutorial, Laravel broadcasting, coding tutorial, software development, full stack development, live coding session, real-time web apps, PHP development, Laravel deployment, coding along, Laravel Forge, front-end development, back-end development, real-time app

Id: ceOaI0O_LSA

Length: 67min 48sec (4068 seconds)

Published: Tue Jul 09 2024