Question

** 编辑 **

关于iOS，问题是WebSocket URL。我必须将ws://mywebsocket.io更改为wss://mywebsocket.io。 See Here Why

使用本地服务器时，Android也遇到了问题。我的WS网址是ws://localhost:3000/message。它适用于iOS模拟器，但不适用于Android模拟器（也不适用于Expo）。

在控制台上输入ifconfig | grep "inet" | grep -v 127.0.0.1 并获取您的公共IP（例如10.67.x.x）并将其替换为您的WS网址。

=＆GT; ws://10.67.x.x:3000/message。

现在适用于iOS和Android。

我尝试在我的react-native项目（使用CRNA构建）中实现action cable。

我是根据react-native-actioncable和react-actioncable-provider项目完成的。

所以我有一个ConversationStack Navigator实现：

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;

我的WebSocket URL是以编程方式定义的。它根本没有改变任何东西，只是迫使我不在这里使用ActionCableProvider并将我的有线实例作为上下文传递。它的工作原理相同。 No doubt

然后。我只有一个ActionCable实例，它接收并发送消息。

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>
    );
  }
}

基于TestRNActionCable

它无法在iOS上运行。

如果您有反应原生的另一个ActionCable实现，我会非常高兴看一下它。否则，请告诉我您的实施是否适用于移动设备和原因。

React-native中的Action Cable Client实现

0 个答案: