Connect to laravel websocket from an ionic project

Question

`

your text`

Currently I'm trying to connect to laravel websocket 'beyondcode/laravel-websockets' from my ionic project . still theres no connection . ive already ran 'php artisan websocket:serve' so that websocket would run .

can anyone enlighten me more on how to connect to the laravel-websocket from an ionic project.

ionic:

import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

echo() {
console.log("Pusher Service");

const pusher = new Pusher('12345', {
cluster: 'mt1', // Replace with your actual Pusher cluster
});

const echo = new Echo({
 broadcaster: `pusher`,
 wsHost: '192.168.X.X',
wsPort: 6001,
key: 'X',
encrypted: false,
disableStats: true,
forceTLS: false,
enabledTransports: ['ws'],
});
echo.connect()
echo.channel('table').listen('table.created', (e) => {
console.log(e);
});
}

laravel:

`.env

PUSHER_APP_ID=12345
PUSHER_APP_KEY=12345
PUSHER_APP_SECRET=12345
PUSHER_HOST=192.168.X.X
PUSHER_PORT=6001
PUSHER_SCHEME=http
PUSHER_APP_CLUSTER=mt1

```
websocket.php

 
```
'apps' => [
        [
            // 'id' => 'myKey',
            'id' => env('PUSHER_APP_ID'),
            'name' => env('APP_NAME'),
            // 'key' => '12345',
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'path' => env('PUSHER_APP_PATH'),
            'capacity' => null,
            'enable_client_messages' => false,
            'enable_statistics' => true,
            'options' => [
                // 'cluster' => 'mt1', // Replace with your actual Pusher cluster
                'cluster' => env('PUSHER_APP_CLUSTER'),
            ],
        ],
    ],
```

`TableEvent.php
```
public function broadcastAs()
    {
        return 'table.created';
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return array<int, \Illuminate\Broadcasting\Channel>
     */
    public function broadcastOn(): array
    {
        return [
            new Channel('table'),
        ];
    }
```

`broadcasting.php
```
'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'),
                'host' => '127.0.0.1',
                'port' => 6001,
                'scheme' => 'http',
                'encrypted' => false,
                'useTLS' => false,
                'timeout' => 5,
            ],
            'client_options' => [
                // Guzzle client options: https://docs.guzzlephp.org/en/stable/request-options.html
            ],
        ],

```