React Native + Proteus JS ,WebSocket will not automatically reconnect to Proteus Broker

#1
  • React Native + Proteus JS.

Mobile APP is developed using React Native and connected to Proteus Broker through Proteus JS. Mobile APP USES WebSocket communication mode. However, after the mobile APP is reactivated now, WebSocket will not automatically reconnect to Proteus Broker, resulting in request failure.

#2

Hello @yangjun,

We noticed some fragility in the JS WebSocket client and have made improvements in our new 1.6.0 release. Would you please try upgrading to 1.6.0 and retrying? The Docker container for the broker and the JS client are both labeled 1.6.0 so it should be fairly easy to update your dependency and broker scripts.

Please let us know if the issue persists and we’ll be happy to help investigate!

#3

update Proteus 1.6.0, Websocket used reconnecting-websocket reconnecting-websocket, The question remains.

const options = {
    // WebSocket: WS, // custom WebSocket constructor
    minUptime: 1000,
    debug: true
};

  const _proteusGateway = Proteus.create({
        setup: {
            group: groupName,
            destination: destinationName,
            accessKey: ....,
            accessToken: '....',
            keepAlive: 5000,
            // lifetime: 15000
        },
        transport: {
            url: "ws://host:port/",
            wsCreator: (url) => {
                const rws = new ReconnectingWebSocket(url, [], options);
                return rws;
            }
        },
    });
#4

We’re happy to investigate. You said the mobile app is using react native and when it is “reactivated” the websocket fails to reconnect.

We will have to do some research as we don’t use react native in house. Is the phone fully going to sleep, the app going into background, or something else that I’m not imagining? iOS or Android?

#5

I tested in the browser with proteus-quickstart-js, disabled the host network first, then enabled the host network, the problem reappeared, sent the request, and received no reply.

Hello Service responded with: Hello, World 1555373107292! from helloservice-Kilo-One-Eight-Six
RWS> send <Buffer 00 00 00 00 0c 80 00 00 00 00 00 00 00 00>
RWS> message event
RWS> send <Buffer 00 00 00 00 0c 80 00 00 00 00 00 00 00 00>
RWS> message event
Sending 'World' to HelloService...1555373117303
RWS> send <Buffer 00 00 1c 87 11 00 00 00 61 00 00 00 01 00 03 00 00 00 12 71 75 69 63 6b 73 74 61 72 74 2e 73 65 72 76 65 72 73 00 00 00 41 00 01 00 31 69 6f 2e 6e 65 ... >
RWS> message event
Hello Service responded with: Hello, World 1555373117303! from helloservice-Kilo-One-Eight-Six
RWS> send <Buffer 00 00 00 00 0c 80 00 00 00 00 00 00 00 00>
RWS> message event
RWS> send <Buffer 00 00 00 00 0c 80 00 00 00 00 00 00 00 00>
RWS> message event
Sending 'World' to HelloService...1555373127317
RWS> send <Buffer 00 00 1c 89 11 00 00 00 61 00 00 00 01 00 03 00 00 00 12 71 75 69 63 6b 73 74 61 72 74 2e 73 65 72 76 65 72 73 00 00 00 41 00 01 00 31 69 6f 2e 6e 65 ... >
RWS> send <Buffer 00 00 00 00 0c 80 00 00 00 00 00 00 00 00>
RWS> send <Buffer 00 00 00 00 0c 80 00 00 00 00 00 00 00 00>
Sending 'World' to HelloService...1555373137320
RWS> send <Buffer 00 00 1c 8b 11 00 00 00 61 00 00 00 01 00 03 00 00 00 12 71 75 69 63 6b 73 74 61 72 74 2e 73 65 72 76 65 72 73 00 00 00 41 00 01 00 31 69 6f 2e 6e 65 ... >
RWS> send <Buffer 00 00 00 00 0c 80 00 00 00 00 00 00 00 00>
RWS> send <Buffer 00 00 00 00 0c 80 00 00 00 00 00 00 00 00>
RWS> close event
RWS> connect 1
RWS> removeListeners
RWS> next delay 1000
Hello Service responded with error: Error: RSocketWebSocketClient: Socket closed unexpectedly.
Hello Service responded with error: Error: RSocketWebSocketClient: Socket closed unexpectedly.
RWS> close: already closed
Sending 'World' to HelloService...1555373147335
Sending 'World' to HelloService...1555373157345
Sending 'World' to HelloService...1555373167355
#6

Thank you! We’ll track down the bug and report back when you can expect a fix.

#7

