1、全局安装laravel-echo-server服务
npm install -g laravel-echo-server
如需更新可进行更新npm install -g npm
2、安装完成后执行laravel-echo-server init进行初始化
3、初始化完成之后执行laravel-echo-server start进行启动
4、laravel框架安装redis扩展 composer require predis/predis
5、进行laravel框架配置,将config/app.php中的 // App\Providers\BroadcastServiceProvider::class,解开注释
将.env中的BROADCAST_DRIVER=log修改为BROADCAST_DRIVER=redis
到这框架的配置基本完成。接下来创建事件进行广播
php artisan make:event TestEvent
使其实现ShouldBroadcast
接下来对其中的代码进行适当的编写
启动框架即可php artisan serve
进入routes/web.php配置路由触发事件进行广播
6、接下来安装前端所需的扩展,以及实现代码
执行npm install安装一下所需的扩展
安装socket.io客户端和laravel-echo客户端
npm install --save socket.io-client laravel-echo
打开resources/assets/js/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'
});
window.Echo.channel('test')
.listen('TestEvent', (e) => {
console.log(e);
});
打开需要监听显示的页面,在header头中添加
<meta name="csrf-token" content="{{ csrf_token() }}">
<div id="app">
<example-component></example-component>
</div>
<script src="{{ asset('js/app.js') }}"></script>
接下来运行命令查看结果
触发事件,监听到了结果
完结!