Skip to content

Commit 02a2cde

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 af09330 commit 02a2cde

File tree

1 file changed

+34
-2
lines changed

1 file changed

+34
-2
lines changed

templates/HelloWorld/ios/HelloWorld.xcodeproj/project.pbxproj

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
2DCD954D1E0B4F2C00145EB5 /* HelloWorldTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* HelloWorldTests.m */; };
3737
5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */; };
3838
832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
39+
ADBDB9381DFEBF1600ED6528 /* libRCTBlob.a in Frameworks */ = {isa = PBXBuildFile; fileRef = ADBDB9271DFEBF0700ED6528 /* libRCTBlob.a */; };
3940
/* End PBXBuildFile section */
4041

4142
/* Begin PBXContainerItemProxy section */
@@ -228,6 +229,13 @@
228229
remoteGlobalIDString = 58B5119B1A9E6C1200147676;
229230
remoteInfo = RCTText;
230231
};
232+
ADBDB9261DFEBF0700ED6528 /* PBXContainerItemProxy */ = {
233+
isa = PBXContainerItemProxy;
234+
containerPortal = ADBDB91F1DFEBF0600ED6528 /* RCTBlob.xcodeproj */;
235+
proxyType = 2;
236+
remoteGlobalIDString = 358F4ED71D1E81A9004DF814;
237+
remoteInfo = RCTBlob;
238+
};
231239
/* End PBXContainerItemProxy section */
232240

233241
/* Begin PBXFileReference section */
@@ -255,6 +263,7 @@
255263
5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTAnimation.xcodeproj; path = "../node_modules/react-native/Libraries/NativeAnimation/RCTAnimation.xcodeproj"; sourceTree = "<group>"; };
256264
78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = "../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj"; sourceTree = "<group>"; };
257265
832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = "<group>"; };
266+
ADBDB91F1DFEBF0600ED6528 /* RCTBlob.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTBlob.xcodeproj; path = "../node_modules/react-native/Libraries/Blob/RCTBlob.xcodeproj"; sourceTree = "<group>"; };
258267
/* End PBXFileReference section */
259268

260269
/* Begin PBXFrameworksBuildPhase section */
@@ -270,6 +279,8 @@
270279
isa = PBXFrameworksBuildPhase;
271280
buildActionMask = 2147483647;
272281
files = (
282+
ADBDB9381DFEBF1600ED6528 /* libRCTBlob.a in Frameworks */,
283+
5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */,
273284
146834051AC3E58100842450 /* libReact.a in Frameworks */,
274285
5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */,
275286
00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */,
@@ -411,6 +422,7 @@
411422
3DAD3EAB1DF850E9000B6D8A /* libcxxreact.a */,
412423
3DAD3EAD1DF850E9000B6D8A /* libjschelpers.a */,
413424
3DAD3EAF1DF850E9000B6D8A /* libjschelpers.a */,
425+
3DAD3EA31DF850E9000B6D8A /* libReact-tvOS.a */,
414426
);
415427
name = Products;
416428
sourceTree = "<group>";
@@ -439,6 +451,7 @@
439451
5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */,
440452
146833FF1AC3E56700842450 /* React.xcodeproj */,
441453
00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */,
454+
ADBDB91F1DFEBF0600ED6528 /* RCTBlob.xcodeproj */,
442455
00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */,
443456
00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */,
444457
78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */,
@@ -483,6 +496,14 @@
483496
name = Products;
484497
sourceTree = "<group>";
485498
};
499+
ADBDB9201DFEBF0600ED6528 /* Products */ = {
500+
isa = PBXGroup;
501+
children = (
502+
ADBDB9271DFEBF0700ED6528 /* libRCTBlob.a */,
503+
);
504+
name = Products;
505+
sourceTree = "<group>";
506+
};
486507
/* End PBXGroup section */
487508

488509
/* Begin PBXNativeTarget section */
@@ -602,6 +623,10 @@
602623
ProductGroup = 5E91572E1DD0AC6500FF2AA8 /* Products */;
603624
ProjectRef = 5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */;
604625
},
626+
{
627+
ProductGroup = ADBDB9201DFEBF0600ED6528 /* Products */;
628+
ProjectRef = ADBDB91F1DFEBF0600ED6528 /* RCTBlob.xcodeproj */;
629+
},
605630
{
606631
ProductGroup = 00C302B61ABCB90400DB3ED1 /* Products */;
607632
ProjectRef = 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */;
@@ -748,10 +773,10 @@
748773
remoteRef = 3DAD3E981DF850E9000B6D8A /* PBXContainerItemProxy */;
749774
sourceTree = BUILT_PRODUCTS_DIR;
750775
};
751-
3DAD3EA31DF850E9000B6D8A /* libReact.a */ = {
776+
3DAD3EA31DF850E9000B6D8A /* libReact-tvOS.a */ = {
752777
isa = PBXReferenceProxy;
753778
fileType = archive.ar;
754-
path = libReact.a;
779+
path = "libReact-tvOS.a";
755780
remoteRef = 3DAD3EA21DF850E9000B6D8A /* PBXContainerItemProxy */;
756781
sourceTree = BUILT_PRODUCTS_DIR;
757782
};
@@ -825,6 +850,13 @@
825850
remoteRef = 832341B41AAA6A8300B99B32 /* PBXContainerItemProxy */;
826851
sourceTree = BUILT_PRODUCTS_DIR;
827852
};
853+
ADBDB9271DFEBF0700ED6528 /* libRCTBlob.a */ = {
854+
isa = PBXReferenceProxy;
855+
fileType = archive.ar;
856+
path = libRCTBlob.a;
857+
remoteRef = ADBDB9261DFEBF0700ED6528 /* PBXContainerItemProxy */;
858+
sourceTree = BUILT_PRODUCTS_DIR;
859+
};
828860
/* End PBXReferenceProxy section */
829861

830862
/* Begin PBXResourcesBuildPhase section */

0 commit comments

Comments
 (0)