Laravel 广播 (Redis + socket.io) 前端监听不到后端事件,Echo.listen 不起作用

遇到的问题:前端Echo.listen不起作用,并且广播返回的数据也不是我想要的。

config/app.php 开启了 App\Providers\BroadcastServiceProvider::class,

事件类 LineStatusUpdated

namespace App\Events;
use App\Line;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class ShippingStatusUpdated implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;
    public $line;
    public $broadcastQueue = 'redis';
    public function __construct(Line $line)
    {
        $this->line = $line;
    }

    /**
     * 频道名称
     * @return \Illuminate\Broadcasting\Channel|\Illuminate\Broadcasting\Channel[]|PrivateChannel
     */
    public function broadcastOn()
    {
        // 创建隐私频道
        return new PrivateChannel('line.' . $this->line->id);
    }

    /**
     * 播报数据
     * @return array
     */
    public function broadcastWith()
    {
        return ['line_id'=>$this->line->id];
    }

}

广播事件授权 routes/channels.php

Broadcast::channel('line.{line}', function (\App\User $user, \App\Line $line){
    return $line->user_id === $user->id;
});

然后自定义了一个Artisan命令用于触发ShippingStatusUpdated事件
routes/console.php

Artisan::command('bindevent {line}', function ($line){
    broadcast(new \App\Events\ShippingStatusUpdated(\App\Line::find($line)));
})->describe('test bindevent');

通过laravel-echo-server 检测到ShippingStatusUpdated事件可以正常触发。

但是在前端JS页面里监听不到ShippingStatusUpdated事件,ps: Laravel-echosocket.io-client都引进来了,前端打包没出现报错。

resources/js/app.js

import Echo from "laravel-echo"
window.io = require('socket.io-client');
window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: 'http://at.test:6001'
});
window.Vue = require('vue');
//这里省略其他代码.....

const app = new Vue({
    el: '#app',
    created(){
        window.Echo.private('line.'+ window.Laravel.line).listen('ShippingStatusUpdated', (e) => {
            //按正常来讲这里应该会监听到ShippingStatusUpdated事件的,可惜没有。问题就出在这里
            console.log(e);
        });
    },
});

经过测试,用horizon检测了队列也都没问题。 前后端也保持着Websocket 连接,但是奇怪的是数据既然是纯数字的。我明明在ShippingStatusUpdated事件里定义了broadcastWith方法并且返回['line_id'=>$this->line->id] 这样的数据。

Laravel 广播(Redis + socket.io) 前端监听不到后端事件,Echo.listen不起作用

Geekc
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
讨论数量: 2
Epona

前端加入这个 私有频道的时候 laravel-echo-server 会正常显示 有人加入么?

1周前 评论
Geekc: laravel-echo-server里有显示的 我觉得是前端的问题,排除后端验证,如果是被验证拦截了我记得会报304错误的 1周前
Epona: @Geekc 前端使用的是什么验证? 1周前
Geekc: @Epona 只有后端用了Broadcast::channel() 1周前
Epona: @Geekc 我的意思是,你前端登录使用的什么验证,是jwt还是什么? 1周前
Geekc: @Epona 用的laravel自带的auth 1周前
Epona: @Geekc 那 前端加入私有频道的时候有类似这样的字段么?2Wi99LRzGuIl71JGAAAA joined channel: presence-courses.7 1周前
Geekc: @Epona 有的 加入频道echo-server有正常监听到 1周前
Epona: @Geekc 那你试试用 request 方法触发 broadcast 呢? 1周前
Geekc: 能触发 但是前端还是不监听 1周前
Epona

你可以先检测一下公开的 channel 前端是否能够接收到,如果可以,那么说明是私有频道的问题,不清楚你前端使用了什么验证,如果是jwt 那么需要在前端的 echo 里面加入对应的header

1周前 评论

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!

社区文档:

将托管在 packagist.org 和 github.com 的扩展包使用国内 CDN 加速
GitHub Laravel 扩展包 TOP 250
速查表方便快速查询框架功能,支持手机访问,支持中英文版本
Laravel 中文文档,由社区用户翻译和维护,将会保持一直更新
此文档的目的,就是为了提高技术团队的凝聚力、一致性和生产效率。
开发环境的部署,开发者工具的选择,适用于 Mac 和 Windows。
浓缩过后的精华
Laravel Nova 后台管理面板文档的中文翻译
Lumen 中文文档,由社区用户翻译和维护,将会保持一直更新
Laravel 下知名扩展包 Dingo API 的中文文档,Laravel API 开发必知必会