Expose RCTNetworking as a public 'Networking' API

[adamchel]

Summary

This PR introduces the EventSource web standard as a first-class networking feature in React Native. In the discussion we had in February at react-native-community/discussions-and-proposals#99, @cpojer indicated that the RN maintainers would be willing to accept a PR to offer this functionality.

The linked discussion goes into detail about why this change must happen in React Native Core as opposed to a community library, but the tl;dr is that XmlHttpRequest doesn't let you do streaming in a resource-efficient way, since it holds onto the entire response buffer until the request is complete. When processing a stream that might last for a long time, that's not ideal since there might be a lot of data in that buffer that is now useless to maintain.

For more information about EventSource and server-sent events, check out these links:

• EventSource on MDN
• Using server-sent events on MDN
• WHATWG spec for server-sent events

I've tried as best as I can to satisfy the linked specification so that this is as standard as possible.

One of the projects I maintain has an ideal use case for this feature. The SDK for MongoDB Stitch (a backend-as-a-service for the MongoDB database) has the ability to open a "change stream" to watch for changes that happen on a database. However, in our JavaScript SDK, this feature depends on EventSource, because the backend service implements the one-way streaming protocol with server-sent events. We know there is demand for this feature because users have requested it: mongodb/stitch-js-sdk#209.

If this PR will be accepted, I am happy to update the Networking documentation at https://facebook.github.io/react-native/docs/network

Changelog

[JavaScript] [Added] Implements the EventSource web standard in Libraries/Networking
[JavaScript] [Added] Exposes the EventSource implementation in Libraries/Core/setUpXHR.js

Test Plan

To test the EventSource implementation, I added a comprehensive set of unit tests that cover the basic functionality, as well as edge cases that are laid out in the spec. See EventSource-test.js for the cases that the tests handles. For convenience, I've also included the test descriptions as produced by the jest test output here.

 PASS  Libraries/Network/__tests__/EventSource-test.js
  EventSource
    ✓ should pass along the correct request parameters (527ms)
    ✓ should transition readyState correctly for successful requests (4ms)
    ✓ should call onerror function when server responds with an HTTP error (2ms)
    ✓ should call onerror on non event-stream responses (1ms)
    ✓ should call onerror function when request times out (1ms)
    ✓ should call onerror if connection cannot be established (1ms)
    ✓ should call onopen function when stream is opened (1ms)
    ✓ should follow HTTP redirects (2ms)
    ✓ should call onmessage when receiving an unnamed event (2ms)
    ✓ should handle events with multiple lines of data (1ms)
    ✓ should call appropriate handler when receiving a named event (1ms)
    ✓ should receive multiple events (1ms)
    ✓ should handle messages sent in separate chunks (1ms)
    ✓ should forward server-sent errors
    ✓ should ignore comment lines (1ms)
    ✓ should properly set lastEventId based on server message (1ms)
    ✓ should properly set reconnect interval based on server message
    ✓ should handle messages with non-ASCII characters (1ms)
    ✓ should properly pass along withCredentials option (3ms)
    ✓ should properly pass along extra headers (1ms)
    ✓ should properly pass along configured lastEventId (2ms)
    ✓ should reconnect gracefully and properly pass lastEventId (9ms)
    ✓ should stop attempting to reconnect after five failed attempts (2ms)

As a manual E2E test, I also added streaming support to the Stitch React Native SDK, and tested it with my React Native EventSource implementation, and confirmed that our EventSource-based streaming implementation worked with this EventSource implementation.

• Source code for E2E app test: https://gist.github.com/adamchel/6db456c1a851ed7dd20b54f6db3a6759
• PR for streaming support on our React Native SDK: STITCH-2499 Add support for 'watch' in React Native mongodb/stitch-js-sdk#294
• Very brief video demonstrating E2E functionality: https://youtu.be/-OoIpkAxmcw

[adamchel]

I see that the CI is failing due to a flow error (unit tests and my manual e2e were passing though). When I get a chance, I'll be able to try fixing it (either tomorrow or Monday).

[adamchel]

I've fixed the flow and linter errors, but it seems like js_coverage is still failing with

/home/circleci/react-native/node_modules/coveralls/bin/coveralls.js:18
        throw err;
        ^
Bad response: 422 {"message":"Couldn't find a repository matching this job.","error":true}
Exited with code 1

It seems like other PRs are failing with the same issue, so I'm assuming this is not a regression.

[viaanverma2018]

Is there tentative duration when this would be merged?

[cpojer]

Hey @adamchel,

sorry for getting back to this so late. It's been a hectic summer! It was my impression that the results of the discussion were that they required native changes to enable a JS EventSource implementation. This PR only consists of JavaScript that adds a global object without any native changes. As discussed in the original RFC, such a solution most likely should be a third-party plugin to be installed together with React Native instead of being part of the default RN implementation.

The reason this is important is because with projects such as Lean Core we try to ensure that React Native does not contain features that most people aren't using.

Why does this solution not require native changes now? What has changed? Or, to ask this question in another way: besides not being installed for everyone by default, what is the downside of putting this JS implementation into a third-party package?

[adamchel]

Hey @cpojer, no worries, I totally understand.

The reason this currently can't exist as a third-party package is because it uses the RCTNetworking JS module (under https://github.com/facebook/react-native/tree/master/Libraries/Network), which isn't exposed anywhere in React Native's public API as far as I can tell. If the low-level RCTNetworking API were exposed in React Native's public JS API, we would be able to produce a third party package.

[cpojer]

Do you wanna change this PR to instead expose a Networking top level object in react-native-implementation.js? From 0.62 onwards yo could then make use of this and implement EventSource via JS.

[adamchel]

Sure, I can work on that later this week

[cpojer]

Awesome, thank you! I'll request changes for now.

[adamchel]

Just exposed the API and changed the title of the PR. I wasn't sure if it was necessary to test this, or if there is any other file where this needs to be exposed.

Also, I believe the iOS tests are failing on the CI due to an unrelated CocoaPods error

[cpojer]

Awesome, thank you!

[facebook-github-bot]

@cpojer is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

[react-native-bot]

This pull request was successfully merged by @adamchel in 42ee5ec.

^{When will my fix make it into a release? | Upcoming Releases}

[adamchel]

@cpojer Thanks for getting this through the finish line! Looking forward to when this is released. When that happens, I'll publish a React Native EventSource library based on the original contents of this PR.

[cpojer]

Thank you for all the time you spent on this. I very much appreciate that you were receptive to our feedback to make sure we don't increase React Native's size for all users who may not need this code. The change we have now is minimal and I'm happy to take in changes to the native side to fix issues you may run into when supporting EventSource.

[lddubeau]

@adamchel Thanks for your work on this. I see 0.62.0-rc.1 contains the RCTNetworking change. Is the EventSource library you mentioned you'd publish available somewhere?

[adamchel]

@lddubeau and anyone else curious, I've published a library that implements EventSource using the RCTNetworking primitives!

https://www.npmjs.com/package/rn-eventsource
https://github.com/adamchel/rn-eventsource

I tested in v0.62.0-rc.1 and it seems to work!

[rachelnabors]

Howdy, @adamchel! You mentioned documenting your contribution? We would love it if you could update the docs to reflect this new functionality! In addition to the networking page, readers especially appreciate documenting any new API functionality in our API reference ala https://reactnative.dev/docs/next/animated We have a handy styleguide for you if you need it.

If you need any help getting started or completing this, please reach out to me on Twitter on Discord (RNabors).