With React-Native, SSE aka EventSource does not receive Events on Android

[kovkev]

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

I am trying to use rn-eventsource and react-native-event-source and they always get 200 status when sending a request to the server. However! I am able to receive Events on:

• iOS emulator
• my iOS device

but not from:

• Android emulator
• my Android device

I can get webpages with the browser provided EventSource to work on Chrome on ios and on Android.

It seems like this is an issue with React-Native on Android.

React Native version:

react-native info
info Fetching system and libraries information...
System:
    OS: macOS 10.15.4
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
    Memory: 62.51 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 13.3.0 - ~/.nvm/versions/node/v13.3.0/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.13.1 - ~/.nvm/versions/node/v13.3.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK: Not Found
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6241897
    Xcode: 11.4.1/11E503a - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.2 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0
    react-native: ^0.62.2 => 0.62.2
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Install rn-eventsource or react-native-event-source
2. Setup a simple EventSource("https://..../sse_listen")
3. setup .onmessage, .onopen and .onerror which do console.log
4. Look at the logs emitted by .onmessage .onopen and .onerror
5. Notice that logs appear for iOS but not for Android

Expected Results

Events appear on Android

More details:
I'm pasting the comments I added to this thread : react-native-community/discussions-and-proposals#99
::

I'm having trouble getting this to work at all on my Android device and on my Android emulator. The server does receive the GET request, but the client never receives any messages. I'm not sure how to troubleshoot or debug this at all.

It works on ios and ios emulator, it works in Chrome App on ios and Android. I tried using mitmweb but that didn't show the returned Events.

In the Android Studio Network Traffic Monitoring tool, the returned events do not show up.

tail -f /var/log/nginx/error.log doesn't seem to show any issues.

Here are the differences in the headers sent in the request:

Android
{
"x-forwarded-for":"ip",
"host":"mysite.com",
"connection":"close",
"cache-control":"no-store",
"accept":"text/event-stream",
"user-agent":"okhttp/3.14.1"
"accept-encoding":"gzip",
}

iphone:
{
"x-forwarded-for":"ip",
"host":"mysite.com",
"connection":"close",
"cache-control":"no-store"
"accept":"text/event-stream",
"user-agent":"AppName/1 CFNetwork/1121.2.2 Darwin/19.3.0",
"accept-encoding":"gzip, deflate, br",
"accept-language":"en-us",

}

I'm not sure if the issue is with RCTNetworking or with rn-eventsource. My guess is that since this is failing with both rn-eventsource and with simple xhr, that the issue is in RCTNetworking?

[kovkev]

Note, if I use https://github.com/JonnyBGod/react-native-eventsource , I am able to have .onmessage calls when an Event is sent from the server, but I am unable to see what was sent:

[Tue May 05 2020 19:31:21.748]  LOG      {"data": undefined, "type": "message"}

[kovkev]

Also, my ec2 instance runs nginx and routes the requests to Express. If that makes any difference. You can see the request headers above^ . The response headers should be the same I believe?

[selvinsmart]

Do you still have a problem with this?

[kovkev]

Yes, it's still not working on Android

[xnguyen9a10]

Note, if I use https://github.com/JonnyBGod/react-native-eventsource , I am able to have .onmessage calls when an Event is sent from the server, but I am unable to see what was sent:

[Tue May 05 2020 19:31:21.748]  LOG      {"data": undefined, "type": "message"}

Im just facing same problem - "react-native-eventsource": "0.0.2", I open node_modules/react-native-eventsource/EventSource.js
Change

var event = new EventSourceEvent(ev.type, {
         data:ev.message
       });

To:

var event = new EventSourceEvent(ev.type, {
         data:ev.message || ev.data
       });

then it worked like a charm
Hope this helps

[kuznetsov-from-wonderland]

Note, if I use https://github.com/JonnyBGod/react-native-eventsource , I am able to have .onmessage calls when an Event is sent from the server, but I am unable to see what was sent:

[Tue May 05 2020 19:31:21.748]  LOG      {"data": undefined, "type": "message"}

Im just facing same problem - "react-native-eventsource": "0.0.2", I open node_modules/react-native-eventsource/EventSource.js
Change

var event = new EventSourceEvent(ev.type, {
         data:ev.message
       });

To:

var event = new EventSourceEvent(ev.type, {
         data:ev.message || ev.data
       });

then it worked like a charm
Hope this helps

How you've managed to run this package? Did you link it manually? I face the same problem. ES events works just fine on ios and on Android simulator. But it does not work on real devices

[fkurniaw]

unfortunately i had to write a native module for android based on OkSse and register it on react-native to get SSE working

...
import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.Response;
import okhttp3.Headers;
import okhttp3.FormBody;

import com.here.oksse.OkSse;
import com.here.oksse.ServerSentEvent;

import java.util.Map;
import java.util.HashMap;

import com.facebook.react.modules.core.DeviceEventManagerModule;

