Connection keep closing on React Native

[seungholee-dev]

Environment

• Frontend: React Native
• Backend: Spring with STOMP
• React Native Version: v13.6.6
• stompjs Version: v.7.4.0

Issue

• The logs keep showing me the connection is opened and closed immediately.
• I saw documentations about React Native issues but had no chance after setting below:
  • text-encoding
  • appendMissingNullonIncoming: true
  • forceBinaryWSFrames: true
  • Also tried downgrading to 5.4.0 where community says it worked but didn't for me

 LOG  Opening Web Socket...
 LOG  Connection closed to ws://localhost:8080/ws
 LOG  STOMP: scheduling reconnection in 5000ms

Code

websocket.js

import { Client } from '@stomp/stompjs';

const socketUrl = 'ws://localhost:8080/ws';

export const connectWebSocket = () => {
    let client = new Client({
        brokerURL: socketUrl,
        debug: (str) => {
            console.log(str);
        },
        appendMissingNULLonIncoming: true,
        forceBinaryWSFrames: true,
        onConnect: () => {
            console.log('Connected');
        },
    });

    client.activate();
}

App.jsx

import * as encoding from 'text-encoding';
import {connectWebSocket} from "./src/config/websocket";

Object.assign(global, encoding)

 useEffect(() => {
     connectWebSocket();
 }, []);

Have I been doing anything wrong?

[Mikail-snipez13]

I have the same problem but a bit different. I'm thinking this is mainly a problem with the backend with spring boot 3 using websockets. I can connect to the backend when i run the backend on localhost but in deployment the connection fails.

My React Native Code looks like this:

useEffect(() => {
    void getCredentials().then(async credentials => {
      console.log('Configure Websocket')
      const csrfToken = await axios.get(process.env.EXPO_PUBLIC_POST_SERVICE_URL + '/csrf', {
        headers: {
          Authorization: `Bearer ${credentials.accessToken}`
        }
      })
      console.log('Websocket CSRF-TOKEN: ' + csrfToken.data.token)
      wsRef.current = new StompJS.Client({
        // brokerURL: 'ws://localhost:8080/ws',
        // debug: data => { console.log(data) },
        heartbeatIncoming: 10000,
        connectHeaders: {
          'X-Authorization': `Bearer ${credentials.accessToken}`,
          'X-CSRF-TOKEN': csrfToken.data.token
        },
        webSocketFactory: () => {
          return new SockJS(`${process.env.EXPO_PUBLIC_POST_SERVICE_URL}/ws`)  // env = http://localhost:8080
        },
        onConnect: () => {
          console.log('websocket is connected ')
        },
        onStompError: err => {
          console.error('websocket error: %s', err)
        },
        onDisconnect: err => { console.error('websocket error: %s', err) },
        onWebSocketError: err => { console.error('websocket error: %s', err) },
        onUnhandledFrame: err => { console.error('websocket unhandled frame: ' + err)},
        onWebSocketClose: err => { console.error('websocket closed: ' + JSON.stringify(err))}
      })
      wsRef.current.activate()
    }).catch(err => { console.error('noCredentials for websocket: ' + err) })
    return () => {
      if (wsRef.current != null) {
        void wsRef.current.deactivate()
      }
    }
  }, [])

But if i go to the deployment the stompClient throws errors.

websocket closed: {"type":"close","bubbles":false,"cancelable":false,"timeStamp":1717710951199,"wasClean":false,"code":2000,"reason":"All transports failed"}

My Backend configuration is like this:

@Configuration
@EnableWebSocketMessageBroker
@EnableWebSocketSecurity
@Order(Ordered.HIGHEST_PRECEDENCE + 99)
@Slf4j
public class WebsocketConfig implements WebSocketMessageBrokerConfigurer {
    
    @Autowired
    private JwtDecoder jwtDecoder;

    @Autowired
    private JwtAuthenticationConverter authenticationConverter;

    private TaskScheduler messageBrokerTaskScheduler;

