Laravel 11 Reverb与React WebSocket连接错误排查求助

根据你提供的报错信息和配置文件，核心问题集中在配置错误和服务状态上，以下是逐步排查和修复步骤：

1. 修正前端Echo配置的关键错误 #

你的echo.ts里存在两处致命配置问题：

• forceTLS: 'http'：该参数是布尔值，不是字符串，你使用HTTP协议时应设为false
• wssPort: 8080：WSS是HTTPS对应的WebSocket协议，你当前用HTTP，无需配置该端口，且不要同时启用WS和WSS

修改后的echo.ts：

import Echo from "laravel-echo";
import Pusher from "pusher-js";
//@ts-ignore
window.Pusher = Pusher;

const echo  = new Echo({
    broadcaster: 'reverb',
    key: import.meta.env.VITE_REVERB_APP_KEY, // 改用环境变量，避免硬编码
    wsHost: import.meta.env.VITE_REVERB_HOST,
    wsPort: parseInt(import.meta.env.VITE_REVERB_PORT),
    forceTLS: false, // HTTP协议下禁用强制TLS
    enabledTransports: ['ws'], // 只启用WS传输
});

export default echo;

2. 修复.env文件的引号问题 #

.env中REVERB_HOST="localhost"的引号会导致环境变量值包含引号，使实际连接地址变为"localhost"，直接去掉引号：

REVERB_APP_ID=147846
REVERB_APP_KEY=knycnmdeg1hemq2vnt1i
REVERB_APP_SECRET=xccoqs0txoecjmjw8ol5
REVERB_HOST=localhost
REVERB_PORT=8080
REVERB_SCHEME=http

VITE_REVERB_APP_KEY="${REVERB_APP_KEY}"
VITE_REVERB_HOST="${REVERB_HOST}"
VITE_REVERB_PORT="${REVERB_PORT}"
VITE_REVERB_SCHEME="${REVERB_SCHEME}"

BROADCAST_CONNECTION=reverb

3. 确认Reverb服务处于运行状态 #

执行Laravel Reverb启动命令，确保服务在指定端口监听：

php artisan reverb:start

启动后查看终端输出，确认服务正常运行在localhost:8080。如果端口被占用，可通过lsof -i :8080（Mac/Linux）或netstat -ano | findstr :8080（Windows）找到占用进程并终止，或修改.env中的REVERB_PORT为其他未被占用的端口。

4. 验证后端配置正确性 #

运行php artisan tinker，执行以下命令确认环境变量读取正常：

env('REVERB_HOST'); // 应返回localhost，无引号
env('REVERB_PORT'); // 应返回8080

5. 查看浏览器详细错误信息 #

打开浏览器开发者工具Network标签，找到失败的WebSocket请求，查看Failure Reason：

• ERR_CONNECTION_REFUSED：Reverb服务未启动或端口配置错误
• SSL_ERROR：错误启用了forceTLS，但服务未配置HTTPS

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