Rails ActionCable und React Native

Question

Ich arbeite an einem Begleiter React Native App, um meine RoR Webapp zu begleiten, und möchte eine Chat-Funktion mit ActionCable (websockets) bauen. Ich kann meine React Native App nicht mit ActionCable sprechen. Ich habe eine Reihe von Bibliotheken einschließlich react-native-actioncable ohne Glück versucht. Die erste Verbindung scheint zu funktionieren (ich weiß das, weil ich vorher Fehler hatte und sie sind seitdem verschwunden, als ich die richtigen Parameter übergeben habe).

Dies ist eine gekürzte Version meiner Reaktion nativen Code:

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) 

Wer mit mehr Erfahrung verbindet ActionCable Eingeborener zu reagieren und kann mir helfen?

Answer 1

Der URL-Endpunkt, an den Sie anhängen, ist kein Websocket. Das ist wahrscheinlich Ihr Problem. The example app haben sie aufgelistet wurde vor 2 Monaten aktualisiert und basiert auf RN 0.48.3, so muss ich raten, dass es wahrscheinlich immer noch funktioniert. Haben Sie versucht, es zu klonen und auszuführen?

Sieht aus wie Sie auch als auch einen Anbieter Setup benötigen (< 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> 
    ); 
    } 
}