10 - Broadcasting Events

[Music] today's web applications are dynamic users expect to be informed in real time about certain events and actions for that reason many modern web applications use websockets to implement real-time live updating user interfaces when some data is updated on the server a message is typically sent over a websocket connection to be handled by the client for example a user performs an action that takes several minutes to finish the server does the work in the background and then broadcasts an event over a websocket connection the front-end receives this event and displays a message to the user telling them that the action was performed successfully to assist you in building these types of features laravel makes it easy to broadcast your server-side laravel events over a websocket connection the core concepts behind broadcasting are simple clients connect to name channels on the front-end while your laravel application broadcasts event to these channels on the backend by default laravel includes two server side broadcasting drivers for you to choose from the first one is pusher channels and the second one is aptly however community driven packages such as laravel websockets provide additional broadcasting drivers that do not require commercial broadcasting providers in this video we are going to use pusher so go ahead and run composer require pusher pusher php server to install the pusher composer package once the command finishes you should configure your pusher credentials in your environment file you will need to configure a pusher app id pusher app key pusher app secret and pusher app cluster you will also need to change your broadcast driver variable to pusher finally make sure to uncomment the broadcast service provider in your config app.php file it's commented by default in every fresh laravel application now that the server side is configured let's prepare the client side to receive broadcasts by installing the laravel echo and pusher js npm packages go ahead and run npm install laravel echo pusher.js on your machine once echo is installed you are ready to create a fresh echo instance in your application's javascript fresh laravel applications has this already in place at the bottom of the resources js put strap to js file make sure it's not commented though finally you will need to compile the application's assets by running the npm run dev command now we are all set to start using event broadcasting in laravel we are going to use the order placed event from the previous video to demonstrate we will use two routes for this demo one route to display our welcome view and another to dispatch the order placed event to instruct laravel to broadcast this event we need to implement the should broadcast interface on the event class this interface requires our event class to define a broadcast on method this method is responsible for returning the channels that the event should broadcast on in our case we will broadcast on a private channel with the name that matches the order id we use a private channel because we only want the creator of the order to be able to view status updates we may define our channel authorization rules in our applications routes slash channels.php file to verify that any user attempting to lessen on the private orders.id channel is actually the creator of the order we may use the broadcast channel method this method accepts two arguments first the name of the channel and second a call pack which returns through all falls indicating whether the user is authorized to listen on this channel all authorization callbacks receive the currently authenticated user add their first argument and any additional wildcard parameters add their subsequent arguments in this example we are using the order id placeholder to indicate that the id portion of the channel name is a wildcard and now let's move to the front end part of our application and use laravel echo to listen to events on the orders channel to do that we will need to call echoprivate inside our application javascript to subscribe to the channel then we may use the lesson method to lesson for the order placed event as you may have noticed laravel will broadcast the event using the events class name since our event class is called order placed we may listen to an event with the same name in laravel echo now let's test our implementation and make sure everything works as expected we will visit the root route of our application which displays the welcome view where we have echo listening to the private channel let's open the browser console here so we can see the order data logged once the event is fired now before we start pushing events let's start a worker and we will do that by calling php arts and queue work and finally let's point our browser to the event endpoint to trigger the event if we hit enter we can see that echo has lessened to the order placed event on the orders.1 private channel and was able to extract the order data you need to remember that when using a private channel a user must be authenticated to be able to listen to events on these channels there are also two other types of channels public channels and presence channels you can use public channels to allow any visitor to your website to listen to events and you can use presence channels to allow front ends to display which users are subscribed to these channels in real time this makes it easy to build powerful collaborative application features such as notifying users when another user is viewing the same page or listing the inhabitants of a chatroom there is more to learn about broadcasting laravel so make sure to check the official documentation of the framework to learn all about it and i will leave links in the description down below i will see you in the next video

Channel: Laravel

Views: 7,970

Keywords: laravel

Id: xKru8j9LXjA

Length: 7min 5sec (425 seconds)

Published: Tue Oct 19 2021