Laravel Echo Listener 无法在前端工作

Posted 2023-04-18

【中文标题】Laravel Echo Listener 无法在前端工作

【英文标题】：Laravel Echo Listener not working on frontend

【发布时间】：2021-03-09 14:07:34

【问题描述】：

我创建了一个活动：

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class QueueStatus implements ShouldBroadcast

    use Dispatchable, InteractsWithSockets, SerializesModels;


    public $queue;

    public function __construct()
    
        $queue = 'test2';
    


    public function broadcastOn()
    
        return new Channel('thechannel');
    
    public function broadcastWith()
    
        return ['test1'];
    
    public function broadcastAs() 
        return 'examplee';
    

这是 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('thechannel')
    .listen('.examplee', (e) => 
        console.log(e);
    );

还有路线：

Route::get('/', function () 
    event(new \App\Events\QueueStatus());
    return view('welcome');
);

laravel-echo-server.json ：

    "authHost": "http://localhost",
    "authEndpoint": "/broadcasting/auth",
    "clients": [
        
            "appId": "2583d37858d083b7",
            "key": "248536aa1290916b4cd80279fe8fa4cf"
        
    ],
    "database": "redis",
    "databaseConfig": 
        "redis": ,
        "sqlite": 
            "databasePath": "/database/laravel-echo-server.sqlite"
        
    ,
    "devMode": true,
    "host": null,
    "port": "6001",
    "protocol": "http",
    "socketio": ,
    "secureOptions": 67108864,
    "sslCertPath": "",
    "sslKeyPath": "",
    "sslCertChainPath": "",
    "sslPassphrase": "",
    "subscribers": 
        "http": true,
        "redis": true
    ,
    "apiOriginAllow": 
        "allowCors": true,
        "allowOrigin": "http://localhost:8000",
        "allowMethods": "GET",
        "allowHeaders": "Origin, Content-Type, X-Auth-Token, X-Requested-With, Accept, Authorization, X-CSRF-TOKEN, X-Socket-Id"
    

ENV 文件：

APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:tDyjOGMQ5AhlIdieUGZnhTi3IcJ7+vx4m8H6rDi9idI=
APP_DEBUG=true
APP_URL=http://localhost

LOG_CHANNEL=stack
LOG_LEVEL=debug

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=assets_daily_info
DB_USERNAME=root
DB_PASSWORD=

BROADCAST_DRIVER=redis
CACHE_DRIVER=file
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

当我将广播驱动程序设置为日志时：

[2020-11-26 16:19:52] local.INFO: Broadcasting [QueueStatuss] on channels [thechannel] with payload:

    "0": "test1",
    "socket": null
  

当我通过 CLI 将广播驱动程序设置为 redis 并监控 redis 时：

1606408782.818033 [0 127.0.0.1:11665] "EVAL" "for i = 2, #ARGV do\n  redis.call('publish', ARGV[i], ARGV[1])\nend" "0" "\"event\":\"examplee\",\"data\":\"0\":\"test1\",\"socket\":null,\"socket\":null" "thechannel"
1606408782.818162 [0 lua] "publish" "thechannel" "\"event\":\"examplee\",\"data\":\"0\":\"test1\",\"socket\":null,\"socket\":null"

看起来一切正常，但前端的浏览器控制台没有显示任何日志。 有什么问题？为什么我不能让监听器在前端工作？ 我尝试更改广播，并在前端的名称前加一个点。 但还是没有运气。

【参考方案1】：

这太奇怪了，不过，我通过将 socket.io-client 从 3.0.3 降级到 2.3.0 来修复它

【讨论】：

谢谢Mostafa，这也为我解决了问题。

真希望我这么多小时前就找到了这个。 :) 这为我解决了问题。

因为这张 Github 票找到了这个答案：github.com/tlaverdure/laravel-echo-server/issues/550 救了我的命——终于。在这个问题上已经花了 3 天时间，但没有考虑降级 socket.io-client :)