WebSocket Closes Immediately After Connection on Android (RN 0.74.5, Stomp 7.0.0)

[nazlisen]

I am experiencing an issue where the WebSocket connection closes immediately after opening, but only on Android. The same code works fine on iOS.

Environment
• React Native version: 0.74.5
• StompJS version: 7.0.0
• Platform: Android

When adding console.log to the debug function, the following logs appear:

Opening web socket…
Web socket opened…
Connect
necessary information(hearbeat ,accept-version etc.)
Connected closed (wss url)

In the onclose event, the following log appears:

{ code: 1000, isTrusted: false, reason: "" }

Additional Details
• I have tried adding forceBinaryWSFrames and appendMissingNULLonIncoming, but they had no effect.
• I also implemented the TextEncoder workaround mentioned in the documentation, but the issue persists.
• Upgrading the library version did not work

It seems that the WebSocket connection closes automatically after an attempt to connect.

Are there any recommended workarounds or fixes for this problem?

[ted911]

same issue,
Env

• RN 0.78.1
• stompJS 7.1.1
• platform android

Opening Web Socket...
Web Socket Opened...
CONNECT
Authorization:Bearer test-token
accept-version:1.2,1.1,1.0
heart-beat:10000,10000

[ted911]

i found this error,

can you try again without forceBinaryWSFrames option.

i try this method, it work well.

[nazlisen]

I started experiencing the same issue on iOS after upgrading React Native to 0.81.4. Can you help?

[ted911]

@nazlisen I hope this is the code you need.

import {Client, IFrame, Versions} from '@stomp/stompjs';
import SockJS from 'sockjs-client';
import {WSMessage} from "modules/happymore-web-common/services/Chat.ts";
import {AppStateStatus} from "react-native";

export interface StompWebSocketProps {
  webSocketUrl: string;
}

/** Chat session details managed in the Redis login session */
interface ChatSession {
  chatRoomId?: string;
  appState: AppStateStatus;
}

/** Spring Boot STOMP protocol handling class */
class StompWebSocket {
  // WebSocket URL address
  private WEB_SOCKET_URL: string;
  // Socket message publish endpoint
  private readonly PUB_ENDPOINT: string;
  // Socket message subscribe endpoint
  private readonly SUB_ENDPOINT: string;
  // Reconnection attempt delay in ms
  private readonly RECONNECT_DELAY_MS: number;
  // Heartbeat incoming in ms
  private readonly HEARTBEAT_INCOMING_MS: number;
  // Heartbeat outgoing in ms
  private readonly HEARTBEAT_OUTCOMING_MS: number = 0;
  // Set to receive null values even if the server sends them on initial connection (required option for native)
  private APPEND_MISSING_NULL_ON_INCOMING: boolean = true;
  // STOMP socket client
  protected client?: Client;
  constructor({ webSocketUrl }: StompWebSocketProps) {
    this.WEB_SOCKET_URL = webSocketUrl + '/v1/chat/ws';
    console.log('stomp web socket url :', this.WEB_SOCKET_URL); // Original: 'stomp web socket url :'
    this.PUB_ENDPOINT = '/pub/message';
    this.SUB_ENDPOINT = '/sub/messages/';
    this.RECONNECT_DELAY_MS = 15000;
    this.HEARTBEAT_INCOMING_MS = 10000;
    this.HEARTBEAT_OUTCOMING_MS = 20000;
  }
  /**
   * Initializes the WebSocket connection using the access token after login. The topic is the topic to subscribe to the
   * protocol, and the messageHandler is the function to process the received message.
   * */
  protected init(topic: string, messageHandler: (message: IFrame) => void, token: string) {
      this.client = new Client({
        webSocketFactory: () => new SockJS(this.WEB_SOCKET_URL),
        stompVersions: new Versions([Versions.V1_2]),
        reconnectDelay: this.RECONNECT_DELAY_MS,
        appendMissingNULLonIncoming: this.APPEND_MISSING_NULL_ON_INCOMING,
        heartbeatIncoming: this.HEARTBEAT_INCOMING_MS,
        heartbeatOutgoing: this.HEARTBEAT_OUTCOMING_MS,
        connectHeaders: {
          Authorization: token,
          "Temp-Customer": "true"
        },
        disconnectHeaders: {
          Authorization: token,
          "Temp-Customer": "true"
        },
        debug: msg => console.debug(msg),
        onConnect: () => {
          console.log('STOMP connection successful'); // Original: 'onConnect'
          if (this.client) {
            this.client.subscribe(this.SUB_ENDPOINT + topic, messageHandler)
          }
        },
        onDisconnect: () => {
          console.log('STOMP disconnected'); // Original: 'onDisconnect'
        },
        onStompError: msg => console.error('STOMP error', msg), // Original: 'stomp error'
        onWebSocketClose: msg => console.log('WebSocket closed', msg), // Original: 'onWebSocketClose'
        onWebSocketError: msg => console.error('WebSocket error',msg), // Original: 'websocket error'
        onChangeState: (state) => {
          console.log('Client state changed to :', state); // Original: 'state :'
        }
      });
      this.client.activate()
  }
  /** Topic subscription */
  protected subscribeTopic(topic: string, messageHandler: (frame: IFrame) => void) {
    if (!this.client) {
      console.log('WebSocket client is not initialized'); // Original: '웹소켓 클라이언트가 없음'
      return;
    }
    this.client.subscribe(this.SUB_ENDPOINT + topic, messageHandler)
  }
  /** Disconnect connection */
  protected async disconnect() {
    if (!this.client) {
      console.log('WebSocket client is not initialized'); // Original: '웹소켓 클라이언트가 없음'
      return;
    }
    await this.client.deactivate();
    this.client = undefined;
  }
  protected async sendWebSocketMessage(wsMessage: WSMessage) {
    if (!this.client) {
      console.log('WebSocket client is not initialized'); // Original: '웹소켓 클라이언트가 없음'
      return;
    }
    if (!this.client.connected) {
      console.log('WebSocket is not connected'); // Original: '웹소켓 연결이 안되어 있음.'
      return;
    }
    console.log(wsMessage)
    this.client.publish({
      destination: this.PUB_ENDPOINT,
      body: JSON.stringify(wsMessage),
    });
  }
}
export default StompWebSocket;