无法通过STOMP协议建立STOMPjs与Java WebSocket的连接

可能的原因及解决办法 #

1. 模拟器/设备无法识别localhost #

• 问题本质：Expo运行在模拟器或物理设备时，localhost指向的是设备自身，而非你的开发电脑。
• 修复动作：
  • Android模拟器：替换localhost为10.0.2.2（这是Android模拟器映射宿主机的专用IP）。
  • iOS模拟器：若localhost无效，换成电脑的局域网IP（如192.168.1.100）。
  • 物理设备：确保设备和电脑在同一局域网，直接使用电脑的局域网IP，同时关闭电脑防火墙或开放8080端口入站权限。

2. 后端未配置跨域支持 #

• 问题本质：Expo前端运行端口（默认19000/19006）和后端8080端口属于跨域请求，后端未允许跨域会被拦截。
• 修复动作：修改后端WebSocketConfig，添加跨域配置：

@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
    registry.addEndpoint("/ws")
            .setAllowedOrigins("*"); // 开发环境可允许所有来源，生产环境需指定具体域名
}

3. WebSocket端点路径或协议不匹配 #

• 问题本质：前端brokerURL的路径或协议和后端配置不一致，导致连接失败。
• 修复动作：
  • 确认后端端点路径是/ws，和前端brokerURL的路径完全一致。
  • 若后端启用了HTTPS，需将ws://替换为wss://，同时确保SSL证书配置正确。

4. Expo环境WebSocket兼容性问题 #

• 问题本质：Expo内置环境对原生WebSocket的支持有差异，或polyfill未正确加载。
• 修复动作：
  • 在Stomp Client配置中显式指定WebSocket实现：

export const stompClient = new Client({
    // 其他配置不变
    webSocketFactory: () => new WebSocket("ws://你的电脑局域网IP:8080/ws")
})

• 重新安装text-encoding-polyfill依赖：npm install text-encoding-polyfill，确保在导入@stomp/stompjs之前加载该polyfill。

5. 后端服务未绑定所有网卡 #

• 问题本质：后端若仅绑定127.0.0.1，局域网内的模拟器/设备无法访问。
• 修复动作：修改Spring Boot配置文件application.properties，添加：

server.address=0.0.0.0

让服务监听电脑的所有网卡地址，确保局域网设备能连接。

6. 防火墙或代理拦截连接 #

• 问题本质：电脑防火墙阻止了8080端口的入站请求，或代理服务器干扰WebSocket连接。
• 修复动作：
  • 临时关闭电脑防火墙测试，或添加规则允许8080端口的TCP连接。
  • 关闭浏览器、系统的代理服务器，确保WebSocket连接直接建立。

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