Quick to implement Laravel Websocket

In your Laravel project, edit .env files like below


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', ''),
            '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) => {

Then run the below command

npm run dev

After that, add the below code to your view file

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

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


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;

     * 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://"
    ProxyPassReverse "/app/" "ws://"

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

Leave a Reply