DEV Community

David Nguyen
David Nguyen

Posted on

How I built Realtime in Laravel + VueJS

#laravel #vue #graphql #pusher

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:

I will skip the steps to install Laravel + VueJS and to register Pusher, 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.

npm install --save laravel-echo pusher-js
Enter fullscreen mode Exit fullscreen mode

Here I install a package named vue-echo
.

npm install vue-echo-laravel --save
Enter fullscreen mode Exit fullscreen mode

Next add the below configs to the main.js, app.js or bootstrap.js file (depending on your file).

import Pusher from "pusher-js";
import VueEcho from "vue-echo-laravel";

// Enable pusher logging - don't include this in production
Pusher.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
    }
  }
});
Enter fullscreen mode Exit fullscreen mode

This is the content I added to my project

image.png

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.

var vm = new Vue({
    mounted() {
        // Listen for the 'NewMessageNotification' event in the 'synchronized' private channel
        this.$echo.private('synchronized').listen('NewMessageNotification', (payload) => {
            console.log(payload);
        });
    }
});
Enter fullscreen mode Exit fullscreen mode

This is the content I added to my project
image.png

#Backend Laravel

Terminal

composer require pusher/pusher-php-server
Enter fullscreen mode Exit fullscreen mode

At config/app.php you need to unhide or add this line

App\Providers\BroadcastServiceProvider::class
Enter fullscreen mode Exit fullscreen mode

image.png

Finally, you will need to change your broadcast driver to pusher in your .env file:

PUSHER_APP_ID=xxxxxxxx
PUSHER_APP_KEY=xxxxxxxxxx
PUSHER_APP_SECRET=xxxxxxxxxxx
PUSHER_APP_CLUSTER=xxxxxx

BROADCAST_DRIVER=pusher
CACHE_DRIVER=file
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120
Enter fullscreen mode Exit fullscreen mode

#Create Event - From Backend

I will quickly create an Events named NewMessageNotification at app\Events

image.png

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;
use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;

class NewMessageNotification implements ShouldBroadcastNow
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct($message)
    {
        $this->message = $message;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new PrivateChannel('synchronized');
    }

}
Enter fullscreen mode Exit fullscreen mode

Register channels at routes/channels.php withreturn Auth::check(); . I force the Client-side to log in to listen to the event.

Broadcast::channel('synchronized', function ($user) {
    return Auth::check();
});
Enter fullscreen mode Exit fullscreen mode

image.png

Check the dashboard in Pusher, if successful connection will be displayed.

image (1).png

I'm going to use the Debug console function in Pusher to do the event quick send.

image (2).png

Or you can also use the Laravel Backend to post events, I will guide you in the following post, or refer here.

And this is the result
image (3).png

Have any questions, please comment below. Good luck.

Top comments (1)

Collapse
 
hausaigon profile image
Hau Saigon •

gà gà gà

Read next

mdarifulhaque profile image

Getting Started with Laravel: A Beginner's Guide to Query Builder

MD ARIFUL HAQUE -

kyydev profile image

Is VueJs Still Worth It for Beginners in 2024? #VueJs Part 1:Installation

KyDev -

geraldmuvengei06 profile image

Building a Nuxt.js + Vue.js SaaS Starter: Authentication, Payments, and Supabase Made Easy. A nuxt js saas starter

Gerald -

mdarifulhaque profile image

Hidden Gems of Laravel: Lesser-Known Features to Boost Your Development

MD ARIFUL HAQUE -