问下 Laravel 广播系统，是不是要用 Vue 模板，blade 是怎么弄的？

我已经安装了laravel-echo-server 也start起来了，然后queue_connection 设置成redis了，
然后我创建了一个事件，

public function broadcastOn()
{
        return new Channel('blog'.$this->users->id);
}

发布一个广播，然后在一个页面比如hello.blade.php页面

然后查看console那一栏，发现提示 Uncaught ReferenceError: Echo is not defined ，我已经在bootstrap.js后面加上了，
import Echo from 'laravel-echo'

window.io = require('socket.io-client');
window.Echo = new Echo({
broadcaster: 'socket.io',
host: window.location.hostname + ':6001'
});

donggan

292 声望

暂无个人描述~

0 人点赞

我们将带你从零开发一个项目并部署到线上，本课程教授 Web 开发中专业、实用的技能，如 Git 工作流、Laravel Mix 前端工作流等。

以构建论坛项目 LaraBBS 为线索，展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。

推荐文章：

更多推荐...

工作

[求职]在郑州工作4年的程序媛的简历优化 13 / 172 |

博客

冯老师的困惑——测试和正式环境掐架篇（一） 15 / 23 |

分享创造

使用 Laravel 10 & Vue 3 开发了一个社区站，一起来玩下～ 17 / 39 |

博客

简单对比一下DcatAdmin和filament的各自优缺点 28 / 33 |

面试 POPER 的后端开发工程师的离奇经历 34 / 104 |

博客

Git在项目中的那些实操(持续更新...) 22 / 3 |

讨论数量: 4

yanthink

455 声望

babel 不能用 import 吧，你应该用 script 引入 laravel-echo 和 socket.io-client

4年前评论

donggan （楼主）

恩恩是的，提示未定义，问下引入怎么引入的？

yanthink

455 声望

@donggan 你可以找一下有没有cdn，没有的话你可以把 laravel-echo 项目 clone 下来，然后执行 npm run build 命令构建项目，构建完成后把 dist 目录下的文件 copy 到你项目下，最后用 script 引入即可

socket.io-client 可以启动 laravel-echo-server 服务，然后这么引入

<script src="//127.0.0.1:6001/socket.io/socket.io.js"></script>

4年前评论

donggan （楼主）

谢谢，我发现要引入这个，需要在服务器端运行laravel-echo-server 监听6001端口，但是为什么，我在blade文件显示还是Echo未定义呢？

donggan （楼主）

我在引入这个文件后，script里面加入这些代码，Echo.chanel('laravel_database_blog1').listen('blog', (e) => { console.log(788); });

yanthink （作者）

@donggan Echo 和 socket.io 都需要单独引入

donggan （楼主）

@yanthink 那这个Echo怎么引入的呢？

yanthink （作者）

@donggan 把 laravel-echo 项目 clone 下来，然后执行 npm i && npm run build 命令构建项目，构建完成后把 dist/echo.iife.js 文件 copy 到你项目下（比如 public/js/），最后 <script src="{{asset('js/echo.iife.js')}}"></script> 引入即可

yanthink （作者）

@donggan 我临时构建了 echo.iife.js 文件，你可以直接下载来用

yanthink

455 声望

@donggan

file

Laravel

4年前评论

donggan （楼主）

我再问下，比如我在一个事件文件如NewBlogView里面，这个类实现implements ShouldBroadcastNow，加入public function broadcastOn() { return new Channel('blog'); }，我在一个blade页面加入 window.Echo = new Echo({ broadcaster: 'socket.io', host: window.location.hostname + ':6001' }); Echo.channel('blog').listen('NewBlogView', (e) => { console.log(788); });已经引入你给的文件了，谢谢啊，为什么引起了事件后，这个前台还是没有收到广播呢？

yanthink （作者）

@donggan 广播需要在你服务端触发的啊

yanthink （作者）

@donggan 你服务端触发 NewBlogView 事件就可以收到了

donggan （楼主）

关键是我在后台的laravel-echo-server都能看到，Channel：laravel_database_blog,Event:blog，前台怎么就是接收不到呢？

donggan （楼主）

@yanthink 我是这样，添加了一条路由，路由连到一个控制器里面的方法，然后在那个方法里面进行触发事件的，而我测试的话就是开两个网页，一个是前台接收广播的页面，一个是那个路由的访问页面，触发事件，通过浏览器触发事件都不行的吗？

donggan （楼主）

我控制器里面方法，public function showGet($id) { $user = User::find($id); event(new NewBlogView($user)); }

yanthink （作者）

@donggan 事件的命名空间呢？

yanthink （作者）

@donggan 正常不是 Channel：blog, Event:App\Events\NewBlogView 这样的吗

yanthink （作者）

@donggan 可以触发，你把 redis 前缀设置成空应该就可以了

yanthink

455 声望

1、需要将 database.redis.options.prefix 配置设置为空，你的应该是 laravel_database_

redis 加前缀后广播 Channel 也会自动加前缀，这会导致前端和后端的 Channel 对不上

2、broadcast(new App\Events\NewBlogView) 触发广播事件

4年前评论

donggan （楼主）

你好，我看了下这个网址，https://blog.csdn.net/nsrainbow/article/details/80428769，里面有一个步骤是要Homestead.yaml里面添加6001 端口的映射 - send: 6001 to: 6001，是不是还要有这个映射？

donggan （楼主）

@yanthink 我后来测试了下，不需要在Homestead.ymal中开启端口映射，我现在前台可以收到channel了，但是现在有个问题，我laravel-echo-server 需要另外开启一个queue:listen,不然的话laravel-echo-server就收不到channel了，你也是需要同时开启laravel-echo-server 和queue:listen么？

yanthink （作者）

@donggan 不需要

yanthink （作者）

@donggan 你事件是不是 implements ShouldQueue 接口了

donggan （楼主）

@yanthink 是的，开始的时候没有实现，前台就没成功接收到

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助

问下 Laravel 广播系统，是不是要用 Vue 模板，blade 是怎么弄的？

推荐文章：

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

问下 Laravel 广播系统，是不是要用 Vue 模板，blade 是怎么弄的？

推荐文章：

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录