React-Native集成laravel-echo与pusher-js连接Pusher显示unavailable问题

• 端口配置不匹配：你配置的wsPort为8443，但日志显示Pusher实际尝试连接的是443端口，说明端口配置未生效，和后端实际监听的websocket端口不匹配
• 加密配置冲突：你配置了forceTLS: false、encrypted: false，但日志中使用的是wss加密协议，配置和实际连接要求冲突
• 无效对象赋值：React Native不存在window对象，你代码中window.Pusher = Pusher属于无效配置，可能引发隐性异常
• 认证配置缺失：你已经获取了access_token但未传入Echo的认证配置中，频道验证时缺少必要的认证头导致连接被拒绝
• 移动端网络限制：安卓高版本系统默认禁止明文流量、iOS存在ATS限制，或移动端网络无法访问后端websocket端口

首先修正初始化配置，参考代码如下：

import Echo from "laravel-echo";
import Pusher from "pusher-js/react-native";

async function listenMessages() {
  const access_token = await userLogged.access_token;
  Pusher.logToConsole = true;

  const PusherClient = new Pusher("27e7ea97c7x1x1x1x1x1", {
    cluster: "mt1",
    wsHost: "my-api.company.io",
    // 替换为后端实际监听的websocket端口
    wsPort: 443,
    wssPort: 443,
    enabledTransports: ["ws", "wss"],
    // 后端使用wss加密则开启对应配置
    forceTLS: true,
    encrypted: true,
    authEndpoint: 'https://my-api.company.io/api/broadcasting/auth',
    auth: {
      headers: {
        Authorization: `Bearer ${access_token}`,
        Accept: 'application/json'
      }
    }
  });

  const echo = new Echo({
    broadcaster: "pusher",
    client: PusherClient,
  });

  echo.channel(`user.${chat.user.id}`).listen(".SendMessage", (e) => {
    console.log(e);
  });
}

useEffect(() => {
  listenMessages();
// 增加空依赖避免重复建立连接
}, []);

额外检查项：

• 若测试环境使用非加密ws协议连接：
  • 安卓端在AndroidManifest.xml的application节点增加android:usesCleartextTraffic="true"配置
  • iOS端在Info.plist中配置ATS例外，允许HTTP请求
• 若使用自签SSL证书，需要在React Native端配置信任自签证书，避免wss连接被系统拦截
• 确认移动端网络可以正常访问后端websocket对应的端口，无防火墙或安全组限制

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