React-native: Websocket onclose function is not called in Android

[ttys026]

• [x] I have reviewed the documentation
• [x] I have searched existing issues
• [x] I am using the latest React Native version

Websocket connection closed by server will not trigger onclose callback.

Environment

Environment:
OS: macOS High Sierra 10.13.3
Node: 7.10.1
Yarn: Not Found
npm: 5.7.1
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 2.3 AI-162.3871768

Packages: (wanted => installed)
react: 16.2.0 => 16.2.0
react-native: ^0.53.0 => 0.53.0

For websocket server-side, I use ratchetPHP

Steps to Reproduce

connect = () => {
    this.ws = new WebSocket('URL')
    this.ws.onmessage = (e) => {
      json = JSON.parse(e.data)
      console.log(json)
    }

    this.ws.onclose = (e) => {
      console.log('closed')
    }
}

componentWillReceiveProps(nextProps){
  this.connect()
}

Then close the connection on server.

Expected Behavior

onclose function should be called.

Actual Behavior

When building in Android,
close request send from client will trigger the onclose function,
but RN can't detect a connection closed by server.

[react-native-bot]

Thanks for posting this! It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest release, v0.55?

Thank you for your contributions.

[ttys026]

Now I update to react-native 0.55.0

Environment:
  OS: macOS High Sierra 10.13.3
  Node: 7.10.1
  Yarn: Not Found
  npm: 5.7.1
  Watchman: 4.9.0
  Xcode: Xcode 9.2 Build version 9C40b
  Android Studio: 2.3 AI-162.3871768

Packages: (wanted => installed)
  react: ^16.3.1 => 16.3.1
  react-native: ^0.55.0 => 0.55.0

The same issue is still happening.

If I close the connection from server, the onclose is not called.
If I close the connection from client, it breaks on:
WebSocketModule.close got 1 arguments, expected 3.

which is caused by b9be289

[favonianpine]

Root cause:

square/okhttp#3386

When I use okhttp to achieve WebSocket connection, when received onClosing (WebSocket webSocket, int code, String reason) callback, the call must be manually () method to close the resources.
See the source code found that if the client is passive disconnect, do not manually call the close () method will lead to onClosed (WebSocket webSocket, int code, String reason) method can not callback, the resources can not be recycled.

We need to handle WebSocket onClosing() method and call websocket.close() in it. However, there's no onClosing() in React Native Websocket library. That's why

If I close the connection from server, the onclose is not called.

It is a bug.

[Tonacatecuhtli]

Hi same issue here.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[westcode]

This issue is still there @ latest version.

[cristiantx]

Using 0.56.0 with the same issue.
Is there any workaround to know when the WebSocket closes?

[mmazzarolo]

I can confirm the issue is still here on the latest version of RN.

I was able to fix it by adding the following listener to react-native/ReactAndroid/src/main/java/com/facebook/react/modules/websocket/WebSocketModule.java:

@Override
public void onClosing(WebSocket webSocket, int code, String reason) {
    webSocket.close(code, reason);
}

[GetSource1234]

Got the same issue on the RN 0.57.1

[PeterKruzlics]

@mmazzarolo it seems your fix is now included? https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/modules/websocket/WebSocketModule.java#L151

Fixed in v0.57.6: https://github.com/react-native-community/react-native-releases/blob/master/CHANGELOG.md#android-specific

[wuyue1019]

Still the same issue on the latest RN 0.57.7. Confirmed the onClosing fix code is there, but no luck.
This issue has blocked my RN upgrading since 0.44.3 -_-!
Did I miss anything?

. React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: (4) x64 Intel(R) Core(TM) i5-6600 CPU @ 3.30GHz
Memory: 2.23 GB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.4.0 - /usr/local/bin/node
Yarn: 1.3.2 - /usr/local/bin/yarn
npm: 5.3.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
Android SDK:
API Levels: 23, 24, 26, 27
Build Tools: 23.0.1, 23.0.3, 26.0.1, 27.0.3
System Images: a... | Intel x86 Atom_64, a...gle_apis | Google APIs Intel x86 Atom_64 ..., a... | Intel x86 Atom_64, a...google_apis | Google APIs Intel x86 Atom Sys...
IDEs:
Android Studio: 3.1 AI-173.4907809
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: 16.6.1 => 16.6.1
react-native: 0.57.7 => 0.57.7
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7

[wuyue1019]

I guess to be more accurate, when the server side closed the connection, my app got onerror first after a few seconds' hung-up and then the onclose message. But since onerror came in first, my app would start to try a reconnection ... . Is onerror expected first in this case? iPhone works fine.

[Salakar]

👋 hey all, as mentioned by @PeterKruzlics above, this was fixed in v0.57.6 so I'll go ahead and close this now.

@wuyue1019 that sounds like a different issue to the original issue specified here. If this is still a concern for you please could you raise a new detailed issued with a reproducible example if possible so it can be looked at?

Thank you