sdwru/Laravel-websockets-on-Laravel-API-backend+Laravel-Echo-on-Vue.js-front-end-on-different-server-domain-using-private-channel.md

## Laravel-websockets-on-Laravel-API-backend+Laravel-Echo-on-Vue.js-front-end-on-different-server-domain-using-private-channel.md

      
    Raw
  

              Laravel-websockets-on-Laravel-API-backend+Laravel-Echo-on-Vue.js-front-end-on-different-server-domain-using-private-channel.md
            
          
    These are my notes on how I got all the basics working end to end.
Laravel API backend and Vue.js frontend are 2 different servers on different public IP addresses and different domains.  I am using pure Vue.js on the front end.  Most instructions assume Laravel Vue.js is being used which is structured slightly different with different file names and directories.

Laravel API backend domain name (api.somedomain.com)
Vue.js frontend domain name (client.somedomain.com)

No database is needed for any of this to work using sync queue.  That is only needed in production if/when you use a database queue.

Laravel API backend server (api.somedomain.com)

composer require beyondcode/laravel-websockets
php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="config"

Make sure App\Providers\BroadcastServiceProvider::class is uncommented
config/app.php
'providers' => [
  ...
  App\Providers\BroadcastServiceProvider::class,
],
.env
BROADCAST_DRIVER=pusher
QUEUE_CONNECTION=sync
PUSHER_APP_ID=testapp
PUSHER_APP_KEY=websocketkey
PUSHER_APP_SECRET=somethingsecret
PUSHER_APP_CLUSTER=mt1
config/broadcasting.php
'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' => false,
            'encrypted' => true,
            'host' => '127.0.0.1',
            'port' => 6001,
            'scheme' => 'http',
        ],
    ],
    ...
config/websockets.php
'apps' => [
      [
          'id' => env('PUSHER_APP_ID'),
          'name' => env('APP_NAME'),
          'key' => env('PUSHER_APP_KEY'),
          'secret' => env('PUSHER_APP_SECRET'),
          'path' => env('PUSHER_APP_PATH'),
          'capacity' => null,
          'enable_client_messages' => true,
          'enable_statistics' => true,
      ],
  ],
routes/api.php
Route::get('test', function () {
    event(new App\Events\Test());
    return "Event has been sent!";
});
routes/channels.php
// This is only for testing purposes
Broadcast::channel('testchannel', function ($user) {
    return true;
}); 

// This is probably closer to what most would use in production
Broadcast::channel('user.{id}', function ($user, $id) {
    //return true if api user is authenticated
    return (int) $user->id === (int) $id;
});
app/Http/Middelware/VerifyCsrfToken.php
protected $except = [
    'broadcasting/auth',
];
app/Events/Test.php
<?php

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;

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

    public function __construct()
    {
      //
    }

    public function broadcastOn()
    {
        return new PrivateChannel('testchannel');
    }
}
Run websockets server on Laravel api backend

php artisan websockets:serve

Vue.js frontend (client.somedomain.com)

npm install --save laravel-echo pusher-js
.env
Note: The variable MUST be prefixed with VUE_APP_
https://cli.vuejs.org/guide/mode-and-env.html#modes
VUE_APP_PUSHER_APP_KEY='websocketkey'
Add Echo globally.  In laravel vue that file is usually called bootstrap.js.  In pure Vue.js it is called main.js

main.js
import Echo from 'laravel-echo'
window.Pusher = require('pusher-js')

// This assumes you have already saved your bearer token in your browsers local storage
const token = localStorage.getItem('user-token')

window.Echo = new Echo({
  broadcaster: 'pusher',
  key: process.env.VUE_APP_MIX_PUSHER_APP_KEY,
  wsHost: 'api.somedomain.com',
  authEndpoint: 'http://api.somedomain.com/broadcasting/auth',
  encrypted: true,
  forceTLS: false,
  wsPort: 6001,
  wssPort: 6001,
  disableStats: true,
  enabledTransports: ['ws', 'wss'],
  auth: {
    headers: {
      authorization: 'Bearer ' + token,
    }
  }
})
Add the Echo channel to whichever *.vue file we want to test this on

src/App.vue
...
created() {
  window.Echo.private('testchannel')
      .listen('Test', (e) => {
          console.log('test successful ' + e)
  })

All done.  Now open your src/App.vue Single Page App in a chrome/firefox browser with the developer/inspect console window opened.
In a separate browser tab/window browse to http://api.somedomain.com/test to fire the test event. You should see "test successful" showing up in your SPA page developer console.
The end.