// barebones Android EventSource java implementation
public class EventSource extends ReactContextBaseJavaModule {
    private static ReactApplicationContext reactContext;
    private OkSse okSse;
    private HashMap<String, ServerSentEvent> sseManager;
    private int sseCount;
  
    public EventSource(ReactApplicationContext context) {
        super(context);
        reactContext = context;
        this.okSse = new OkSse();
        this.sseManager = new HashMap(100);
    }

    public String getName() {
        return "EventSource";
    }

    // returns an SSE id which you need to refer back to for closing the connection
    // assumes that you're making a GET request, but you can also modify this to accept POST/PATCH requests as well
    @ReactMethod
    public void initRequest(
        String path,
        ReadableMap headersMap,
        Promise promise
    ) { 
        Request.Builder requestBuilder = new Request.Builder().url(path);
        HashMap<String, Object> headersHashMap = headersMap.toHashMap();
        for (Map.Entry<String, Object> entry : headersHashMap.entrySet()) {
            String headerKey = entry.getKey();
            String headerValue = (String) entry.getValue(); // assumes that the key-value JSON passed into headers are <String, String>
            requestBuilder.addHeader(headerKey, headerValue);
        }

        Request request = requestBuilder.build();

        String sseRefID = String.valueOf(this.sseCount) + " - " + path;
        ServerSentEvent sse = this.okSse.newServerSentEvent(request, new ServerSentEvent.Listener() {
            @Override
            public void onOpen(ServerSentEvent sse, Response response) {
            }
        
            @Override
            public void onMessage(ServerSentEvent sse, String id, String event, String message) {
                // When a message is received
                WritableMap map = new WritableNativeMap();
                map.putString("id", id);
                map.putString("event", event);
                map.putString("message", message);

                reactContext
                    .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                    .emit(sseRefID, map);
            }
        
            @WorkerThread
            @Override
            public void onComment(ServerSentEvent sse, String comment) {
               WritableMap map = new WritableNativeMap();
               map.putString("comment", comment);
               reactContext
                    .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                    .emit(sseRefID, map); // this identifies the HTTP connection and respective SSEs we want to be listening to on JS
            }
        
            @WorkerThread
            @Override
            public Request onPreRetry(ServerSentEvent sse, Request sseRequest) {
                return request;
            }

            @WorkerThread
            @Override
            public boolean onRetryTime(ServerSentEvent sse, long milliseconds) {
                return true; // True to use the new retry time received by SSE
            }
        
            @WorkerThread
            @Override
            public boolean onRetryError(ServerSentEvent sse, Throwable throwable, Response response) {
                return true; // True to retry, false otherwise
            }
        
            @WorkerThread
            @Override
            public void onClosed(ServerSentEvent sse) {
                // Channel closed
                sse.close();
            }
        });
        this.sseManager.put(sseRefID, sse);
        this.sseCount++;
        promise.resolve(sseRefID);
    }

    @ReactMethod
    public void close(String sseRefID, Promise promise) {
        try {
            this.sseManager.get(sseRefID).close();
            this.sseManager.remove(sseRefID);
            promise.resolve(true);
        } catch (Exception e) {
            System.out.println("failed to close connection");
            promise.resolve(false);
        }
    }
}

on the react-native side

// NativeAndroidEventSource.js
import { NativeEventEmitter, NativeModules, Platform } from 'react-native';

export const eventEmitter = Platform.OS === 'ios'
    ? null
    : new NativeEventEmitter(NativeModules.EventSource);

export default Platform.OS === 'ios' ? null : NativeModules.EventSource;

...
// other module
import AndroidEventSource from './NativeAndroidEventSource.js';

...
// inside an async function
const url = 'http:localhost:3000/sse';
const headers = { 'Content-Type': 'text/event-stream' };
const sseRefID = await AndroidEventSource.initRequest(
    url,
    headers
);
AndroidEventSource.addListener(sseRefID, { message } => {
    console.log(message);
});

for ios you can use the existing XHR-based EventSource polyfills

[TheSalarKhan]

I am having the same issue but this is what I found. I am using react-native-event-source and following is a comment in its code in EventSource.js file:

https://github.com/jordanbyron/react-native-event-source/blob/master/EventSource.js#L47

And just as I killed the server all the events came trickling down, as killing the server kills the connections. So I'm guessing that onreadystatechange on android does not trigger unless the connection is closed from the server. I am not sure why and what but killing the server or closing the connections from the server side triggers the event listeners.

[TheSalarKhan]

Unless Android changes the way it handles stuff this bug doesn't seem to be going away. For now there are some really good native libraries. I am using https://github.com/gpsgate/react-native-eventsource and it works like a dream. However its a non pure js solution so really relies upon updated code.

[tmirun]

hey guys, I found these interesting library, to try to solve the android problem with pure js solution:

