реагировать на чат в реальном времени - PullRequest
Новая
       10

реагировать на чат в реальном времени

0 голосов
/ 02 декабря 2018

Я пытаюсь разработать базовое приложение для чата с сокетами ввода-вывода, использующее сервер nodejs express, и реагировать на него.Я новичок в этих стеках, поэтому не смог определить правильное функционирование с компонентами.Я следовал соглашениям, приведенным в официальной документации по сокетам ввода / вывода, но не смог найти ничего, в частности связанного с реагирующим нативом.Я также пробовал такую ​​же функциональность для веба, т.е. реагируйте на js и некоторые другие, как это работало, но не смог достичь результатов для реагировать на нативную.

Вот мой код из основного компонента на стороне клиента: 

    constructor(props) {
      super(props);
          this.state = {
          text: '',
          messages : [],
       }
    }
    componentDidMount() {
        this.socket = io('http://localhost:3333');
        this.socket.on('RECEIVE_MSG', (msg) => this.addMessage(msg))
    }
    sendMessage = () => {
        this.socket.emit('EMIT_MSG', {
            text: this.state.text
        });

        this.setState({text: ''})
    }

    addMessage = (msg) => {
        console.log(msg, 'any incoming msgs data');
        this.setState({messages : [...this.state.messages, msg]});
        console.log(this.state.messages);
    }

    renderMessages = () => {
        return this.state.messages.map((message, index) => {
            return (
                <Text key={index}>
                    {message}
                </Text>
            )
        })
    }

  render() {
    return (
      <View>
        <TextInput    placeholder="enter your msg"
          onChangeText={(text)=>this.setState({text})}/>

          <TouchableOpacity onPress={() => this.sendMessage}>
            <Text> send msg </Text>
           </TouchableOpacity>

            <ScrollView>
                {this.renderMessages()}
            </ScrollView>
      </View>
    )
  }
}

И вот мой код сервера для того же самого с экспрессом и импортированным сервером: 

 io.on('connection', function(socket) {
    console.log('a user connected: ' +   socket.id);


    socket.on('RECEIVE_MSG', function(msg){
        console.log('message: ' + msg);

        io.emit('EMIT_MSG', msg);

    });
});

Проблема сохраняется, что ничего не появляется в консоли.Всякий раз, когда я нажимаю кнопку отправки, текст даже не изменяется и не показывает никаких сообщений об ошибках в консоли.Пожалуйста, помогите мне исправить это, если я соблюдаю правила или нет?

1 Ответ

0 голосов
/ 02 декабря 2018

Ваша проблема в 

<TouchableOpacity onPress={() => this.sendMessage}>

Функция стрелки там не вызывает this.sendMessage.Измените код на 

<TouchableOpacity onPress={this.sendMessage}>

, и вы должны увидеть результат.

Вы также неправильно используете представление прокрутки, это не просто родительское представление.Для рендеринга предметов, вы должны установить правильные реквизиты .Это включает в себя реквизит renderItem, который требует функции для отображения данных, и функцию keyExtractor, которая требует, чтобы функция предоставила React невидимое значение ключа, чтобы обеспечить уникальность отображаемых элементов.

...