rn-eventsource-reborn
v1.0.5
Published
An EventSource implementation built on top of React Native's low-level Networking API
Downloads
3,671
Readme
rn-eventsource-reborn
This package that implements the EventSource web standard with some improvements
over forked library using low-level React Native networking primitives.
There are several EventSource
polyfills today, but none of them satisfy the following three goals:
- Don't depend on the Node.js standard library
- The Node.js standard library isn't supported by React Native.
- Don't depend on a native module
- This makes it harder to work with simple Expo-based apps.
- Don't implement with XmlHttpRequest
- Existing polyfills that use XmlHttpRequest are not optimal for streaming sources because they cache the entire stream of data until the request is over.
Thanks to the low-level network primitives exposed in React Native 0.62, it became possible to build this native EventSource
implementation for React Native. See this thread in react-native-community for a longer discussion around the motivations of this implementation.
Usage
Install the package in your React Native project with:
npm install --save rn-eventsource-reborn
To import the library in your project:
import RNEventSource from 'rn-eventsource-reborn';
Once imported, you can use it like any other EventSource
. See the MDN Documentation for more usage examples.
const source = new RNEventSource(
'https://www.example.com/stream?token=blah',
{
headers: {
Authorization: 'Bearer hsd8shs8chs89dvsdhv9sdhvs9duvshv23vd',
},
}
);
source.addEventListener('open', (event) => {
console.log('Connection was opened!');
});
Improvements over the Standard
New "state" event
It triggers on every readyState change. That can be useful, for example, if you want to store the state of your EventSource in Redux and change your app interface based on this value.
source.addEventListener('state', (event) => {
// event.data: 0 | 1 | 2
console.log('Received new state: ', event.data);
});
Exposed "connect", "reconnect" and "changeReadyState" methods
- connect() - creates new connection with the same EventSource instance if
readyState
isn'tCLOSED
. It uses previous options, headers, etc. - reconnect(reason: string) - change
readyState
value toCONNECTING
state, dispatcherror
event and callconnect()
. It uses previous options, headers, etc. - changeReadyState(state: 0 | 1 | 2) - dispatch
state
event and changereadyState
value.
Troubleshooting
"EventSource don't works on Android in debug mode"
Try to disable Flipper network interceptor. Go to android/app/src/debug/java//ReactNativeFlipper.java and comment next lines of code:
...
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 ReactFlipperPlugin());
client.addPlugin(new DatabasesFlipperPlugin(context));
client.addPlugin(new SharedPreferencesFlipperPlugin(context));
client.addPlugin(CrashReporterPlugin.getInstance());
NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
// try to comment this code
________________________
NetworkingModule.setCustomClientBuilder(
new NetworkingModule.CustomClientBuilder() {
@Override
public void apply(OkHttpClient.Builder builder) {
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
}
}
);
_______________________
client.addPlugin(networkFlipperPlugin);
client.start();
...
}
...
}