Not working in React Native

[zju1]

This is my code:

StompContainer.tsx

import { PropsWithChildren, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { useAuth } from "../../hooks/useAuth";
import { useAppDispatch } from "../../app/store/store.config";
import { envVars } from "../../constants/envVars";
import { Client, IMessage } from "@stomp/stompjs";
import { setSync } from "../../app/store/slices/auth.slice";

const client = new Client({
  brokerURL: envVars.SOCKET_URL,
  forceBinaryWSFrames: true,
  appendMissingNULLonIncoming: true,
  splitLargeFrames: true,
  webSocketFactory() {
    return new WebSocket(envVars.SOCKET_URL, ["wss", "ws", "https", "http"]);
  },
  onConnect(frame) {
    console.log(frame);
  },
  onStompError(frame) {
    console.log("STOMP ERROR", frame);
  },
  onWebSocketError: (evt) => {
    console.log("WebSocket ERROR", evt);
  },
});

export function StompContainer(props: PropsWithChildren) {
  const { user, sync } = useAuth();
  const dispatch = useAppDispatch();
  const { t } = useTranslation();

  useEffect(() => {
    if (user && !sync) {
      client.activate();
    }
  }, [dispatch, t, user, sync]);

  return props.children;
}

AndroidManifest.xml

<application
     ...
      android:usesCleartextTraffic="true"
      ...">

And the error is:

{"isTrusted": false, "message": "Expected HTTP 101 response but was '403 '"}

Tried everything on the internet. Not working.

[flohhhh]

Hi @zju1 , in adding stompVersions it worked.

const client = new StompJs.Client({
      brokerURL,
      connectHeaders: headers,
      stompVersions: new Versions([Versions.V1_2]), // <---------- Add this
      reconnectDelay: RECONNECT_DELAY,
      forceBinaryWSFrames: true, // Necessary to Android
      debug: (msg) => console.log(msg),
      logRawCommunication: true,
      onWebSocketError: (e) => console.log('-----e', e),
      onChangeState: (state) => console.log('-----sate', state),
    })

[shivam-modi]

Hi @flohhhh, that doesn't worked for me import { Client, Stomp, Versions } from "@stomp/stompjs";

`useEffect(() => { const stompClient = new Client({ brokerURL: 'ws://192.168.1.34:8080/topic', onConnect: () => { console.log('Connected to WebSocket');

    stompClient.subscribe('87320', (message) => {
      try {
        const receivedMessage = JSON.parse(message.body);
        console.log('Received:', receivedMessage);
      } catch (error) {
        console.error('Parsing error:', error);
      }
    });
  },
  stompVersions: new Versions([Versions.V1_2]), 
  // reconnectDelay: RECONNECT_DELAY,
  forceBinaryWSFrames: true, // Necessary to Android
  logRawCommunication: true,
  debug: (msg) => console.log(msg),
  onStompError: (frame) => {
    console.error('STOMP Error:', frame);
  },
  onWebSocketError: (error) => {
    console.error('WebSocket Error:', error);
  }
});

stompClient.activate();

return () => stompClient.deactivate();

}, []); `

using backend built usinng springboot, works fine with normal index.js