Unable to get Real time update on database table change using laravel websockets

I am using Laravel websockets for the first time, i am not able to get the real time update. i created custom form used to save name and address for user, save data in table, and showing the table. i want when any other user fill the form and after submit data in table, front end table should be update automatically using real time laravel websockets. but i found some error, please help me to complete this.
Here is my code files.

.env


    APP_NAME=Laravel
    APP_ENV=local
    APP_KEY=base64:G0y7BHQho3ZTwvL/FVOFZdc22Lz7yyJcnWRATDQu8LE=
    APP_DEBUG=true
    APP_URL=http://localhost
    
    LOG_CHANNEL=stack
    
    DB_CONNECTION=mysql
    DB_HOST=127.0.0.1
    DB_PORT=3306
    DB_DATABASE=testing_websocket
    DB_USERNAME=root
    DB_PASSWORD=
    
    BROADCAST_DRIVER=pusher
    CACHE_DRIVER=file
    QUEUE_CONNECTION=sync
    SESSION_DRIVER=file
    SESSION_LIFETIME=120
    
    REDIS_HOST=127.0.0.1
    REDIS_PASSWORD=null
    REDIS_PORT=6379
    
    MAIL_DRIVER=smtp
    MAIL_HOST=smtp.mailtrap.io
    MAIL_PORT=2525
    MAIL_USERNAME=null
    MAIL_PASSWORD=null
    MAIL_ENCRYPTION=null
    
    AWS_ACCESS_KEY_ID=
    AWS_SECRET_ACCESS_KEY=
    AWS_DEFAULT_REGION=us-east-1
    AWS_BUCKET=
    
    PUSHER_APP_ID=myId
    PUSHER_APP_KEY=myKey
    PUSHER_APP_SECRET=mySecret
    PUSHER_APP_CLUSTER=mt1
    
    MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
    MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

jsbootstrap.js


    window._ = require('lodash');
   
    
    try {
        window.Popper = require('popper.js').default;
        window.$ = window.jQuery = require('jquery');
    
        require('bootstrap');
    } catch (e) {}
    
    
    window.axios = require('axios');
    
    window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
        
    import Echo from 'laravel-echo';
    
    window.Pusher = require('pusher-js');
    
    window.Echo = new Echo({
        broadcaster: 'pusher',
        key: 'myKey',
        wsHost: window.location.hostname,
        wsPort: 6001,
        forceTLS: false,
        disableStats: true,
    });

configapp.php


       AppProvidersBroadcastServiceProvider::class,

configbroadcasting.php


    <?php
    
    return [
    
        /*
        |--------------------------------------------------------------------------
        | Default Broadcaster
        |--------------------------------------------------------------------------
        |
        | This option controls the default broadcaster that will be used by the
        | framework when an event needs to be broadcast. You may set this to
        | any of the connections defined in the "connections" array below.
        |
        | Supported: "pusher", "redis", "log", "null"
        |
        */
    
        'default' => env('BROADCAST_DRIVER', 'null'),
    
        /*
        |--------------------------------------------------------------------------
        | Broadcast Connections
        |--------------------------------------------------------------------------
        |
        | Here you may define all of the broadcast connections that will be used
        | to broadcast events to other systems or over websockets. Samples of
        | each available type of connection are provided inside this array.
        |
        */
    
        'connections' => [
    
            'pusher' => [
                'driver' => 'pusher',
                'key' => env('PUSHER_APP_KEY'),
                'secret' => env('PUSHER_APP_SECRET'),
                'app_id' => env('PUSHER_APP_ID'),
                'options' => [
                    'cluster' => env('PUSHER_APP_CLUSTER'),
                    'useTLS' => true,
                    'host' => '127.0.0.1',
                    'port' => 6001,
                    'scheme' => 'http'
                ],
            ],
    
            'redis' => [
                'driver' => 'redis',
                'connection' => 'default',
            ],
    
            'log' => [
                'driver' => 'log',
            ],
    
            'null' => [
                'driver' => 'null',
            ],
    
        ],
    
    ];

form.blade.php


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Form</title>
    </head>
    <body>
            <form method="POST" action="{{route('FormSubmit')}}">
                {{csrf_field()}}
                Name: <input type="text" name="uname" /> <br>
                Address: <input type="text" name="add" /> <br>
                <input type="submit" name="submit"/>
            </form>
    </body>
    </html>


table.blade.php


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <table border="1">
            <tr>
                <td>
                    Name
                </td>
                <td>
                    Email
                </td>
            </tr>
            @foreach ($data as $print)
               
            <tr>
                <td>
                    {{$print['name']}}
                </td>
                <td>
                    {{$print['address']}}
                </td>
            </tr>
            @endforeach
        </table>
    </body>
    </html>
    
    <script>
        Echo.channel('post')
            .listen('NewUser', (e) => console.log('NewUser: ' + e.name, 'Address:' + e.address));
    </script>

EventsNewUser.php


    <?php
    
    namespace AppEvents;
    
    use AppUser;
    use AppTesting;
    use IlluminateBroadcastingChannel;
    use IlluminateQueueSerializesModels;
    use IlluminateBroadcastingPrivateChannel;
    use IlluminateBroadcastingPresenceChannel;
    use IlluminateFoundationEventsDispatchable;
    use IlluminateBroadcastingInteractsWithSockets;
    use IlluminateContractsBroadcastingShouldBroadcast;
    use IlluminateContractsBroadcastingShouldBroadcastNow;
    
    class NewUser implements ShouldBroadcastNow
    {
        use Dispatchable, InteractsWithSockets, SerializesModels;
    
            public $name;
            public $address;
        /**
         * Create a new event instance.
         *
         * @return void
         */
        public function __construct(Name $name, Address $address)
        {
            $this->name = $name;
            $this->address = $address;
            //
        }
    
        /**
         * Get the channels the event should broadcast on.
         *
         * @return IlluminateBroadcastingChannel|array
         */
        public function broadcastOn(): Channel
        {
            return new Channel('post');
        }
    }


Source: Ask PHP

LEAVE A COMMENT