Quasar Vue Socket.io Laravel-Echo实施

Question

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.

Answer 1

:( uh man, what a noob,

Should be

broadcaster: 'socket.io',

and not

broadcaster: 'socket-io',