Skip to content

Commit 69957a1

Browse files
philikonfacebook-github-bot
authored andcommitted
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 - facebook/react-native#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 facebook/react-native#11417 Reviewed By: sahrens Differential Revision: D5188484 Pulled By: javache fbshipit-source-id: 6afcbc4d19aa7a27b0dc9d52701ba400e7d7e98f
1 parent 1be957e commit 69957a1

File tree

4 files changed

+146
-50
lines changed

4 files changed

+146
-50
lines changed

RNTester.xcodeproj/project.pbxproj

Lines changed: 49 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@
3737
1497CFB01B21F5E400C1F8F2 /* RCTFontTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 1497CFA81B21F5E400C1F8F2 /* RCTFontTests.m */; };
3838
1497CFB11B21F5E400C1F8F2 /* RCTEventDispatcherTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 1497CFA91B21F5E400C1F8F2 /* RCTEventDispatcherTests.m */; };
3939
1497CFB31B21F5E400C1F8F2 /* RCTUIManagerTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 1497CFAB1B21F5E400C1F8F2 /* RCTUIManagerTests.m */; };
40-
14AADF051AC3DBB1002390C9 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 14AADF041AC3DB95002390C9 /* libReact.a */; };
4140
14B6DA821B276C5900BF4DD1 /* libRCTTest.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 58005BEE1ABA80530062E044 /* libRCTTest.a */; };
4241
14D6D7111B220EB3001FB087 /* libOCMock.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 14D6D7101B220EB3001FB087 /* libOCMock.a */; };
4342
14D6D71E1B2222EF001FB087 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 147CED4B1AB34F8C00DA3E4C /* libRCTActionSheet.a */; };
@@ -106,6 +105,7 @@
106105
3578590A1B28D2CF00341EDB /* libRCTLinking.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 357859011B28D2C500341EDB /* libRCTLinking.a */; };
107106
39AA31A41DC1DFDC000F7EBB /* RCTUnicodeDecodeTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 39AA31A31DC1DFDC000F7EBB /* RCTUnicodeDecodeTests.m */; };
108107
3D05746D1DE6008900184BB4 /* libRCTPushNotification-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 3D05746C1DE6008900184BB4 /* libRCTPushNotification-tvOS.a */; };
108+
3D0E379D1F1CC77200DCAC9F /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 14AADF041AC3DB95002390C9 /* libReact.a */; };
109109
3D13F8481D6F6AF900E69E0E /* ImageInBundle.png in Resources */ = {isa = PBXBuildFile; fileRef = 3D13F8441D6F6AF200E69E0E /* ImageInBundle.png */; };
110110
3D13F84A1D6F6AFD00E69E0E /* OtherImages.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 3D13F8451D6F6AF200E69E0E /* OtherImages.xcassets */; };
111111
3D299BAF1D33EBFA00FA1057 /* RCTLoggingTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 3D299BAE1D33EBFA00FA1057 /* RCTLoggingTests.m */; };
@@ -114,6 +114,8 @@
114114
3D56F9F11D6F6E9B00F53A06 /* RNTesterBundle.bundle in Resources */ = {isa = PBXBuildFile; fileRef = 3D13F83E1D6F6AE000E69E0E /* RNTesterBundle.bundle */; };
115115
3DB99D0C1BA0340600302749 /* RNTesterIntegrationTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 3DB99D0B1BA0340600302749 /* RNTesterIntegrationTests.m */; };
116116
3DD981D61D33C6FB007DC7BE /* RNTesterUnitTestsBundle.js in Resources */ = {isa = PBXBuildFile; fileRef = 3DD981D51D33C6FB007DC7BE /* RNTesterUnitTestsBundle.js */; };
117+
52C11BBB1EEACA7100C1A058 /* libRCTBlob.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5281CA511EEAC9A700AC40CD /* libRCTBlob.a */; };
118+
52C11BE11EEACA7800C1A058 /* libRCTBlob-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5281CA531EEAC9A700AC40CD /* libRCTBlob-tvOS.a */; };
117119
68FF44381CF6111500720EFD /* RCTBundleURLProviderTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 68FF44371CF6111500720EFD /* RCTBundleURLProviderTests.m */; };
118120
834C36EC1AF8DED70019C93C /* libRCTSettings.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 834C36D21AF8DA610019C93C /* libRCTSettings.a */; };
119121
83636F8F1B53F22C009F943E /* RCTUIManagerScenarioTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 83636F8E1B53F22C009F943E /* RCTUIManagerScenarioTests.m */; };
@@ -392,6 +394,20 @@
392394
remoteGlobalIDString = 139D7E881E25C6D100323FB7;
393395
remoteInfo = "double-conversion";
394396
};
397+
5281CA501EEAC9A700AC40CD /* PBXContainerItemProxy */ = {
398+
isa = PBXContainerItemProxy;
399+
containerPortal = 5281CA4B1EEAC9A700AC40CD /* RCTBlob.xcodeproj */;
400+
proxyType = 2;
401+
remoteGlobalIDString = 358F4ED71D1E81A9004DF814;
402+
remoteInfo = RCTBlob;
403+
};
404+
5281CA521EEAC9A700AC40CD /* PBXContainerItemProxy */ = {
405+
isa = PBXContainerItemProxy;
406+
containerPortal = 5281CA4B1EEAC9A700AC40CD /* RCTBlob.xcodeproj */;
407+
proxyType = 2;
408+
remoteGlobalIDString = ADD01A681E09402E00F6D226;
409+
remoteInfo = "RCTBlob-tvOS";
410+
};
395411
58005BED1ABA80530062E044 /* PBXContainerItemProxy */ = {
396412
isa = PBXContainerItemProxy;
397413
containerPortal = 58005BE41ABA80530062E044 /* RCTTest.xcodeproj */;
@@ -489,6 +505,7 @@
489505
3D2AFAF41D646CF80089D1A3 /* [email protected] */ = {isa = PBXFileReference; lastKnownFileType = image.png; name = "[email protected]"; path = "RNTester/[email protected]"; sourceTree = "<group>"; };
490506
3DB99D0B1BA0340600302749 /* RNTesterIntegrationTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNTesterIntegrationTests.m; sourceTree = "<group>"; };
491507
3DD981D51D33C6FB007DC7BE /* RNTesterUnitTestsBundle.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = RNTesterUnitTestsBundle.js; sourceTree = "<group>"; };
508+
5281CA4B1EEAC9A700AC40CD /* RCTBlob.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTBlob.xcodeproj; path = ../Libraries/Blob/RCTBlob.xcodeproj; sourceTree = "<group>"; };
492509
58005BE41ABA80530062E044 /* RCTTest.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTTest.xcodeproj; path = ../Libraries/RCTTest/RCTTest.xcodeproj; sourceTree = "<group>"; };
493510
68FF44371CF6111500720EFD /* RCTBundleURLProviderTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTBundleURLProviderTests.m; sourceTree = "<group>"; };
494511
83636F8E1B53F22C009F943E /* RCTUIManagerScenarioTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTUIManagerScenarioTests.m; sourceTree = "<group>"; };
@@ -526,8 +543,9 @@
526543
isa = PBXFrameworksBuildPhase;
527544
buildActionMask = 2147483647;
528545
files = (
546+
3D0E379D1F1CC77200DCAC9F /* libReact.a in Frameworks */,
547+
52C11BBB1EEACA7100C1A058 /* libRCTBlob.a in Frameworks */,
529548
2D66FF8F1ECA406D00F0A767 /* libART.a in Frameworks */,
530-
14AADF051AC3DBB1002390C9 /* libReact.a in Frameworks */,
531549
147CED4C1AB3532B00DA3E4C /* libRCTActionSheet.a in Frameworks */,
532550
134454601AAFCABD003F0779 /* libRCTAdSupport.a in Frameworks */,
533551
13E501F11D07A84A005F35D8 /* libRCTAnimation.a in Frameworks */,
@@ -564,6 +582,7 @@
564582
isa = PBXFrameworksBuildPhase;
565583
buildActionMask = 2147483647;
566584
files = (
585+
52C11BE11EEACA7800C1A058 /* libRCTBlob-tvOS.a in Frameworks */,
567586
2D66FF901ECA407E00F0A767 /* libART-tvOS.a in Frameworks */,
568587
2DD323EA1DA2DE3F000FE1B8 /* libReact.a in Frameworks */,
569588
2DD323E31DA2DE3F000FE1B8 /* libRCTAnimation.a in Frameworks */,
@@ -598,6 +617,7 @@
598617
1316A21D1AA397F400C0188E /* Libraries */ = {
599618
isa = PBXGroup;
600619
children = (
620+
5281CA4B1EEAC9A700AC40CD /* RCTBlob.xcodeproj */,
601621
2D66FF5F1ECA405900F0A767 /* ART.xcodeproj */,
602622
14AADEFF1AC3DB95002390C9 /* React.xcodeproj */,
603623
14E0EEC81AB118F7000DECC3 /* RCTActionSheet.xcodeproj */,
@@ -875,6 +895,15 @@
875895
path = RNTester/RNTesterBundle;
876896
sourceTree = "<group>";
877897
};
898+
5281CA4C1EEAC9A700AC40CD /* Products */ = {
899+
isa = PBXGroup;
900+
children = (
901+
5281CA511EEAC9A700AC40CD /* libRCTBlob.a */,
902+
5281CA531EEAC9A700AC40CD /* libRCTBlob-tvOS.a */,
903+
);
904+
name = Products;
905+
sourceTree = "<group>";
906+
};
878907
58005BE51ABA80530062E044 /* Products */ = {
879908
isa = PBXGroup;
880909
children = (
@@ -1117,6 +1146,10 @@
11171146
ProductGroup = 13E5019D1D07A502005F35D8 /* Products */;
11181147
ProjectRef = 13E5019C1D07A502005F35D8 /* RCTAnimation.xcodeproj */;
11191148
},
1149+
{
1150+
ProductGroup = 5281CA4C1EEAC9A700AC40CD /* Products */;
1151+
ProjectRef = 5281CA4B1EEAC9A700AC40CD /* RCTBlob.xcodeproj */;
1152+
},
11201153
{
11211154
ProductGroup = 138DEE031B9EDDDB007F4EA5 /* Products */;
11221155
ProjectRef = 138DEE021B9EDDDB007F4EA5 /* RCTCameraRoll.xcodeproj */;
@@ -1418,6 +1451,20 @@
14181451
remoteRef = 3D507F431EBC88B700B56834 /* PBXContainerItemProxy */;
14191452
sourceTree = BUILT_PRODUCTS_DIR;
14201453
};
1454+
5281CA511EEAC9A700AC40CD /* libRCTBlob.a */ = {
1455+
isa = PBXReferenceProxy;
1456+
fileType = archive.ar;
1457+
path = libRCTBlob.a;
1458+
remoteRef = 5281CA501EEAC9A700AC40CD /* PBXContainerItemProxy */;
1459+
sourceTree = BUILT_PRODUCTS_DIR;
1460+
};
1461+
5281CA531EEAC9A700AC40CD /* libRCTBlob-tvOS.a */ = {
1462+
isa = PBXReferenceProxy;
1463+
fileType = archive.ar;
1464+
path = "libRCTBlob-tvOS.a";
1465+
remoteRef = 5281CA521EEAC9A700AC40CD /* PBXContainerItemProxy */;
1466+
sourceTree = BUILT_PRODUCTS_DIR;
1467+
};
14211468
58005BEE1ABA80530062E044 /* libRCTTest.a */ = {
14221469
isa = PBXReferenceProxy;
14231470
fileType = archive.ar;

0 commit comments

Comments
 (0)