Description
so when type url 127.0.0.1:8000/laravel-websocket
and hit enter then show dashboard of websocket but when click on connect button then show me such error
http://127.0.0.1:8000/laravel-websockets/auth 403 (Forbidden)
so kindly solve this urgently it
View Code
// here is
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>WebSockets Dashboard</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://js.pusher.com/4.3/pusher.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div class="container" id="app">
<div class="card col-xs-12 mt-4">
<div class="card-header">
<form id="connect" class="form-inline" role="form">
<label class="my-1 mr-2" for="app">App:</label>
<select class="form-control form-control-sm mr-2" name="app" id="app" v-model="app">
<option v-for="app in apps" :value="app">@{{ app.name }}</option>
</select>
<label class="my-1 mr-2" for="app">Port:</label>
<input class="form-control form-control-sm mr-2" v-model="port" placeholder="Port">
<button v-if="! connected" type="submit" @click.prevent="connect" class="mr-2 btn btn-sm btn-primary">
Connect
</button>
<button v-if="connected" type="submit" @click.prevent="disconnect" class="btn btn-sm btn-danger">
Disconnect
</button>
</form>
<div id="status"></div>
</div>
<div class="card-body">
<div v-if="connected && app.statisticsEnabled">
<h4>Realtime Statistics</h4>
<div id="statisticsChart" style="width: 100%; height: 250px;"></div>
</div>
<div v-if="connected">
<h4>Event Creator</h4>
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" v-model="form.channel" placeholder="Channel">
</div>
<div class="col">
<input type="text" class="form-control" v-model="form.event" placeholder="Event">
</div>
</div>
<div class="row mt-3">
<div class="col">
<div class="form-group">
<textarea placeholder="Data" v-model="form.data" class="form-control" id="data"
rows="3"></textarea>
</div>
</div>
</div>
<div class="row text-right">
<div class="col">
<button type="submit" @click.prevent="sendEvent" class="btn btn-sm btn-primary">Send event
</button>
</div>
</div>
</form>
</div>
<h4>Events</h4>
<table id="events" class="table table-striped table-hover">
<thead>
<tr>
<th>Type</th>
<th>Socket</th>
<th>Details</th>
<th>Time</th>
</tr>
</thead>
<tbody>
<tr v-for="log in logs.slice().reverse()">
<td><span class="badge" :class="getBadgeClass(log)">@{{ log.type }}</span></td>
<td>@{{ log.socketId }}</td>
<td>@{{ log.details }}</td>
<td>@{{ log.time }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
connected: false,
chart: null,
pusher: null,
app: null,
port: {{ $port }},
apps: {!! json_encode($apps) !!},
form: {
channel: null,
event: null,
data: null
},
logs: [],
},
mounted() {
this.app = this.apps[0] || null;
},
methods: {
connect() {
const csrfToken = document.head.querySelector('meta[name="csrf-token"]').content;
this.pusher = new Pusher(this.app.key, {
wsHost: this.app.host === null ? window.location.hostname : this.app.host,
wsPort: this.port === null ? 6001 : this.port,
wssPort: this.port === null ? 6001 : this.port,
wsPath: this.app.path === null ? '' : this.app.path,
disableStats: true,
authEndpoint: '{{ url(request()->path().'/auth') }}',
auth: {
headers: {
'X-CSRF-Token': csrfToken,
'X-App-ID': this.app.id
}
},
enabledTransports: ['ws', 'flash']
});
this.pusher.connection.bind('state_change', states => {
$('div#status').text("Channels current state is " + states.current);
});
Make sure your Laravel broadcasting configuration is set up correctly.
1. In your
.envfile, ensure that theBROADCAST_DRIVERis set topusherorredis.
~~~
BROADCAST_DRIVER=pusher
~~~
2. If you are using Pusher, make sure your Pusher credentials are correctly set in the
.envfile.~~~
PUSHER_APP_ID=your-app-id PUSHER_APP_KEY=your-app-key PUSHER_APP_SECRET=your-app-secret PUSHER_APP_CLUSTER=your-app-cluster
~~~
3. Laravel WebSockets Configuration:
Ensure that your Laravel WebSockets configuration is set up correctly. The
routes/websockets.phpfile should be properly configured, and theApp\Providers\BroadcastServiceProvider::classshould be uncommented in theconfig/app.phpfile.
If still it's not resolved, reach back to us through comments.
0 Likes 1 Comment
Waqar Author
sir kindly update me same issue jquery-3.3.1.min.js:2 GET http://127.0.0.1:8000/laravel-websockets/api/anyid/statistics 403 // websocket.php <?php use BeyondCode\LaravelWebSockets\Dashboard\Http\Middleware\Authorize; 'dashboard' => [ 'port' => env('LARAVEL_WEBSOCKETS_PORT', 6001), ], */ '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' => false, 'enable_statistics' => true, 'auth' => true, ], ], */ 'app_provider' => BeyondCode\LaravelWebSockets\Apps\ConfigAppProvider::class, */ 'middleware' => [ 'web', \BeyondCode\LaravelWebSockets\Dashboard\Http\Middleware\Authorize::class, ], //env BROADCAST_DRIVER=pusher PUSHER_APP_ID=1732335 PUSHER_APP_KEY=5b06eae2920384b2f440 PUSHER_APP_SECRET=741d4ab15b733528187f PUSHER_APP_CLUSTER=ap2 PUSHER_APP_ID=anyid PUSHER_APP_KEY=anykey PUSHER_APP_SECRET=anysecret PUSHER_APP_CLUSTER=mtl MIX_PUSHER_APP_KEY= "${PUSHER_APP_KEY}" MIX_PUSHER_APP_CLUSTER= "${PUSHER_APP_CLUSTER}"
it's same look like you are facing authorization issue, so make sure that you are entering the correct credentials of the pusher, also you are using env variable directly which is not recommended, so please make sure that your env values are returning correctly.