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



  • 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



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



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

    thank you



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

    thank you



  • @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



  • @snezhkois im getting the same?



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



  • @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



  • @louwki follow what @Hawkeye64 posted.



  • @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


  • If window did work for you then just do that.



  • @metalsadman
    Ah man what a noob

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

    Thanks for all the help


Log in to reply