[laravel-echo] can't get laravel-echo to work properly with Quasar

syflex

please help on configuring Laravel-echo with quasar
what i have done so far:

yarn add laravel-echo
quasar new plugin laravel-echo
add laravel echo on my /quasar.conf.js
then i configured laravel-echo.js as in the bellow image
then i try to listen like this
but i always get this error

i have tried many configuration but it still has not worked.
please what am i doing wrong and if anyone has a better procedure , i can do with some help here.

thank you

metalsadman

have you tried declaring a Vue.prototype for $echo? maybe try to put it after Vue.use(echo) in your plugin ie. Vue.prototype.$echo = echo.

Hawkeye64

laravel-echo.js:

import Echo from 'laravel-echo'

window.io = require('socket.io-client')

const echo = new Echo ({
    broadcaster: 'socket-io',
    host: window.locatin.hostname + ':6001'
})

export default ({Vue}) => {
    Vue.prototype.$echo = echo

Note: I have never used Laravel Echo with Vue., so I am not sure if the instantiation of Echo is correct, I am just going off of your code.

Now, you can use the above in your code with this.$echo

syflex

Wow guys. Thank you very much. I will try and send feedback

syflex

@metalsadman @Hawkeye64 yes it works. i will give more info soon

thank you

syflex

@metalsadman @Hawkeye64 yes it works. i will give more info soon

thank you

snezhkois

@syflex hi

can you show me settings from socket.io-client.js and vue-socket.io.js plugins? I have error this.$echo.channel is undefined

louwki

@snezhkois im getting the same?

metalsadman

@louwki still same setup, only difference is plugins is boot in v1.

louwki

@metalsadman yes im using the boot

When i use

window.Echo = new Echo({
broadcaster: ‘socket.io’,
host: window.location.hostname + ‘:6001’
})

socket io i can see it connects:

[10:09:58 PM] - aCxXlUq9PBMWRh89AAAK joined channel: test

but when i use

const echo = new Echo({
broadcaster: ‘socket-io’,
host: window.location.hostname + ‘:6001’
})

export default async ({ Vue }) => {
Vue.prototype.$echo = echo
}

i get

[Vue warn]: Error in created hook: “TypeError: Cannot read property ‘channel’ of undefined”

So im guessing it is not connecting to the socket server initially

metalsadman

@louwki follow what @Hawkeye64 posted.

louwki

@metalsadman @Hawkeye64
Sorry to be a pain about this but, that is exactly what i am using so it is very strange that it is not working.

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

metalsadman

If window did work for you then just do that.

louwki

@metalsadman
Ah man what a noob

I had
broadcaster: ‘socket-io’
and should be
broadcaster: ‘socket.io’

Thanks for all the help

No More Posting New Topics!

[laravel-echo] can't get laravel-echo to work properly with Quasar