Laravel实时通信：前端WebSocket URL配置及跨域问题求助

核心问题诊断 #

1. 协议不匹配：你用BROADCAST_DRIVER=pusher启动Laravel WebSockets，但前端却用socket.io连接——Laravel WebSockets默认适配Pusher协议，和Socket.io不兼容，这是404的根本原因。
2. 连接地址错误：错误日志里请求的是localhost:6001/socket.io/，但你混淆了Laravel WebSockets的HTTP服务端口（8000）和WebSocket实际连接端口（默认6001），路径也错用了socket.io而非Pusher协议的路径。

分步修复 #

1. 前端替换为Pusher客户端 #

React项目安装Pusher SDK：

npm install pusher-js

在React组件中正确初始化连接：

import Pusher from 'pusher-js';

// 初始化Pusher实例，参数对应.env里的配置
const pusher = new Pusher(process.env.REACT_APP_PUSHER_KEY, {
  wsHost: '127.0.0.1',
  wsPort: 6001, // WebSocket实际端口，不是Laravel的8000
  forceTLS: false,
  encrypted: false,
  disableStats: true,
  enabledTransports: ['ws', 'wss'],
});

// 订阅频道并监听事件示例
const channel = pusher.subscribe('public-chat');
channel.bind('message-sent', (data) => {
  console.log('收到消息:', data);
});

2. 修正CORS配置 #

更新config/cors.php，确保包含WebSocket相关路径：

return [
    'paths' => ['api/*', 'broadcasting/auth', 'laravel-websockets'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['*'], // 本地开发临时用*，生产环境替换为前端域名
    'allowed_headers' => ['*'],
    'supports_credentials' => true,
];

清除配置缓存生效：

php artisan config:clear

3. 验证Laravel WebSockets配置 #

检查config/websockets.php中的Pusher配置，确保和.env一致：

'pusher' => [
    'app_id' => env('PUSHER_APP_ID'),
    'key' => env('PUSHER_APP_KEY'),
    'secret' => env('PUSHER_APP_SECRET'),
    'app_cluster' => env('PUSHER_APP_CLUSTER'),
    'options' => [
        'host' => '127.0.0.1',
        'port' => 6001,
        'scheme' => 'http',
    ],
],

学习用Git仓库 #

• Laravel WebSockets官方示例：包含完整的前后端配置示例

  github.com/beyondcode/laravel-websockets
  

• Laravel + React实时聊天：完整的聊天应用实现

  github.com/laravel/laravel-react-chat
  

• Laravel + Flutter实时通知：适配移动端的广播示例

  github.com/ashallendesign/laravel-flutter-broadcasting
  

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