触发Laravel事件时出现Pusher 404 Not Found错误求助

Pusher错误：

<html> <head><title>404 Not Found</title></head> <body> <center><h1>404 Not Found</h1></center> <hr><center>nginx/1.18.0 (Ubuntu)</center> </body> </html>

相关配置文件 #

web.php #

Route::get('test', function () {
event(new App\Events\SendMessage('hello world'));
return 'Event has been sent successfully';
});

.env #

BROADCAST_DRIVER=pusher

LARAVEL_ECHO_PORT=6001

PUSHER_APP_ID=XXXX
PUSHER_APP_KEY=XXXX
PUSHER_APP_SECRET=XXXX
PUSHER_HOST=127.0.0.1
PUSHER_PORT=80
PUSHER_SCHEME=http
PUSHER_APP_CLUSTER=ap2

app.php（已取消BroadcastServiceProvider注释） #

/*
    * Application Service Providers...
*/
App\Providers\AppServiceProvider::class,
App\Providers\AuthServiceProvider::class,
App\Providers\BroadcastServiceProvider::class,
App\Providers\EventServiceProvider::class,
App\Providers\RouteServiceProvider::class,

resources/js/bootstrap.js #

import Echo from 'laravel-echo';

import Pusher from 'pusher-js';
window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'ap2',
    wsHost: import.meta.env.VITE_PUSHER_HOST ??   `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
    wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
    wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
});

test.blade.php #

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    @vite(['resources/js/app.js'])

</head>
<body>
    <div id="app"></div>
</body>
<script>
      window.laravel_echo_port='{{ env('LARAVEL_ECHO_PORT') }}';
</script>
<script src="//{{ Request::getHost() }}:{{ env('LARAVEL_ECHO_PORT') }}/socket.io/socket.io.js"></script> 
<script type="module">
    window.Echo.channel('send-message-channel')
     .listen('.send-message', (data) => {
         console.log(data);
    });
</script>
</html>

错误原因分析 #

核心问题是配置混淆了官方Pusher服务和本地Laravel Echo Server（Socket服务），具体问题点：

• .env中设置BROADCAST_DRIVER=pusher的同时指定PUSHER_HOST=127.0.0.1和PUSHER_PORT=80，导致Laravel向本地Nginx发送Pusher请求，但本地80端口无Pusher服务，返回404。
• 前端同时引入了Pusher-js和Socket.io库，两种广播驱动的依赖冲突。
• 前端使用import.meta.env.VITE_*变量，但.env中未配置对应前缀的环境变量，Echo无法正确获取密钥等信息。

解决方案 #

根据使用场景分两种处理方式：

情况一：使用官方Pusher服务 #

1. 修正.env配置：
   删除PUSHER_HOST和PUSHER_PORT，添加VITE前缀变量供前端使用：

   BROADCAST_DRIVER=pusher
   
   PUSHER_APP_ID=你的官方ID
   PUSHER_APP_KEY=你的官方KEY
   PUSHER_APP_SECRET=你的官方SECRET
   PUSHER_APP_CLUSTER=ap2
   PUSHER_SCHEME=https
   
   VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
   VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
   VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
   

2. 前端清理冗余依赖：
   删除test.blade.php中以下代码：

   <script>
         window.laravel_echo_port='{{ env('LARAVEL_ECHO_PORT') }}';
   </script>
   <script src="//{{ Request::getHost() }}:{{ env('LARAVEL_ECHO_PORT') }}/socket.io/socket.io.js"></script> 
   

3. 重启服务并清除缓存：

   php artisan config:clear
   php artisan cache:clear
   npm run dev
   

情况二：使用本地Laravel Echo Server（Socket.io） #

1. 修正.env配置：
   切换广播驱动为redis，配置本地Echo Server变量：

   BROADCAST_DRIVER=redis
   QUEUE_CONNECTION=redis
   
   LARAVEL_ECHO_PORT=6001
   
   PUSHER_APP_KEY=local_key
   VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
   

2. 修改bootstrap.js配置：
   切换为Socket.io驱动，指向本地Echo Server：

   import Echo from 'laravel-echo';
   import io from 'socket.io-client';
   window.io = io;
   
   window.Echo = new Echo({
       broadcaster: 'socket.io',
       host: window.location.hostname + ':' + window.laravel_echo_port,
       auth: {
           headers: {
               'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
           },
       },
   });
   

3. 完善前端页面：
   在test.blade.php的<head>中添加CSRF标签：

   <meta name="csrf-token" content="{{ csrf_token() }}">
   

4. 启动Laravel Echo Server：

   laravel-echo-server start
   

5. 重启服务并清除缓存：

   php artisan config:clear
   npm run dev
   

内容的提问来源于stack exchange，提问作者Miral Patel