I am facing a frustrating issue with the BroadcastException in PusherBroadcaster.php (line 106) error while using Laravel 5.5 and Vue 2.0. Despite trying various solutions, I have been unable to resolve it. Desperately seeking assistance. Here's what I have done so far:
.env
PUSHER_APP_ID=403348
PUSHER_APP_KEY=691857f3d69337b25cf9
PUSHER_APP_SECRET=f36dc5c5114067449338
broadcasting.php
'pusher' => [
'driver' => 'pusher',
'key' => env('PUSHER_APP_KEY'),
'secret' => env('PUSHER_APP_SECRET'),
'app_id' => env('PUSHER_APP_ID'),
'options' => [
'cluster' => 'us2',
'encrypted' => true
],
],
bootstrap.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import VueAutosize from 'vue-autosize';
import axios from 'axios';
import Form from './utilities/Form';
import Echo from "laravel-echo";
import Pusher from 'pusher-js';
window.Vue = Vue;
window.Pusher = require('pusher-js');
Vue.use(VueRouter);
Vue.use(VueAutosize)
window.axios = axios;
window.axios.defaults.headers.common = {
'X-Requested-With': 'XMLHttpRequest'
};
window.Form = Form;
window.Echo = new Echo({
broadcaster: 'pusher',
key: '691857f3d69337b25cf9',
cluster: 'us2',
encrypted: true,
});
NotificationEvent.php
class NotificationEvent implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public function broadcastOn()
{
return new Channel('notifications');
}
}
app.js
import './bootstrap';
import router from './routes';
new Vue({
el: '#app',
router,
created() {
Echo.channel('notifications')
.listen('NotificationEvent', (e) => {
alert('adada');
});
}
});
web.php
Route::get('notification', function() {
event(new NotificationEvent());
});
The error occurs when accessing /notification :