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 实现的主要内容,如果未能解决你的问题,请参考以下文章
Quasar 2.2.2、Vue 3 和 Firebase:如何从路由器访问 GlobalProperties
什么 Quasar 能做 Bootstrap+Vue Js 做不到的?
尝试使用 docker 构建 vue/quasar/node 应用程序时出错:“命令 '/bin/sh -c quasar build' 返回非零代码:1”