Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Help
    5
    14
    978
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • metalsadman
      metalsadman last edited by

      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.

      1 Reply Last reply Reply Quote 0
      • Hawkeye64
        Hawkeye64 last edited by

        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

        1 Reply Last reply Reply Quote 0
        • syflex
          syflex last edited by

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

          1 Reply Last reply Reply Quote 0
          • syflex
            syflex last edited by

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

            thank you

            1 Reply Last reply Reply Quote 0
            • syflex
              syflex last edited by

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

              thank you

              1 Reply Last reply Reply Quote 1
              • S
                snezhkois last edited by

                @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

                1 Reply Last reply Reply Quote 1
                • L
                  louwki last edited by

                  @snezhkois im getting the same?

                  1 Reply Last reply Reply Quote 0
                  • metalsadman
                    metalsadman last edited by

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

                    1 Reply Last reply Reply Quote 0
                    • L
                      louwki last edited by

                      @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

                      1 Reply Last reply Reply Quote 0
                      • metalsadman
                        metalsadman last edited by

                        @louwki follow what @Hawkeye64 posted.

                        1 Reply Last reply Reply Quote 0
                        • L
                          louwki last edited by 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
                          1 Reply Last reply Reply Quote 0
                          • metalsadman
                            metalsadman last edited by

                            If window did work for you then just do that.

                            1 Reply Last reply Reply Quote 0
                            • L
                              louwki last edited by

                              @metalsadman
                              Ah man what a noob

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

                              Thanks for all the help

                              1 Reply Last reply Reply Quote 0
                              • First post
                                Last post