04-23 15:01:42.781 17632 17720 E AndroidRuntime: com.facebook.react.common.JavascriptException: undefined is not a function (evaluating ‘Uint8Array.from(this._hash)’), stack:
04-23 15:01:42.781 17632 17720 E AndroidRuntime: bytes@695:666
04-23 15:01:42.781 17632 17720 E AndroidRuntime: encodeDestinationSetupFrame@702:862
04-23 15:01:42.781 17632 17720 E AndroidRuntime: encodeFrame@699:276
04-23 15:01:42.781 17632 17720 E AndroidRuntime: create@629:4198
04-23 15:01:42.781 17632 17720 E AndroidRuntime: @627:123
04-23 15:01:42.781 17632 17720 E AndroidRuntime: _@2:1514
04-23 15:01:42.781 17632 17720 E AndroidRuntime: d@2:967
04-23 15:01:42.781 17632 17720 E AndroidRuntime: o@2:435
04-23 15:01:42.781 17632 17720 E AndroidRuntime: @623:550
04-23 15:01:42.781 17632 17720 E AndroidRuntime: _@2:1514
04-23 15:01:42.781 17632 17720 E AndroidRuntime: d@2:967
04-23 15:01:42.781 17632 17720 E AndroidRuntime: o@2:435
04-23 15:01:42.781 17632 17720 E AndroidRuntime: @359:293
04-23 15:01:42.781 17632 17720 E AndroidRuntime: _@2:1514
04-23 15:01:42.781 17632 17720 E AndroidRuntime: d@2:967
04-23 15:01:42.781 17632 17720 E AndroidRuntime: o@2:435
04-23 15:01:42.781 17632 17720 E AndroidRuntime: @11:78
04-23 15:01:42.781 17632 17720 E AndroidRuntime: _@2:1514
04-23 15:01:42.781 17632 17720 E AndroidRuntime: d@2:897
04-23 15:01:42.781 17632 17720 E AndroidRuntime: o@2:435
04-23 15:01:42.781 17632 17720 E AndroidRuntime: global code@1270:4
04-23 15:01:42.781 17632 17720 E AndroidRuntime:
04-23 15:01:42.781 17632 17720 E AndroidRuntime: at com.facebook.react.modules.core.ExceptionsManagerModule.showOrThrowError(ExceptionsManagerModule.java:54)
04-23 15:01:42.781 17632 17720 E AndroidRuntime: at com.facebook.react.modules.core.ExceptionsManagerModule.reportFatalException(ExceptionsManagerModule.java:38)
04-23 15:01:42.781 17632 17720 E AndroidRuntime: at java.lang.reflect.Method.invoke(Native Method)
04-23 15:01:42.781 17632 17720 E AndroidRuntime: at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:372)
04-23 15:01:42.781 17632 17720 E AndroidRuntime: at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:158)
04-23 15:01:42.781 17632 17720 E AndroidRuntime: at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
04-23 15:01:42.781 17632 17720 E AndroidRuntime: at android.os.Handler.handleCallback(Handler.java:891)
04-23 15:01:42.781 17632 17720 E AndroidRuntime: at android.os.Handler.dispatchMessage(Handler.java:102)
04-23 15:01:42.781 17632 17720 E AndroidRuntime: at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:29)
04-23 15:01:42.781 17632 17720 E AndroidRuntime: at android.os.Looper.loop(Looper.java:207)
04-23 15:01:42.781 17632 17720 E AndroidRuntime: at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:192)
04-23 15:01:42.781 17632 17720 E AndroidRuntime: at java.lang.Thread.run(Thread.java:784)

#8

Hello yangjun, we’ve looked into this further and it appears that React Native does not support typed arrays in its implementation of JavaScript. Proteus JS uses Uint8Arrays when encoding and decoding the frames it sends over the network, so in order to use Proteus JS with React Native you’ll need to use a polyfill for Uint8Arrays.
It looks like some React Native developers have successfully used core-js to polyfill Uint8Array for react Native, so you might give it a try: https://github.com/zloirock/core-js/tree/v3.0.1 Please let us know if this works for you, or if any other issues come up.

#9

Hi yangjun , I have another update to report. The JS client has moved to a new repository: https://github.com/netifi/netifi-js-client
I’m continuing to look into your issue involving WebSocket reconnection, so I will message you in this thread with news. Thanks for your patience.

#10

We found a bug in the WebSocket error event handlers that we are now working to address. In the meantime, I’ve put together an example branch that works around the reconnect issue. You can see it here: https://github.com/netifi/netifi-quickstart-js/tree/reconnect-workaround The basic idea is that when an error is passed by the gateway’s connection status, the ReconnectingGateway class will recreate the Netifi gateway and then run a callback. Inside the callback, we can set up our servers and clients so that they reference the new gateway.