DEV Community

David Nguyen
David Nguyen

Posted on

How I built Realtime in Laravel + VueJS

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


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) => {
Enter fullscreen mode Exit fullscreen mode

This is the content I added to my project

#Backend Laravel


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

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

Enter fullscreen mode Exit fullscreen mode


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


Enter fullscreen mode Exit fullscreen mode

#Create Event - From Backend

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



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


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)

hausaigon profile image
Hau Saigon

gà gà gà