status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity
react-native/RNTester/js
History
Philipp von Weitershausen ed903099b4 Add blob implementation with WebSocket integration 
Summary:
This is the first PR from a series of PRs grabbou and me will make to add blob support to React Native. The next PR will include blob support for XMLHttpRequest.

I'd like to get this merged with minimal changes to preserve the attribution. My next PR can contain bigger changes.

Blobs are used to transfer binary data between server and client. Currently React Native lacks a way to deal with binary data. The only thing that comes close is uploading files through a URI.

Current workarounds to transfer binary data includes encoding and decoding them to base64 and and transferring them as string, which is not ideal, since it increases the payload size and the whole payload needs to be sent via the bridge every time changes are made.

The PR adds a way to deal with blobs via a new native module. The blob is constructed on the native side and the data never needs to pass through the bridge. Currently the only way to create a blob is to receive a blob from the server via websocket.

The PR is largely a direct port of https://github.com/silklabs/silk/tree/master/react-native-blobs by philikon into RN (with changes to integrate with RN), and attributed as such.

> **Note:** This is a breaking change for all people running iOS without CocoaPods. You will have to manually add `RCTBlob.xcodeproj` to your `Libraries` and then, add it to Build Phases. Just follow the process of manual linking. We'll also need to document this process in the release notes.

Related discussion - https://github.com/facebook/react-native/issues/11103

- `Image` can't show image when `URL.createObjectURL` is used with large images on Android

The websocket integration can be tested via a simple server,

```js
const fs = require('fs');
const http = require('http');

const WebSocketServer = require('ws').Server;

const wss = new WebSocketServer({
  server: http.createServer().listen(7232),
});

wss.on('connection', (ws) => {
  ws.on('message', (d) => {
    console.log(d);
  });

  ws.send(fs.readFileSync('./some-file'));
});
```

Then on the client,

```js
var ws = new WebSocket('ws://localhost:7232');

ws.binaryType = 'blob';

ws.onerror = (error) => {
  console.error(error);
};

ws.onmessage = (e) => {
  console.log(e.data);
  ws.send(e.data);
};
```

cc brentvatne ide
Closes https://github.com/facebook/react-native/pull/11417

Reviewed By: sahrens

Differential Revision: D5188484

Pulled By: javache

fbshipit-source-id: 6afcbc4d19aa7a27b0dc9d52701ba400e7d7e98f
 		2017-07-26 08:23:20 -07:00
