Quasar Vue Socket.io Laravel-Echo實現

Question

我正在使用類星體框架，並嘗試使用socket.io添加laravel-echo。 套接字服務器已啟動並正在運行，並且廣播事件沒有問題。

但是由於某種原因，我的客戶端不希望連接，這一直給我帶來無法讀取未定義屬性“ channel”的錯誤。

我的設定

package.json

"laravel-echo": "^1.5.4",
"quasar": "^1.0.5",
"socket.io-client": "^2.2.0",

引導/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'
],

索引值

created () {
    this.listen()
},
methods: {
    listen() {
       this.$echo.channel('test').listen('event', payload => {
          console.log('THIS IS THE PAYLOAD: ' + payload)
       })
    }
}

瀏覽器

[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>

套接字

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

我什至使用window.Echo將代碼更改為與laravel文檔（ https://laravel.com/docs/5.8/broadcasting#receiving-broadcasts ）中的代碼相同。

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 }) => {
}

並嘗試連接到頻道

window.Echo.channel('test').listen('event', payload => {
    console.log('Here')
    console.log(payload)
})

但是在瀏覽器上仍然出現相同的錯誤，不確定此處缺少什么，將不勝感激。

Answer 1

:(恩，真是個菜鳥，

應該

broadcaster: 'socket.io',

並不是

broadcaster: 'socket-io',