Blog

In your Laravel project, edit .env files like below

BROADCAST_DRIVER=pusher
PUSHER_APP_ID=app-id
PUSHER_APP_KEY=app-key
PUSHER_APP_SECRET=app-secret
PUSHER_APP_CLUSTER=mt1
PUSHER_HOST="127.0.0.1"
PUSHER_PORT=6001

In your Laravel project, edit config/broadcasting.php files like below

'connections' => [
    
    // ...
    
    'pusher' => [
        'driver' => 'pusher',
        'key' => env('PUSHER_APP_KEY', 'app-key'),
        'secret' => env('PUSHER_APP_SECRET', 'app-secret'),
        'app_id' => env('PUSHER_APP_ID', 'app-id'),
        'options' => [
            'host' => env('PUSHER_HOST', '127.0.0.1'),
            'port' => env('PUSHER_PORT', 6001),
            'scheme' => env('PUSHER_SCHEME', 'http'),
            'encrypted' => true,
            'useTLS' => env('PUSHER_SCHEME') === 'https',
        ],
    ],
],

Then run the below command

npm install
npm install pusher-js

Then edit file resources/js/bootstrap.js like below

 const PusherJS = require('pusher-js');

 let client = new PusherJS('app-key', {
     wsHost: window.PUSHER_HOST,
     wsPort: parseInt(window.PUSHER_PORT),
     forceTLS: false,
     encrypted: true,
     disableStats: true,
     enabledTransports: ['ws', 'wss'],
 });

 client.subscribe(window.SUBSCRIBER).bind('App\\Events\\EventViewed', (data) => {
    console.log(data);
 });

Then run the below command

npm run dev

After that, add the below code to your view file

 <script>
   window.PUSHER_HOST = "{{env('PUSHER_HOST')}}";
   window.PUSHER_PORT = "{{env('PUSHER_PORT')}}";
   window.SUBSCRIBER = "subscriber_id";
 </script>
 <script src="{{ url('/js/app.js') }}" type="text/javascript"></script>

Add a file app/Events/EventViewed.php with the below code

<?php

namespace App\Events;

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

class EventViewed implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public $message;

    public function __construct(&$message)
    {
        $this->message = &$message;
        $this->dontBroadcastToCurrentUser();
    }

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

In the above case, use dynamic, subscriber_id depending on your application structure.

You need to call above event depending on your condition

use App\Events\EventViewed;
event(new EventViewed("HI"));

After that, add docker image using the below command

docker run -d --restart always -p 6001:6001 quay.io/soketi/pws:latest-16-alpine

The official document link is here

For Apache SSL proxy, use the below code in your Apache config file

<IfModule mod_proxy.c>
    ProxyPass "/app/" "ws://127.0.0.1:6001/app/"
    ProxyPassReverse "/app/" "ws://127.0.0.1:6001/app/"
</IfModule>

Note: Above Apache config, we can not use the app/ as route URL