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?