Communicate with laravel websockets from another laravel app (using sanctum token)

Question

I have one laravel project that has websockets server and has api build with sanctum. I have another laravel app that authenticates with first laravel sanctum token. now I need to establish communication between my first laravel app and second laravel client app via websockets. I can communicate with users inside the first app, but I need my clients who are using sanctum token also can communicate with the first app

First app: http://127.0.0.1:8000 Second app: http://127.0.0.1:8001

First app Chat Event:

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

  public $message;
  public $user_id;

  /**
   * Create a new event instance.
   *
   * @return void
   */
  public function __construct($user_id, $message)
  {
      $this->user_id = $user_id;
      $this->message = $message;
  }

  /**
   * Get the channels the event should broadcast on.
   *
   * @return \Illuminate\Broadcasting\Channel|array
   */
  public function broadcastOn()
  {
      return new PrivateChannel("chat.".$this->user_id);
  }
}

First app 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,
    ],
],

/*
 * This class is responsible for finding the apps. The default provider
 * will use the apps defined in this config file.
 *
 * You can create a custom provider by implementing the
 * `AppProvider` interface.
 */
'app_provider' => BeyondCode\LaravelWebSockets\Apps\ConfigAppProvider::class,

/*
 * This array contains the hosts of which you want to allow incoming requests.
 * Leave this empty if you want to accept requests from all hosts.
 */
'allowed_origins' => [
    //
],

/*
 * The maximum request size in kilobytes that is allowed for an incoming WebSocket request.
 */
'max_request_size_in_kb' => 250,

/*
 * This path will be used to register the necessary routes for the package.
 */
'path' => 'laravel-websockets',

/*
 * Dashboard Routes Middleware
 *
 * These middleware will be assigned to every dashboard route, giving you
 * the chance to add your own middleware to this list or change any of
 * the existing middleware. Or, you can simply stick with this list.
 */
'middleware' => [
    'web',
    Authorize::class,
],

First app 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' => true,
            'host' => '127.0.0.1',
            'port' => 6001,
            'scheme' => 'http'
        ],
        'client_options' => [
            // Guzzle client options: https://docs.guzzlephp.org/en/stable/request-options.html
        ],
    ],

    'ably' => [
        'driver' => 'ably',
        'key' => env('ABLY_KEY'),
    ],

    'redis' => [
        'driver' => 'redis',
        'connection' => 'default',
    ],

    'log' => [
        'driver' => 'log',
    ],

    'null' => [
        'driver' => 'null',
    ],

],

NOW the Second app bootstrap.js

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,
  forceTLS: false,
  wsHost: process.env.MIX_WS_HOST,
  wsPort: process.env.MIX_WS_PORT,
  disableStats: true,
  authEndpoint: 'http://127.0.0.1:8000/api/broadcasting/auth',
// authorizer: (channel, options) => {
//     //console.log(options);
//     return {
//         authorize: (socketId, callback) => {
//             axios({
//                 method: "POST",
//                 url: "http://127.0.0.1:8000/api/broadcasting/auth",
//                 headers: {
//                     Authorization: `Bearer 18|0A7cKFw9LqIDSSzcajlvJlBZHWKnp1nu1DyrmFXm`,
//                 },
//                 data: {
//                     socket_id: socketId,
//                     channel_name: channel.name,
//                 },
//             })
//                 .then((response) => {
//                     callback(false, response.data);
//                 })
//                 .catch((error) => {
//                     callback(true, error);
//                 });
//         },
//     };
// },
  auth: {
      headers: {
          Authorization: 'Bearer 18|0A7cKFw9LqIDSSzcajlvJlBZHWKnp1nu1DyrmFXm',
          Accept: "application/json",
      },
  }
,});

The second app gives 500

POST http://127.0.0.1:8000/api/broadcasting/auth 500 (Internal Server Error)

if i use POST http://127.0.0.1:8000/broadcasting/auth

Access to XMLHttpRequest at 'http://127.0.0.1:8000/broadcasting/auth' from origin 'http://127.0.0.1:8001' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Do any one have any solution ? it will be helpful

Thanks

Communicate with laravel websockets from another laravel app (using sanctum token)

0 Answers0