Im using quasar framework and trying to add laravel-echo with socket.io. Socket server is up and running and broadcasting event with no issues.
But for some reason my client side does not want to connect it keeps giving me error that cannot read property 'channel' of undefined.
My Setup
package.json
"laravel-echo": "^1.5.4",
"quasar": "^1.0.5",
"socket.io-client": "^2.2.0",
boot/laravel-echo.js
import Echo from 'laravel-echo'
window.io = require('socket.io-client')
const echo = new Echo({
broadcaster: 'socket-io',
host: window.location.hostname + ':6001'
})
export default ({ Vue }) => {
Vue.prototype.$echo = echo
}
quasar.conf.js
boot: [
'axios',
'laravel-echo'
],
index.vue
created () {
this.listen()
},
methods: {
listen() {
this.$echo.channel('test').listen('event', payload => {
console.log('THIS IS THE PAYLOAD: ' + payload)
})
}
}
Browser
[Vue warn]: Error in created hook: "TypeError: Cannot read property 'channel' of undefined"
found in
---> <AllEvents>
<QPage>
<DashboardIndex> at src/pages/dashboard/Index.vue
<QPageContainer>
Socket.io
L A R A V E L E C H O S E R V E R
version 1.5.6
⚠ Starting server in DEV mode...
✔ Running at localhost on port 6001
✔ Channels are ready.
✔ Listening for http events...
✔ Listening for redis events...
Server ready!
Channel: test
Event: event
I have even change the code to the same as in the laravel documentation (https://laravel.com/docs/5.8/broadcasting#receiving-broadcasts) with window.Echo
import Echo from 'laravel-echo'
window.io = require('socket.io-client')
window.Echo = new Echo({
broadcaster: 'socket-io',
host: window.location.hostname + ':6001'
})
export default async ({ Vue }) => {
}
and trying to connect to channel
window.Echo.channel('test').listen('event', payload => {
console.log('Here')
console.log(payload)
})
but still getting the same error on the browser, not sure what im missing here, any help would be greatly appreciated.
