Action Cable Client implementation in React-native

Question

** EDIT **

The issue was, concerning iOS, the WebSocket URL. I had to change ws://mywebsocket.io to wss://mywebsocket.io. See Here Why

I also had an issue with Android when working with my local server. my WS url was ws://localhost:3000/message. It does work on iOS simulator but not on Android simulator (nor Expo).

Type ifconfig | grep "inet" | grep -v 127.0.0.1 on your console And get your public IP (such as 10.67.x.x) and replace it in your WS url.

=> ws://10.67.x.x:3000/message.

It now works on iOS and Android.

I tried to implement action cable in my react-native project (built with CRNA).

I did it based on the react-native-actioncable and react-actioncable-provider projects.

So i have a ConversationStack Navigator implementing :

class Conversations extends React.Component {
  static childContextTypes = {
    cable: PropTypes.object
  };

  state = {
    cable: null
  };

  getChildContext() {
    return {
      cable: this.state.cable
    };
  }

  async componentDidMount() {
    const MY_URL = "ws://somethingwithmyurl" + "secret_parameter";

    this.setState({
      cable: RNActionCable.createConsumer(MY_URL)
    });
  }

  render() {
    // screenProps forces update of ConversationStack screens when   Context is set
    return <ConversationStack screenProps={this.state} />;
  }
}

export default Conversations;

My WebSocket URL is defined programmatically. It doesn't change anything at all, it just forces me to not use ActionCableProvider here and to pass my cable instance as context. It works the same. No doubt

Then. I just have an ActionCable instance which received and send message.

import { ActionCable } from "react-actioncable-provider";


class Conversation extends Component {
  static contextTypes = {
    cable: PropTypes.object
  };


this.state = {
  messages: []
};


  /**
   * onReceived()
   * Process the received message and append it to messages
   */
  onReceived = message => {
    ...
  };

  /**
   * onSend()
   * Perform "speak" when sending a Message
   */
  onSend = (messages = []) => {
   ...
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        {this.context.cable && (
          // Check cable is available
          <ActionCable
            ref="roomChannel"
            channel={{ channel: "MessageChanel" }}
            onReceived={this.onReceived}
          />
        )}
      </View>
    );
  }
}

based on TestRNActionCable

It doesn't work on iOS.

If you have another ActionCable implementation for react-native, i would be more than glad to take a look at it. Otherwise, let me know if your implementation did work on both mobile and why.

Action Cable Client implementation in React-native

0 Answers0