    @Autowired
    public void setMessageBrokerTaskScheduler(@Lazy TaskScheduler taskScheduler) {
        this.messageBrokerTaskScheduler = taskScheduler;
    }
    
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws")
                .setAllowedOrigins("postservice.starlight-marketing.de")
                .addInterceptors(new HttpSessionHandshakeInterceptor())
                .withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic")
                        .setHeartbeatValue(new long[] {10000, 20000})
                        .setTaskScheduler(messageBrokerTaskScheduler);
        registry.setUserDestinationPrefix("/user");
        registry.setApplicationDestinationPrefixes("/app");
    }

    @Bean
    AuthorizationManager<Message<?>> messageAuthorizationManager(MessageMatcherDelegatingAuthorizationManager.Builder messages) {
        messages.anyMessage().permitAll();
        return messages.build();
    }

    @Override
    public void configureClientInboundChannel(ChannelRegistration registration) {

        registration.interceptors(new ChannelInterceptor() {
            @Override
            public Message<?> preSend(Message<?> message, MessageChannel channel) {
                StompHeaderAccessor accessor =
                        MessageHeaderAccessor.getAccessor(message, StompHeaderAccessor.class);
                if (StompCommand.CONNECT.equals(accessor.getCommand())) {
                    List<String> authorization = accessor.getNativeHeader("X-Authorization");
                    log.info("X-Authorization: {}", authorization.get(0).substring(0, 19));

                    String accessToken = authorization.get(0).split(" ")[1];
                    Jwt jwt = jwtDecoder.decode(accessToken);
                    Authentication authentication = authenticationConverter.convert(jwt);
                    accessor.setUser(authentication);
                }
                return message;
            }
        });
    }
}

I don't know what to do.

[JamesSmith888]

I solved this problem through ai

What's happening:

1. @stomp/stompjs sends a CONNECT frame like this (60 bytes):

   CONNECT\n
   accept-version:1.2,1.1,1.0\n
   heart-beat:10000,10000\n
   \n
   \x00  ← NULL terminator (required by STOMP spec)
   

2. React Native WebSocket sends it as a text frame, which strips the \x00

3. Backend receives only 59 bytes (missing the NULL terminator)

4. Spring Boot's StompDecoder waits forever for the \x00, reports "Incomplete frame"

5. Connection times out and closes

Why appendMissingNULLonIncoming and forceBinaryWSFrames don't work:

• appendMissingNULLonIncoming: Only affects incoming messages, not outgoing
• forceBinaryWSFrames: This flag is for the entire connection, but doesn't solve the encoding issue in RN

Solution

Create a WebSocket wrapper that intercepts STOMP frames and sends them as binary frames (ArrayBuffer) instead of text frames. Binary frames preserve all bytes including NULL.

Step 1: Install required dependency

npm install text-encoding

Step 2: Create the WebSocket wrapper

// Add polyfills first
import * as encoding from 'text-encoding';
Object.assign(global, {
  TextEncoder: encoding.TextEncoder,
  TextDecoder: encoding.TextDecoder,
});

/**
 * WebSocket wrapper for React Native
 * Converts STOMP frames to binary to preserve NULL terminator
 */
class RNWebSocketWrapper {
  constructor(url) {
    this.ws = new WebSocket(url);
  }

  // Proxy all WebSocket properties
  get readyState() { return this.ws.readyState; }
  get url() { return this.ws.url; }
  get protocol() { return this.ws.protocol; }
  get binaryType() { return this.ws.binaryType; }
  set binaryType(value) { this.ws.binaryType = value; }

  // Proxy event handlers
  set onopen(handler) { this.ws.onopen = handler; }
  set onclose(handler) { this.ws.onclose = handler; }
  set onerror(handler) { this.ws.onerror = handler; }
  set onmessage(handler) { this.ws.onmessage = handler; }

  get onopen() { return this.ws.onopen; }
  get onclose() { return this.ws.onclose; }
  get onerror() { return this.ws.onerror; }
  get onmessage() { return this.ws.onmessage; }

  // KEY FIX: Intercept send() method
  send(data) {
    if (typeof data === 'string' && this.isStompFrame(data)) {
      // Convert STOMP frame to binary
      const encoder = new TextEncoder();
      const buffer = encoder.encode(data);
      this.ws.send(buffer);
    } else {
      this.ws.send(data);
    }
  }

  isStompFrame(data) {
    return /^(CONNECT|SEND|SUBSCRIBE|UNSUBSCRIBE|BEGIN|COMMIT|ABORT|ACK|NACK|DISCONNECT)/.test(data);
  }

  close(code, reason) {
    this.ws.close(code, reason);
  }

  addEventListener(type, listener) {
    this.ws.addEventListener(type, listener);
  }

  removeEventListener(type, listener) {
    this.ws.removeEventListener(type, listener);
  }
}

Step 3: Use the wrapper in STOMP Client

import { Client } from '@stomp/stompjs';
import 'react-native-url-polyfill/auto';

