Реализация Action Cable Client в React-native - PullRequest
Новая
       3

Реализация Action Cable Client в React-native

0 голосов
/ 05 июня 2018

** РЕДАКТИРОВАТЬ **

Проблема была связана с iOS, URL WebSocket.Я должен был изменить ws://mywebsocket.io на wss://mywebsocket.io. См. Здесь, почему

У меня также была проблема с Android при работе с моим локальным сервером.мой WS-адрес был ws://localhost:3000/message.Он работает на симуляторе iOS, но не на симуляторе Android (ни на Expo).

Введите ifconfig | grep "inet" | grep -v 127.0.0.1 на консоли и получите свой общедоступный IP-адрес (например, 10.67.x.x) и замените его в своем URL-адресе WS.

=> ws://10.67.x.x:3000/message.

Теперь он работает на iOS и Android.

Я пытался реализовать action cable в своем реактивном проекте (создан сCRNA).

Я сделал это на основе проектов response-native-actioncable и response-actioncable-provider .

Итак, у меня естьРеализация ConversationStack Navigator: 

class Conversations extends React.Component {
  static childContextTypes = {
    cable: PropTypes.object
  };

  state = {
    cable: null
  };

  getChildContext() {
    return {
      cable: this.state.cable
    };
  }

  async componentDidMount() {
    const MY_URL = "ws://somethingwithmyurl" + "secret_parameter";

    this.setState({
      cable: RNActionCable.createConsumer(MY_URL)
    });
  }

  render() {
    // screenProps forces update of ConversationStack screens when   Context is set
    return <ConversationStack screenProps={this.state} />;
  }
}

export default Conversations;

Мой URL-адрес WebSocket определяется программно.Это вообще ничего не меняет, просто вынуждает меня не использовать ActionCableProvider здесь и передавать мой экземпляр кабеля в качестве контекста.Это работает так же. Без сомнения

Тогда.У меня просто есть экземпляр ActionCable, который получил и отправил сообщение. 

import { ActionCable } from "react-actioncable-provider";


class Conversation extends Component {
  static contextTypes = {
    cable: PropTypes.object
  };


this.state = {
  messages: []
};


  /**
   * onReceived()
   * Process the received message and append it to messages
   */
  onReceived = message => {
    ...
  };

  /**
   * onSend()
   * Perform "speak" when sending a Message
   */
  onSend = (messages = []) => {
   ...
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        {this.context.cable && (
          // Check cable is available
          <ActionCable
            ref="roomChannel"
            channel={{ channel: "MessageChanel" }}
            onReceived={this.onReceived}
          />
        )}
      </View>
    );
  }
}

на основе TestRNActionCable

Он не работает на iOS.

Если у вас есть другая реализация ActionCable для Reaction-native, я был бы более чем рад взглянуть на нее.В противном случае, дайте мне знать, работает ли ваша реализация на мобильных устройствах и почему.

...