Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WebSocket API Polyfill #619

Closed
ghost opened this issue Apr 2, 2015 · 25 comments

Comments

@ghost
Copy link

@ghost ghost commented Apr 2, 2015

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

This comment has been minimized.

Copy link
Contributor

@vkurchatkin vkurchatkin commented Apr 2, 2015

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

@vjeux

This comment has been minimized.

Copy link
Contributor

@vjeux vjeux commented Apr 2, 2015

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

This comment has been minimized.

Copy link
Contributor

@browniefed browniefed commented Apr 2, 2015

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

This comment has been minimized.

Copy link

@badfortrains badfortrains commented Apr 5, 2015

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

This comment has been minimized.

Copy link

@naartjie naartjie commented Apr 6, 2015

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

@naartjie

This comment has been minimized.

Copy link

@naartjie naartjie commented Apr 6, 2015

@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

This comment has been minimized.

Copy link

@badfortrains badfortrains commented Apr 6, 2015

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

This comment has been minimized.

Copy link
Contributor

@vjeux vjeux commented Apr 6, 2015

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

This comment has been minimized.

Copy link

@rojotek rojotek commented Apr 7, 2015

👍 for what @vjeux said

@tptee

This comment has been minimized.

Copy link

@tptee tptee commented Apr 10, 2015

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 facebook/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

This comment has been minimized.

Copy link

@tptee tptee commented Apr 10, 2015

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

@vjeux

This comment has been minimized.

Copy link
Contributor

@vjeux vjeux commented Apr 10, 2015

@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

This comment has been minimized.

Copy link

@tptee tptee commented Apr 10, 2015

Looks like I've got a new project :)

On Apr 10, 2015, at 1:13 PM, Christopher Chedeau notifications@github.com 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

This comment has been minimized.

Copy link
Contributor

@hharnisc hharnisc commented Apr 17, 2015

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

@joshbedo

This comment has been minimized.

Copy link

@joshbedo joshbedo commented Apr 21, 2015

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

This comment has been minimized.

Copy link
Collaborator

@brentvatne brentvatne commented May 31, 2015

@hharnisc's pr was merged 😄

@brentvatne brentvatne closed this May 31, 2015
@satya164

This comment has been minimized.

Copy link
Contributor

@satya164 satya164 commented Sep 18, 2015

Any news on Android support?

@oney

This comment has been minimized.

Copy link

@oney oney commented Oct 1, 2015

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

This comment has been minimized.

Copy link
Contributor

@satya164 satya164 commented Oct 1, 2015

@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

This comment has been minimized.

Copy link

@oney oney commented Oct 1, 2015

@satya164 Awesome!! 🍻

@vjeux

This comment has been minimized.

Copy link
Contributor

@vjeux vjeux commented Oct 1, 2015

@satya164 this is awesome!

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

@satya164

This comment has been minimized.

Copy link
Contributor

@satya164 satya164 commented Oct 1, 2015

@vjeux Yay!

Thanks a lot :D

@olofd

This comment has been minimized.

Copy link

@olofd olofd commented Oct 19, 2015

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

This comment has been minimized.

Copy link

@hlynn93 hlynn93 commented May 17, 2016

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

This comment has been minimized.

Copy link

@barak-shirali barak-shirali commented Sep 6, 2016

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)
@facebook facebook locked as resolved and limited conversation to collaborators May 31, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
You can’t perform that action at this time.