Quasar Vue Socket.io Laravel-Echo 实现

Posted

技术标签:

【中文标题】Quasar Vue Socket.io Laravel-Echo 实现【英文标题】:Quasar Vue Socket.io Laravel-Echo Implementation 【发布时间】:2019-12-20 16:54:38 【问题描述】:

我正在使用 quasar 框架并尝试在 socket.io 中添加 laravel-echo。套接字服务器已启动并正在运行并且广播事件没有问题。

但由于某种原因,我的客户端不想连接它一直给我错误,无法读取未定义的属性“通道”。

我的设置

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

浏览器

[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

我什至使用 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)
)

但在浏览器上仍然出现相同的错误,不确定我在这里缺少什么,任何帮助将不胜感激。

【问题讨论】:

【参考方案1】:

:(哦,伙计,真是个菜鸟,

应该是

broadcaster: 'socket.io',

而不是

broadcaster: 'socket-io',

【讨论】:

以上是关于Quasar Vue Socket.io Laravel-Echo 实现的主要内容,如果未能解决你的问题,请参考以下文章

Vue3 的 Quasar 单元测试

Vue-Socket.io

Quasar 2.2.2、Vue 3 和 Firebase:如何从路由器访问 GlobalProperties

什么 Quasar 能做 Bootstrap+Vue Js 做不到的?

尝试使用 docker 构建 vue/quasar/node 应用程序时出错:“命令 '/bin/sh -c quasar build' 返回非零代码:1”

在 vue3 / quasar2 中访问 $route