Học về Real Time Broadcasting với Laravel 8.x Vuejs and Pusher

24th Aug 2021
Table of contents

In this tutorial, i will guide you step by step how to use event broadcasting using pusher and laravel-echo-server in laravel 8 application. Laravel provide event broadcasting topic. event broadcast is a very interesting and it's also easy to implement with pusher specially.

Xem thêm về cài đặt Vue

>> Hướng dẫn học và cài đặt sử dụng Vue in your Laravel 8 app

Buti will give you step by step instruction of how to send real time notification with pusher using laravel Echo in laravel 8 application. In this tutorial i will create a new post, when a new post is created then our broadcast event will be happend. 

Let's start our  laravel broadcast tutorial example from scratch. Hope you will enjoy this  laravel broadcasting tutorial.

You need to just follow few step to done this following thing. so let's follow bellow steps and done as real time notification with laravel.

Step 1: Install Laravel 8

First of all, we need to get fresh Laravel 8 version application using bellow command because we are going from scratch, So open your terminal OR command prompt and run bellow command:

composer create-project --prefer-dist laravel/laravel blog

Step 2: Make auth

Laravel's laravel/ui package provides a quick way to scaffold all of the routes and views you need for authentication using a few simple commands:

composer require laravel/ui --dev

php artisan ui vue --auth

Step 2: Install Pusher

If you are broadcasting your events over Pusher Channels, you should install the Pusher Channels PHP SDK using the Composer package manager: Run this below command.

composer require pusher/pusher-php-server "~4.0"

Step 3:  Install  Larave  Echo

Laravel Echo is a JavaScript library that makes it painless to subscribe to channels and listen for events broadcast by Laravel. You may install Echo via the NPM package manager.

npm install --save laravel-echo pusher-js

After installing it, open config/app.php file and uncomment this following line.



Now open config/broadcasting.php file and make this changes.


'default' => env('BROADCAST_DRIVER', 'pusher'),

Now in laravel 6 everything should be ok. Now we have to connect pusher with Laravel. So go to puhser and create a new app and paste this key to .env file like below. Make sure you have changed broadcast driver log to pusher.




Step 4:  Setup Migration

To create our project migration for our post table, run below command

php artisan make:model Post -m

after doing it open your posts migration file and paste this following code.

Schema::create('posts', function (Blueprint $table) {

Now run php artisan migrate to migrate our table.

php artisan migrate

Step 5:  Setup Route


Route::get('/post', '[email protected]')->name('post')->middleware('auth');
Route::post('/post', '[email protected]')->middleware('auth');

Step 6:  Setup Controller

Now open PostController and paste this following code.


namespace App\Http\Controllers;

use App\Post;
use App\Events\PostCreated;
use Illuminate\Http\Request;

class PostController extends Controller
    public function index()
       return view('post.create');

    public function createPost(Request $request)
        $post = new Post;
        $post->title = $request->title;
        $post->user_id = $request->user_id;

        // broadcast(new PostCreated($post));
        // event(new PostCreated($post));

        return response()->json([
            'message' => 'New post created'

Step 7:  Create Event

Now we have to create our broadcasting event to fire our broadcasting channel. To do it run following command.

php artisan make:event PostCreated

after running this command you will find this file inside app/Events/PostCreated.php path. Open it and paste this code.


namespace App\Events;

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

class PostCreated implements ShouldBroadcast
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $post;

    public function __construct(Post $post)
        $this->post = $post;

    public function broadcastOn()
        return new PrivateChannel('post.created'); 

Now open Post model and paste this following code.


namespace App;

use App\Events\PostCreated;
use Illuminate\Database\Eloquent\Model;

class Post extends Model
    protected $guarded = [];

    protected $dispatchesEvents = [

        'created' => PostCreated::class,

Step 8:  Install Vue dependency and edit configurations

Now, go inside the project folder and install the frontend dependencies using the following command.

npm install

now open this followng file and paste this code. Make an asstes folder inside resources folder and copy js and sass folder inside it. Thats all. We need it to setup our laravel mix.

Read also : Laravel Vue JS CRUD Example With File Upload and Pagination


const mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js/app.js')
    .sass('resources/assets/sass/app.scss', 'public/css/app.css');

now create a PostComponent to create our post and paste this code.


    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Create new post</div>

                    <div class="card-body">
                        <p id="success"></p>
                        <form @submit.prevent="addNewPost">
                            <input type="text" name="title" v-model="newPost">
                            <input type="submit" value="Submit">

    export default {
            return {
              newPost: ''
        methods: {

                var userId = $('meta[name="userId"]').attr('content');

                axios.post('/post',{title: this.newPost, user_id:userId})



now open this file resources/assets/js/bootstrap.js and uncomment this following line of code.


import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: true

now open app.js file and paste this followng code.



window.Vue = require('vue');

Vue.component('post-component', require('./components/PostComponent.vue').default);

const app = new Vue({
    el: '#app',
    created() {
            .listen('PostCreated', (e) => {
                alert(e.post.title + 'Has been published now');

now open channels.php file to setup our private channel. 


Broadcast::channel('post.created', function ($post) {
    info("Load from chanell");
    return (int) auth()->user()->id != (int) $post->user_id;


Step 9:  Setup blade file

Now time to setup our blade file. open resources/layouts/app.php and paste this following code.


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="userId" content="{{ Auth::check() ? Auth::user()->id : '' }}">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('app.name', 'Laravel') }}</title>
    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
    <div id="app">

    <div class="py-4">
    <script src="{{ mix('js/app.js') }}" defer></script>

Now open resources/views/post/create.blade.php file and paste this code. 





Now everything is set to go. Now just we have to compile our all javascript file. so run below command.

npm run dev 


npm run watch

then visit this following url, then you will see a form to create post. Just create a post then you should see the real time message from Laravel Echo and Pusher.


Hope you enjoy this tutorial and hope it will help you to learn Laravel Broadcasting event to create real time notification system.

Bạn thấy bài viết này như thế nào?
0 reactions

Add new comment

Enter the characters shown in the image.
Câu nói tâm đắc: “Điều tuyệt với nhất trong cuộc sống là làm được những việc mà người khác tin là không thể!”

Related Articles

Hello, mình trở lại với bài hướng dẫn dựng môi trường để phát triển Laravel với Nginx và MongoDB bằng Laradock.

Đầu tiên, các bạn nên có một project Laravel, nếu chưa có thì có thể clone project laravel mẫu tại đường dẫn. Đây là cấu trúc thư mục của project laravel mẫu mà mình clone về.

Sẽ có một vài trường hợp ở localhost chúng ta cần đến https, tuy nhiên để có được https hơi “xịn” một chút với chứng chỉ SSL

Đến đây thì mọi việc rất dễ dàng. Trong file chính của project, hãy thêm dòng này vào:

Một trong số 4 tính chất đặc trưng chung của các ngôn ngữ lập trình hướng đối tượng (OOP) như C++, C#, Java, Objective-C