铁路可动并反应天然

Question

我正在使用Companion React Antive应用程序来陪伴我的ROR WebApp，并希望使用ActionCable（WebSockets）构建聊天功能。我无法让我的React本地应用与ActionCable交谈。

我尝试了许多库，包括无法进行反应的库，没有运气。最初的连接似乎在起作用（我知道这是因为我以前有错误，并且自从我通过适当的参数时就消失了）。

这是我的反应本机代码的缩写版：

import ActionCable from 'react-native-actioncable'
class Secured extends Component {
  componentWillMount () {
    var url = 'https://x.herokuapp.com/cable/?authToken=' + this.props.token + '&client=' + this.props.client + '&uid=' + this.props.uid + '&expiry=' + this.props.expiry
    const cable = ActionCable.createConsumer(url)
    cable.subscriptions.create('inbox_channel_1', {
      received: function (data) {
        console.log(data)
      }
    })
  }
  render () {
    return (
      <View style={styles.container}>
        <TabBarNavigation/>
      </View>
    )
  }
}
const mapStateToProps = (state) => {
  return {
    email: state.auth.email,
    org_id: state.auth.org_id,
    token: state.auth.token,
    client: state.auth.client,
    uid: state.auth.uid,
    expiry: state.auth.expiry
  }
}
export default connect(mapStateToProps, { })(Secured)

任何具有更多经验的人可以连接动作以反应本地的经验并可以帮助我？

Answer 1

您所附加到的URL端点不是Websocket，因此这可能是您的问题。他们列出的示例应用程序仅在两个月前更新，并且基于RN 0.48.3，因此我必须猜测它可能仍然有效。您是否尝试过克隆并运行它？

看起来您还需要设置提供商（＆lt; actioncableProvider>）

import RNActionCable from 'react-native-actioncable';
import ActionCableProvider, { ActionCable } from 'react-actioncable-provider';
const cable = RNActionCable.createConsumer('ws://localhost:3000/cable');
class App extends Component {
    state = {
        messages: []
    }
    onReceived = (data) => {
        this.setState({
            messages: [
                data.message,
                ...this.state.messages
            ]
        })
    }
    render() {
        return (
            <View style={styles.container}>
                <ActionCable channel={{channel: 'MessageChannel'}} onReceived={this.onReceived} />
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <View>
            <Text>There are {this.state.messages.length} messages.</Text>
        </View>
        {this.state.messages.map((message, index) =>
            <View key={index} style={styles.message}>
                <Text style={styles.instructions}>
                  {message}
                </Text>
              </View>
          )}
      </View>
      )
    }
}
export default class TestRNActionCable extends Component {
  render() {
    return (
        <ActionCableProvider cable={cable}>
          <App />
         </ActionCableProvider>
    );
  }
}