1慨丐、全局安裝laravel-echo-server服務(wù)
npm install -g laravel-echo-server
如需更新可進行更新npm install -g npm
2枯途、安裝完成后執(zhí)行l(wèi)aravel-echo-server init進行初始化
3唉侄、初始化完成之后執(zhí)行l(wèi)aravel-echo-server start進行啟動
4幔荒、laravel框架安裝redis擴展 composer require predis/predis
5蔑水、進行l(wèi)aravel框架配置崭庸，將config/app.php中的 // App\Providers\BroadcastServiceProvider::class,解開注釋
將.env中的BROADCAST_DRIVER=log修改為BROADCAST_DRIVER=redis
到這框架的配置基本完成怀浆。接下來創(chuàng)建事件進行廣播
php artisan make:event TestEvent
使其實現(xiàn)ShouldBroadcast
接下來對其中的代碼進行適當?shù)木帉?/p>
啟動框架即可php artisan serve
進入routes/web.php配置路由觸發(fā)事件進行廣播
6、接下來安裝前端所需的擴展怕享，以及實現(xiàn)代碼
執(zhí)行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);
????});
打開需要監(jiān)聽顯示的頁面执赡，在header頭中添加
<meta name="csrf-token" content="{{ csrf_token() }}">
<div id="app">
????<example-component></example-component>
</div>
<script src="{{ asset('js/app.js') }}"></script>
接下來運行命令查看結(jié)果
觸發(fā)事件，監(jiān)聽到了結(jié)果
完結(jié)函筋！
