Websockets setup

Existed channels:

• private-team.{current_user_team_id} - You should connect to user channel and authorise it.

Existed broadcasts:

• scripts-request-processed - runs when generated scripts is ready
• video-generation-processed - runs when video generation finished.

Laravel configuration

You need to configure Laravel .env file

LARAVEL_ECHO_SERVER_REDIS_HOST=127.0.0.1
LARAVEL_ECHO_SERVER_PORT=6001
BROADCAST_DRIVER=redis

Configure laravel-echo-server.json file

{
    "authHost": "Laravel-api-endpoint-url",
    "authEndpoint": "/api/broadcasting/auth",
    "clients": [],
    "database": "redis",
    "databaseConfig": {
        "redis": {
            "host": "localhost",
            "port": 6379
        },
        "sqlite": {
            "databasePath": "/database/laravel-echo-server.sqlite"
        }
    },
    "devMode": true,
    "host": "localhost",
    "port": "6001",
    "ipv6": false,
    "protocol": "http",
    "socketio": {
        "transports": ["websocket", "polling"]
    },
    "secureOptions": 67108864,
    "sslCertPath": "",
    "sslKeyPath": "",
    "sslCertChainPath": "",
    "sslPassphrase": "",
    "subscribers": {
        "http": true,
        "redis": true
    },
    "apiOriginAllow":{
        "allowCors" : true,
        "allowOrigin" : "*",
        "allowMethods" : "GET, POST",
        "allowHeaders" : "Origin, Content-Type, X-Auth-Token, X-Requested-With, Accept, Authorization, X-CSRF-TOKEN, X-Socket-Id"
    }
}

Start the laravel echo server

    laravel-echo-server start

Then you need to run queues with command

    php artisan queue:work

Laravel echo Integration Documentation

Overview

Here provided simple example of listening for private channels.

import Echo from 'laravel-echo'
import io from 'socket.io-client'

<script>

    window.io = io
    var echo = new Echo({
      broadcaster: 'socket.io',
      host: process.env.BACKEND_URL,  // your Laravel Echo Server address
      auth: {
        headers: {
          Authorization: 'Bearer {{ token }}’
        }
      }
    });

    var channel = echo.private('team.{{ current_user_team_id }}’);

    channel.listen('.scripts-request-processed', function (data) {
      console.log(data)
    });

    channel.listen('.video-generation-processed', function (data) {
      console.log(data)
    });

    channel.listen('.feed-processing-started', function (data) {
      console.log(data)
    });

    channel.listen('.feed-processing-ended', function (data) {
      console.log(data)
    });

    channel.listen('.feed-import-count', function (data) {
      console.log(data)
    });

    channel.listen('.brand-status-updated', function (data) {
      console.log(data)
    });

    channel.listen('.feed-import-count', function (data) {
      console.log(data)
    });

</script>

Integration Steps

Follow these steps to integrate Laravel echo into your project:

1. Include Laravel echo Library:

Import the socket.io and laravel-echo to your js file

import Echo from 'laravel-echo'
import io from 'socket.io-client'

1. Initialize Laravel echo:

Initialize the Echo and other configuration options:

  window.io = io
  var echo = new Echo({
    broadcaster: 'socket.io',
    host: process.env.BACKEND_URL,  // your Laravel Echo Server address
    auth: {
      headers: {
        Authorization: 'Bearer {{ token }}’
      }
    }
  });

1. Subscribe to a Channel:

Subscribe to a private channel using the user's team ID:

var channel = echo.private('team.{{ current_user_team_id }}’);

1. Handle Events:

Listen to specific events on the channel. In the provided code, it listens to the 'scripts-request-processed' event and logs the data to the console:

channel.listen('.scripts-request-processed', function (data) {
    console.log(data)
});

channel.listen('.video-generation-processed', function (data) {
  console.log(data)
});

Configuration Options

• host ({{ host }}): Set the endpoint for channel authorization (url to laravel echo server).
• Bearer Token ({{ token }}): Include a valid laravel sanctum token as the Bearer token for authorization.
• User Team ID ({{ current_user_team_id }}): Use the current user's team ID to subscribe to a private channel.

Event Handling

Event: 'scripts-request-processed': Customize the event name and handle the data as needed. In the provided code, it logs the data to the console.