Rails ActionCable and React Native

Question

RoR webapp와 함께 제공되는 React Native 앱을 사용 중이며 ActionCable (웹 소켓)을 사용하여 채팅 기능을 만들고 싶습니다. 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을 기반으로하므로 아마 여전히 작동한다고 추측해야합니다. 복제를 시도하고 실행 했습니까? 당신은 또한뿐만 아니라 설정에 공급자가 필요합니다 같은

이 보이는 (< 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> 
    ); 
    } 
}