Connection issue in React Native

[kum-deepak]

Opened on behalf of @hdvreyes:

I can't seem to establish a connection unless my debugger is on. Am running on "react-native": "0.63.4" and "@stomp/stompjs": "^6.0.0". ` const client = Stomp.over(function() { return new SockJS(socketUrl); });

client.reconnectDelay = 10000; client.heartbeatIncoming = 5000; client.heartbeatOutgoing = 5000; client.forceBinaryWSFrames = true; client.appendMissingNULLonIncoming = true;

 client.connect(headers, () => {
    client.subscribe(topic, callback, headers);
  });

` Has anyone encountered the same issue? thanks!

[kum-deepak]

Usually, it happens because of missing polyfills. This is a peculiar issue, in debug mode, React Native uses a full browser which is not the case in production mode. That causes the list of polyfills to be different in both modes. Please see https://stomp-js.github.io/guide/stompjs/rx-stomp/ng2-stompjs/pollyfils-for-stompjs-v5.html#in-react-native

Few topics related to React Native has been compiled at https://stomp-js.github.io/workaround/stompjs/rx-stomp/ng2-stompjs/react-native-additional-notes.html

Please let me know if it helps.

In addition, Stomp.over and client.connect are v4 syntax and are available as compatibility, i.e., mixing of newer features may not work. Please see https://stomp-js.github.io/#upgrading and https://stomp-js.github.io/#getting-started.

[hdvreyes]

Thank for your response, will do further digging on this. I'll keep you posted.

[hdvreyes]

@kum-deepak follow-up on this. Able to make it work even without debugger on. This helped me a lot: https://github.com/stomp-js/stompjs/issues/149. However, I noticed that on an Android emulator the connection can't seem to establish/connect?

[NguyenThiHan]

@kum-deepak I facing with issue the same @hdvreyes an Android emulator the connection can't seem to establish/connect but IOS simulator work ok. Now I'm using: "react-native": "0.66.4" "@stomp/stompjs": "^6.1.2",

const client = new Client({
  brokerURL: 'wss://xxxx:xxxx'
  connectHeaders: {
    login: 'xxxx',
    passcode: 'xxxxx',
  },
  debug: function (error) {
    console.log(error);
  },
});
client.appendMissingNULLonIncoming = true;
client.discardWebsocketOnCommFailure = true;

Error log: Connection closed to wss://xxxx:xxxx

[kum-deepak]

I am sorry, I am unable to suggest anything more than https://stomp-js.github.io/workaround/stompjs/rx-stomp/ng2-stompjs/react-native-additional-notes.html. Please try the first approach. It may not help, but try adding client.forceBinaryWSFrames = true;

[iib0011]

place this inside index.js or App.jsx

import {TextEncoder} from 'text-encoding';

global.TextEncoder = TextEncoder;