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),
    })