React native Rails ActionCable和React Native

我正在开发一个与RoR webapp配套的React原生应用程序，并希望使用ActionCable（websockets）构建聊天功能。我无法让我的React本机应用程序与ActionCable对话

我尝试了很多图书馆，包括没有运气的图书馆。最初的连接似乎正在工作（我知道这一点，因为我以前有错误，当我传递正确的参数时，错误就消失了）

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

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)

从“react native ActionCable”导入ActionCable
类安全扩展组件{
组件将安装（）{
var url='1〕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\u channel\u 1'{
接收：功能（数据）{
console.log（数据）
}
})
}
渲染（）{
返回(
)
}
}
常量mapStateToProps=（状态）=>{
返回{
电子邮件：state.auth.email，
org\u id:state.auth.org\u id，
令牌：state.auth.token，
客户端：state.auth.client，
uid:state.auth.uid，
到期日：state.auth.expiry
}
}
导出默认连接（mapStateToProps，{}）（安全）

---

任何有更多将ActionCable连接到React Native的经验的人都可以帮助我吗？

您所连接的url端点不是websocket，因此这可能是您的问题。他们列出的是2个月前更新的，基于RN 0.48.3，所以我猜它可能仍然有效。你试过克隆并运行它吗

看起来您还需要设置一个提供程序（）

从“react native actioncable”导入RNActionCable；
从“react ActionCable provider”导入ActionCable provider，{ActionCable}；
const-cable=RNActionCable.createConsumer（'ws://localhost:3000/cable'）；
类应用程序扩展组件{
状态={
信息：[]
}
onReceived=（数据）=>{
这是我的国家({
信息：[
data.message，
…此.state.messages
]
})
}
render（）{
返回(
欢迎来到这里！
有{this.state.messages.length}条消息。
{this.state.messages.map（（消息，索引）=>
{message}
)}
)
}
}
导出默认类TestrActionCable扩展组件{
render（）{
返回(
);
}
}

嘿。我建议你试试

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