• https://github.com/NepeinAV/rn-eventsource-reborn (a fork of rn-eventsource)
• https://github.com/NepeinAV/react-sse-hooks

[tmirun]

I understand the big problem of polyfill is XHR of RN doesn't work the same as html5

🤔 so it is some thing should change in the core of RN?

[GaylordP]

Hello,

I encountered the same problem, I tried 4 libraries and always the same observation: the mesages are displayed on iOS, but not on Android.

Any ideas ?
thank you in advance

[axeljeremy7]

https://github.com/gpsgate/react-native-eventsource
I try this on android and no response, I'm in rn 0.62

[thiago7almeida]

Try to disable Flipper network interceptor. Go to android/app/src/debug/java//ReactNativeFlipper.java and comment next lines of code:

  // try to comment this code
  NetworkingModule.setCustomClientBuilder(
    new NetworkingModule.CustomClientBuilder() {
      @Override
      public void apply(OkHttpClient.Builder builder) {
        builder.addNetworkInterceptor(new     FlipperOkhttpInterceptor(networkFlipperPlugin));
      }
    }
  );

[tmirun]

i will tell to flipper team if this is a bug, or if they have some solution to solve it

[Slava-Ini]

Most of the sse React-Native libraries are using xhr, and it doesn't seem to be working properly on Android.
I've struggled a lot lately with other unrelated issues and they all have been caused by xhr (though it was working well on iOS) , after swapping it to node-fetch everything started to work fine

[ninadjoshi20]

Most of the sse React-Native libraries are using xhr, and it doesn't seem to be working properly on Android. I've struggled a lot lately with other unrelated issues and they all have been caused by xhr (though it was working well on iOS) , after swapping it to node-fetch everything started to work fine

Hi can you share the node-fetch implementation of event source. Facing all the above issues for react-native-sse library in Android

[sevoflurane-molecules]

Try to disable Flipper network interceptor. Go to android/app/src/debug/java//ReactNativeFlipper.java and comment next lines of code:

  // try to comment this code
  NetworkingModule.setCustomClientBuilder(
    new NetworkingModule.CustomClientBuilder() {
      @Override
      public void apply(OkHttpClient.Builder builder) {
        builder.addNetworkInterceptor(new     FlipperOkhttpInterceptor(networkFlipperPlugin));
      }
    }
  );

The flipper network interceptor was in fact responsible for react-native-sse not working on Android. The above did not work for me, but the following did. In this code, I have added a boolean variable shouldAddInterceptor that you can set based on your conditions. If shouldAddInterceptor is true, the interceptor will be added. If false, it won't be added. You will need to replace shouldAddInterceptor with your condition for whether or not to add the Flipper network interceptor:

`
public class ReactNativeFlipper {
public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
if (FlipperUtils.shouldEnableFlipper(context)) {
final FlipperClient client = AndroidFlipperClient.getInstance(context);

  client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults()));
  client.addPlugin(new DatabasesFlipperPlugin(context));
  client.addPlugin(new SharedPreferencesFlipperPlugin(context));
  client.addPlugin(CrashReporterPlugin.getInstance());

  NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
  
  boolean shouldAddInterceptor = false; // set this based on your conditions
  
  if (shouldAddInterceptor) {
    NetworkingModule.setCustomClientBuilder(
      new NetworkingModule.CustomClientBuilder() {
        @Override
        public void apply(OkHttpClient.Builder builder) {
          builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
        }
      });
  }

  client.addPlugin(networkFlipperPlugin);
  client.start();

  // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized
  // Hence we run if after all native modules have been initialized
  ReactContext reactContext = reactInstanceManager.getCurrentReactContext();
  if (reactContext == null) {
    reactInstanceManager.addReactInstanceEventListener(
        new ReactInstanceEventListener() {
          @Override
          public void onReactContextInitialized(ReactContext reactContext) {
            reactInstanceManager.removeReactInstanceEventListener(this);
            reactContext.runOnNativeModulesQueueThread(
                new Runnable() {
                  @Override
                  public void run() {
                    client.addPlugin(new FrescoFlipperPlugin());
                  }
                });
          }
        });
  } else {
    client.addPlugin(new FrescoFlipperPlugin());
  }
}

}
}
`

You can just copy/paste this over existing code in the ReactNativeFlipper.java file. Just leave the imports how they are at the top of the file. After this, Android received server sent events as intended with only react-native-sse and react-native-url-polyfill packages. iOS worked fine without any changes.

[dullkingsman]

Hey guys. I went ahead and implemented react-native-oksse. A wrapper around the java extension library oksse. Check it out.

[MartinHarkins]

In case you are using expo SDK 50, you could try with the plugins i've developed to patch the Android SSE issues while in debug variant (both are needed):

• react-native: comment out flipper
• expo: patch ChromeDevTools Interceptor

expo-sse-patch

Edit: note to the react-native team, perhaps the flipper issue is caused by the same type of problem as described there: expo/expo#27526 ?