const client = new Client({
  brokerURL: 'ws://localhost:8080/ws',
  
  // KEY: Use the wrapper instead of default WebSocket
  webSocketFactory: () => {
    return new RNWebSocketWrapper('ws://localhost:8080/ws');
  },
  
  connectionTimeout: 15000,
  heartbeatIncoming: 10000,
  heartbeatOutgoing: 10000,
  
  onConnect: (frame) => {
    console.log('✅ Connected successfully!');
  },
  
  onStompError: (frame) => {
    console.error('STOMP error:', frame);
  },
  
  debug: (str) => {
    console.log('[STOMP]', str);
  },
});

client.activate();

Why This Works

Before fix:

• Frontend sends: 60 bytes (text frame)
• Backend receives: 59 bytes ❌ (NULL byte stripped)
• Result: "Incomplete frame" error

After fix:

• Frontend sends: 60 bytes (binary frame via ArrayBuffer)
• Backend receives: 60 bytes ✅ (NULL byte preserved)
• Result: Connection succeeds!

TypeScript Version

If you're using TypeScript, here's the complete implementation:

import { Client, StompSubscription } from '@stomp/stompjs';
import 'react-native-url-polyfill/auto';

// Setup polyfills
const textEncoding = require('text-encoding');
if (typeof (globalThis as any).TextEncoder === 'undefined') {
  (globalThis as any).TextEncoder = textEncoding.TextEncoder;
}
if (typeof (globalThis as any).TextDecoder === 'undefined') {
  (globalThis as any).TextDecoder = textEncoding.TextDecoder;
}

class RNWebSocketWrapper {
  private ws: WebSocket;

  constructor(url: string) {
    this.ws = new WebSocket(url);
  }

  get readyState() { return this.ws.readyState; }
  get url() { return (this.ws as any).url; }
  get protocol() { return (this.ws as any).protocol; }
  get binaryType() { return (this.ws as any).binaryType; }
  set binaryType(value: any) { (this.ws as any).binaryType = value; }

  set onopen(handler: any) { this.ws.onopen = handler; }
  set onclose(handler: any) { this.ws.onclose = handler; }
  set onerror(handler: any) { this.ws.onerror = handler; }
  set onmessage(handler: any) { this.ws.onmessage = handler; }

  get onopen() { return this.ws.onopen; }
  get onclose() { return this.ws.onclose; }
  get onerror() { return this.ws.onerror; }
  get onmessage() { return this.ws.onmessage; }

  send(data: string | ArrayBuffer | Blob) {
    if (typeof data === 'string' && this.isStompFrame(data)) {
      const encoder = new (globalThis as any).TextEncoder();
      const buffer = encoder.encode(data);
      this.ws.send(buffer);
    } else {
      this.ws.send(data);
    }
  }

  private isStompFrame(data: string): boolean {
    return /^(CONNECT|SEND|SUBSCRIBE|UNSUBSCRIBE|BEGIN|COMMIT|ABORT|ACK|NACK|DISCONNECT)/.test(data);
  }

  close(code?: number, reason?: string) {
    this.ws.close(code, reason);
  }

  addEventListener(type: string, listener: any) {
    (this.ws as any).addEventListener(type, listener);
  }

  removeEventListener(type: string, listener: any) {
    (this.ws as any).removeEventListener(type, listener);
  }
}

// Usage
const client = new Client({
  brokerURL: 'ws://localhost:8080/ws',
  webSocketFactory: () => new RNWebSocketWrapper('ws://localhost:8080/ws') as any,
  // ... rest of your config
});

Tested Environment

• ✅ React Native v0.82.0
• ✅ @stomp/stompjs v7.2.1
• ✅ Spring Boot 3.x with WebSocket
• ✅ Android physical device
• ✅ iOS simulator

Key Takeaways

1. The problem is RN-specific: Browser environments work fine
2. Root cause: Text frames strip NULL bytes in React Native
3. Solution: Convert STOMP frames to binary (ArrayBuffer)
4. No backend changes needed: This is purely a client-side fix

Additional Notes

• Remove appendMissingNULLonIncoming: true and forceBinaryWSFrames: true from your config - they're not needed with this solution
• No need to downgrade to v5.4.0 - this works with the latest version
• This solution is protocol-compliant and maintains full STOMP functionality

Hope this helps! 🎉

[kum-deepak]

Regarding #632 (comment), the code at https://github.com/stomp-js/stompjs/blob/develop/src/stomp-handler.ts#L397 is supposed to do the same.