React Native与Spring Boot间WebSocket配置求助（HTML+JS可用RN不可用）

你的问题核心是Stomp客户端的订阅/发送路径错误，另外React Native环境下SockJS存在兼容性细节需要处理，以下是分步解决方法：

1. 修正Stomp路径（最关键） #

Spring Boot配置的/topic和/app是相对目的地前缀，不需要带完整URL。你当前代码里的完整URL路径是错误的，需改为相对路径：

• 订阅路径从http://192.168.1.234:8081/topic/greetings改为/topic/greetings
• 发送路径从http://192.168.1.234:8081/app/hello改为/app/hello

2. 适配React Native的SockJS环境 #

直接导入sockjs-client在React Native中可能存在环境兼容问题，建议导入压缩版适配包：

import SockJS from 'sockjs-client/dist/sockjs.min.js';

同时，升级@stomp/stompjs到v6+版本，新版本已优化React Native兼容性，无需手动设置global.TextEncoder。

3. 完善连接错误处理与资源清理 #

• 在client.connect时添加错误回调，方便排查连接失败原因
• 避免依赖异步更新的stompClient状态做资源清理，直接保存客户端实例引用

修正后的完整React Native代码 #

import React, { useEffect, useState } from 'react';
import { View, TextInput, Button, Alert } from 'react-native';
import SockJS from 'sockjs-client/dist/sockjs.min.js';
import { Stomp } from '@stomp/stompjs';

const Test = () => {
    const [message, setMessage] = useState('');
    const [stompClient, setStompClient] = useState(null);

    useEffect(() => {
        let clientInstance = null;
        const socket = new SockJS('http://192.168.1.234:8081/websocket');
        const client = Stomp.over(socket);

        // 关闭调试日志，生产环境可开启
        client.debug = () => {};

        const connectToWebSocket = () => {
            client.connect({}, 
                () => {
                    clientInstance = client;
                    setStompClient(client);
                    console.log('WebSocket连接成功');

                    // 订阅相对路径的topic
                    client.subscribe('/topic/greetings', (message) => {
                        console.log('收到消息:', message.body);
                        Alert.alert('收到消息', message.body);
                    });
                },
                (error) => {
                    console.error('连接失败:', error);
                    Alert.alert('连接失败', error.message || '未知错误');
                }
            );
        };

        connectToWebSocket();

        return () => {
            if (clientInstance) {
                clientInstance.disconnect(() => {
                    console.log('WebSocket已断开');
                });
            }
        };
    }, []);

    const sendMessage = () => {
        if (stompClient && message.trim()) {
            // 发送到相对路径的app端点
            stompClient.send('/app/hello', {}, JSON.stringify({ name: message }));
            setMessage('');
        }
    };

    return (
        <View style={{ padding: 20, gap: 10 }}>
            <TextInput
                value={message}
                onChangeText={setMessage}
                placeholder="输入消息"
                style={{ borderWidth: 1, padding: 10, borderRadius: 5 }}
            />
            <Button title="发送消息" onPress={sendMessage} />
        </View>
    );
};

export default Test;

额外检查点 #

• 确保React Native设备与Spring Boot服务在同一局域网，192.168.1.234地址可正常访问
• Spring Boot控制台可查看连接请求日志，辅助排查跨域或连接异常问题

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