In this article, I will introduce the simplest integration of Realtime, after many learning and optimization in the most effective way.
Technologies used in the article:
- Backend Laravel 6x
- Fronent VueJS 2x
- GraphQL - Lighthouse (A framework for serving GraphQL from Laravel)
- Pusher Channels
I will skip the steps to installLaravel + VueJS and to registerPusher, you can learn how to set up at the paths I quoted above.
#Fontend VueJS
I will guide the setup on the fontend VueJS side.
Install the support package from the pusher + laravel echo side provided.
npminstall--save laravel-echo pusher-jsHere I install a package namedvue-echo
.
npminstallvue-echo-laravel--saveNext add the below configs to themain.js,app.js orbootstrap.js file (depending on your file).
importPusherfrom"pusher-js";importVueEchofrom"vue-echo-laravel";// Enable pusher logging - don't include this in productionPusher.logToConsole=true;Vue.use(VueEcho,{broadcaster:"pusher",key:"xxxxxxxxxxxxx",cluster:"ap3",forceTLS:true,authEndpoint:"/broadcasting/auth",auth:{headers:{// authorization: token ? `Bearer ${token}` : null // Enabled - If you are using Bearer for authentication}}});This is the content I added to my project
Once vue-echo is registered, every vue instance is able to subscribe to channels and listen to events through the this.$echo property on the connection you specified earlier.
varvm=newVue({mounted(){// Listen for the 'NewMessageNotification' event in the 'synchronized' private channelthis.$echo.private('synchronized').listen('NewMessageNotification',(payload)=>{console.log(payload);});}});This is the content I added to my project
#Backend Laravel
Terminal
composer require pusher/pusher-php-serverAtconfig/app.php you need to unhide or add this line
App\Providers\BroadcastServiceProvider::class
Finally, you will need to change your broadcast driver to pusher in your.env file:
PUSHER_APP_ID=xxxxxxxxPUSHER_APP_KEY=xxxxxxxxxxPUSHER_APP_SECRET=xxxxxxxxxxxPUSHER_APP_CLUSTER=xxxxxxBROADCAST_DRIVER=pusherCACHE_DRIVER=fileQUEUE_CONNECTION=syncSESSION_DRIVER=fileSESSION_LIFETIME=120#Create Event - From Backend
I will quickly create an Events namedNewMessageNotification atapp\Events
<?phpnamespaceApp\Events;useIlluminate\Broadcasting\Channel;useIlluminate\Broadcasting\InteractsWithSockets;useIlluminate\Broadcasting\PresenceChannel;useIlluminate\Broadcasting\PrivateChannel;useIlluminate\Contracts\Broadcasting\ShouldBroadcast;useIlluminate\Foundation\Events\Dispatchable;useIlluminate\Queue\SerializesModels;useIlluminate\Contracts\Broadcasting\ShouldBroadcastNow;classNewMessageNotificationimplementsShouldBroadcastNow{useDispatchable,InteractsWithSockets,SerializesModels;public$message;/** * Create a new event instance. * * @return void */publicfunction__construct($message){$this->message=$message;}/** * Get the channels the event should broadcast on. * * @return \Illuminate\Broadcasting\Channel|array */publicfunctionbroadcastOn(){returnnewPrivateChannel('synchronized');}}Register channels atroutes/channels.php withreturn Auth::check(); . I force theClient-side to log in to listen to the event.
Broadcast::channel('synchronized',function($user){returnAuth::check();});
Check the dashboard in Pusher, if successful connection will be displayed.
I'm going to use the Debug console function in Pusher to do the event quick send.
Or you can also use the Laravel Backend to post events, I will guide you in the following post, orrefer here.
And this is the result
Have any questions, please comment below. Good luck.
Top comments(1)
For further actions, you may consider blocking this person and/orreporting abuse
