Rails ActionCable and React Native

Question

私は、RoR webappに付随するReactネイティブアプリを開発中で、ActionCable（websockets）を使用してチャット機能を構築したいと考えています。私はReact NativeアプリをActionCableと話すことができません。

私はreact-native-actioncableを含む多くのライブラリを試しました。最初の接続は機能しているようです（前にエラーがあったので、私はこれを知っています。

これは私のリアクトネイティブコードの簡略版：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ではないため、これはおそらく問題です。彼らがリストアップしたThe example appはわずか2ヶ月前に更新され、RN 0.48.3に基づいているため、おそらくまだ動作していると推測する必要があります。あなたはクローニングして実行しようとしましたか？

あなたも、同様のセットアップに

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

を（< ActionCableProvider>）を提供する必要がありますように見えます