WebSocket API Polyfill

[ghost]

Hello,

I starting using React.js since a month ago, and React Native when it got released. So I'm still kinda new to it. I was working on an app where I used Phonegap + React.js and Socket.io. However, then React-Native got released and it's truly amazing.

However, since I was using socket.io for communicating with other clients, I'm just trying to figure out if it's possible to do in React Native. I already asked a question about it on StackOverflow (http://stackoverflow.com/questions/29408492/is-it-possible-to-combine-react-native-with-socket-io) in which the suggestion was:

I suggest opening a Github issue to request a WebSocket API polyfill and ask for the thoughts of the community. Someone might have a workaround.

So here I am. Is there some way I can work with the WebSocket API and React Native? Or is it not possible until a WebSocket API polyfill is created?

[vkurchatkin]

+1. shouldn't be that hard. Until then you could try xhr polling transport for socket.io

[vjeux]

We don't have any usecase for websockets at Facebook right now so we are unlikely to be working on it in the near future, but the plugin api is designed to support web sockets, so hopefully someone will from the community will get it working soon. Cc @sspi

[browniefed]

If you're interested refer to this post here. It looks like @SanderSpies is working on a WebSocket polyfill, maybe you could give him a hand. Also Firebase is looking into it so that's promising.
https://groups.google.com/forum/#!topic/firebase-talk/aoPNvQQsVUE

[badfortrains]

Played around with this some the last couple of days and have a very rough working example. Polyfill https://github.com/badfortrains/react-native/tree/WebSocket, example project https://github.com/badfortrains/wsExample. Uses @SanderSpies work as a base.

the plugin api is designed to support web sockets

@vjeux is there any documentation on the plugin api, or a specific place in the code I should look?

[naartjie]

I believe these are related, and both look promising:
issue #579 and RCTWebSocket (@badfortrains how does this differ from your implementation?)

[naartjie]

@vjeux is there any documentation on the plugin api, or a specific place in the code I should look?

@badfortrains is it not the Native Modules docs?

[badfortrains]

Interesting, hadn't seen RCTWebSocket. Thanks for linking that.

It looks like the project is aimed at a slightly different goal, but there is definitely some overlap. RCTWebSocket is a purely native extension that exports a couple of WebSocket functions via the react bridge. So it would be a separate module that you could import and that would expose an interface to js that would allow you to connect to a websocket/receive messages. But there isn't a javascript component, and the interface is different than that of browser WebSockets so it would need additional code to work with existing browser websocket libraries.

My implementation also includes a native component that provides websocket functions via the bridge, but that module is only exposed through a javascript wrapper that provides a browser-like websocket interface. My implementation is also a branch of react-native, so both parts are included directly in the project and injected into the global space on the initialization of the javascript environment in the same way react-native currently injects the included XMLHttpRequest polyfill.

Including a websocket polyfill makes it really simple to use websockets in react-native (they would just be there) and thus easier to use websocket libraries. But on the downside it bloats the codebase/adds complexity for something most people probably won't ever use.

The real solution I think would be to refactor out the native module (could be from what I have or RCTWebSocket), plus the javascript polyfill interface and package that up as its own module that could be loaded into React-Native on demand. I don't think there is currently a standard way of doing that (that's why I asked about the plugin api, but I think you were right that vjeux was referring to the native module stuff), but it looks like we're getting closer #235.

[vjeux]

My ideal vision here is to do

react-native link websocket

and then you magically got window.WebSocket in your js runtime and RCTWebSocket linked in your xcodeproject. If you don't run this command, then it's not linked.

Now the real question is how do we make this happen :)

[rojotek]

👍 for what @vjeux said

[tptee]

Hi, author of RCTWebSocket here. I didn't originally see the library as a polyfill, but would be more than happy to write a wrapper that overrides window.WebSocket according to spec. I'm using the Starscream library as a POC for Swift code in native extensions, but it's likely more trouble than it's worth for now. Starscream has a sister library in Objective-C we could use. I'd consider SocketRocket once facebookincubator/SocketRocket#226 is resolved.

Of course, the whole project won't work until #579 gets resolved. It'd be even more interesting if we could export functions without a macro to enable Swift support...

[tptee]

@vjeux Could react-native link use CocoaPods under the covers for the native code?

[vjeux]

@tptee the idea has been thrown around yeah. Right now we know the ideal vision but the specifics are up in the air. Also, no one at Facebook is actively working on this, we're kind of hoping that someone from the community will make something that works great :)

[tptee]

Looks like I've got a new project :)

On Apr 10, 2015, at 1:13 PM, Christopher Chedeau [email protected] wrote:

@tptee https://github.com/tptee the idea has been thrown around yeah. Right now we know the ideal vision but the specifics are up in the air. Also, no one at Facebook is actively working on this, we're kind of hoping that someone from the community will make something that works great :)

—
Reply to this email directly or view it on GitHub #619 (comment).

[hharnisc]

Submitted a PR, implemented in a similar way to the GeoLocation library #890

[joshbedo]

I was playing around with this over the weekend and noticed the memory leak issue that was mentioned above. The memory use would increase slowly every minute or so. So this morning i had the idea of implementing ImmutableJS to see if it would fix the memory leak and it did. Not only was the memory usage reduced by 10mb but the memory leak also vanishes. I did something similar to this for the chat messages being sent back and forth.

  var { Map, List } = require('immutable');
  getInitialState: function() {
    return {
      data: Map({ input: '', messages: List() })
    }
  },
  componentDidMount: function() {
    this.socket = io('http://localhost:5000', { jsonp:false });
    this.socket.on('chat message', (msg) => {
      // this.state.messages.push(msg);
      this.setState(prev => ({
        data: prev.data.update('messages', list => list.push(msg))
      }))
      this.forceUpdate();
    });
  },
  render: function() {
    return (
        <ScrollView
          style={styles.scrollView}
          scrollEventThrottle={200}
          bounces={false}
          contentInset={{top: 0}}
          >
          {this.state.data.get('messages').map(m => {
            return <Text style={styles.message}>Josh: {m}</Text>
          })}
        </ScrollView>
    );

[brentvatne]

@hharnisc's pr was merged 😄

[satya164]

Any news on Android support?

[oney]

Android support please!
@brentvatne How long does React Native support WebSocket? If need to wait long time, I will try to build a bridge module of https://github.com/socketio/socket.io-client-java

[satya164]

@oney I've a pull request open #2839

It works with socket.io. You'll need to use socket.io as following,

window.navigator.userAgent = "react-native";

var io = require("socket.io-client/socket.io");

io("ws://localhost:8321", { jsonp: false });

[oney]

@satya164 Awesome!! 🍻

[vjeux]

@satya164 this is awesome!

We're pulling in the few pull requests needed for websocket, they should land today or tomorrow on master :)

[satya164]

@vjeux Yay!

Thanks a lot :D

[olofd]

For all you in Microsoft-tech-land I created a small abstraction that makes SignalR work with react-native.
It's a POC at this point (Mostly due to SignalR's dep. on Jquery, which I mock away). But it works!

https://github.com/olofd/react-native-signalr

[hlynn93]

Hi is the websocket or socketio now compatible with Android? If it is, any particular doc for the usage? I've been trying to make it work and so far it works on iOS but not on android.

[barak-shirali]

Is SSL required for socket? socket.io-client seems working fine on react native when remote debugger is enabled. But I get following error when remote debugger is disabled.

CFNetwork SSLHandshake failed (-9806)