..
AnimatedGratuitousApp Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
Thumbnails Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ARTExample.js Fix header on RNTester file 2017-06-13 12:18:45 -07:00
AccessibilityAndroidExample.android.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
AccessibilityIOSExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ActionSheetIOSExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ActivityIndicatorExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
AdSupportIOSExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
AlertExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
AlertIOSExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
AnimatedExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
AppStateExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
AssetScaledImageExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
AsyncStorageExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
BorderExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
BoxShadowExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ButtonExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
CameraRollExample.js Codemod prettier to 1.5.2 2017-06-28 12:50:30 -07:00
CameraRollView.js Replace React.createClass with create-react-class 2017-07-07 14:36:01 -07:00
ClipboardExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
DatePickerAndroidExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
DatePickerIOSExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ExampleTypes.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
FlatListExample.js Add inverted option 2017-06-12 22:45:49 -07:00
GeolocationExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ImageCapInsetsExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ImageEditingExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ImageExample.js Replace React.createClass with create-react-class 2017-07-07 14:36:01 -07:00
KeyboardAvoidingViewExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
LayoutAnimationExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
LayoutEventsExample.js Add type for onLayout 2017-07-07 03:06:21 -07:00
LayoutExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
LinkingExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ListExampleShared.js Revert D5388655: BREAKING: Add regenerator-runtime on demand, based on the files 2017-07-19 12:08:38 -07:00
ListViewExample.js Replace React.createClass with create-react-class 2017-07-07 14:36:01 -07:00
ListViewGridLayoutExample.js Replace React.createClass with create-react-class 2017-07-07 14:36:01 -07:00
ListViewPagingExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
MaskedViewExample.js MaskedViewIOS -- A way to apply alpha masks to views on iOS 2017-07-11 15:05:57 -07:00
ModalExample.js iOS `presentationStyle` Modal Appearance 2017-06-20 19:22:57 -07:00
MultiColumnExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
NativeAnimationsExample.js Native Animated - Support Animated.loop on iOS 2017-05-26 03:30:33 -07:00
NavigatorIOSColorsExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
NavigatorIOSExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
NetInfoExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
OrientationChangeExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
PanResponderExample.js Replace React.createClass with create-react-class 2017-07-07 14:36:01 -07:00
PermissionsExampleAndroid.android.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
PickerExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
PickerIOSExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
PointerEventsExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ProgressBarAndroidExample.android.js Replace React.createClass with create-react-class 2017-07-07 14:36:01 -07:00
ProgressViewIOSExample.js Replace React.createClass with create-react-class 2017-07-07 14:36:01 -07:00
PushNotificationIOSExample.js Expose content-available APS key for iOS silent push 2017-06-19 16:46:31 -07:00
RCTRootViewIOSExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
RNTesterActions.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
RNTesterApp.android.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
RNTesterApp.ios.js Deploy v0.47.0 to xplat/js 2017-05-25 23:00:37 -07:00
RNTesterBlock.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
RNTesterButton.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
RNTesterExampleContainer.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
RNTesterExampleList.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
RNTesterList.android.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
RNTesterList.ios.js MaskedViewIOS -- A way to apply alpha masks to views on iOS 2017-07-11 15:05:57 -07:00
RNTesterNavigationReducer.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
RNTesterPage.js Remove RN fiber createClass wrapper around View 2017-06-21 12:38:06 -07:00
RNTesterSettingSwitchRow.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
RNTesterStatePersister.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
RNTesterTitle.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
RTLExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
RefreshControlExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
RootViewSizeFlexibilityExampleApp.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ScrollViewExample.js Add support for flashScrollIndicators on iOS 2017-06-06 13:06:48 -07:00
ScrollViewSimpleExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
SectionListExample.js Render section footer in <SectionList> sections with no data 2017-05-25 10:30:55 -07:00
SegmentedControlIOSExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
SetPropertiesExampleApp.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ShareExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
SliderExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
SnapshotExample.js Fix SnapshotExample 2017-06-27 09:40:24 -07:00
StatusBarExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
SwipeableListViewExample.js Replace React.createClass with create-react-class 2017-07-07 14:36:01 -07:00
SwitchExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
TabBarIOSExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
TextExample.android.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
TextExample.ios.js Replace React.createClass with create-react-class 2017-07-07 14:36:01 -07:00
TextInputExample.android.js Fixed <TextInput>.onContentSizeChange on Android 2017-05-25 19:31:31 -07:00
TextInputExample.ios.js TextInput: Refined contentSize calculation 2017-07-18 14:46:22 -07:00
TimePickerAndroidExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
TimerExample.js Replace React.createClass with create-react-class 2017-07-07 14:36:01 -07:00
ToastAndroidExample.android.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ToolbarAndroidExample.android.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
TouchableExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
TransformExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
TransparentHitTestExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
URIActionMap.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
VibrationExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
VibrationIOSExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ViewExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ViewPagerAndroidExample.android.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
WebSocketExample.js Add blob implementation with WebSocket integration 2017-07-26 08:23:20 -07:00
WebViewExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
XHRExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
XHRExampleBinaryUpload.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
XHRExampleCookies.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
XHRExampleDownload.js Upgrade to Flow v0.50.0 2017-07-20 14:48:56 -07:00
XHRExampleFetch.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
XHRExampleFormData.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
XHRExampleHeaders.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
XHRExampleOnTimeOut.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
bunny.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
createExamplePage.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
flux@3x.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
hawk.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
helloworld.html Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
http_test_server.js Add blob implementation with WebSocket integration 2017-07-26 08:23:20 -07:00
imageMask.png MaskedViewIOS -- A way to apply alpha masks to views on iOS 2017-07-11 15:05:57 -07:00
messagingtest.html Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
relay@3x.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
slider-left.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
slider-left@2x.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
slider-right.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
slider-right@2x.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
slider.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
slider@2x.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
uie_comment_highlighted@2x.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
uie_comment_normal@2x.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
uie_thumb_big.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
uie_thumb_normal@2x.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
uie_thumb_selected@2x.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
websocket_test_server.js Add blob implementation with WebSocket integration 2017-07-26 08:23:20 -07:00