如何基于reactjs在Web应用程序中发送自动常量消息?

时间:2017-04-28 05:55:31

标签: angularjs reactjs react-native firebase-realtime-database

这是我的App.js,我已经在firebase中设置了我的数据库。我输入的所有消息都显示在数据库中。但是我需要自动向我发送消息。所以任何人都知道如何做到这一点,请帮助。谢谢。

import React, { Component } from 'react';
import MessagePane from './MessagePane';
import ChannelList from './ChannelList';

import { getMessages, getChannels, saveMessage, onNewMessage } from './remote_storage1';

import './App.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      messages: [],
      channels: [],
      selected_channel_id: null
    };

    this.onSendMessage = this.onSendMessage.bind(this);
    this.onChannelSelect = this.onChannelSelect.bind(this);
    this.filteredMessages = this.filteredMessages.bind(this);
  }

  componentDidMount() {
    getMessages().then(messages => this.setState({messages}));
    getChannels().then(channels => this.setState({channels, selected_channel_id: channels[0].id}));
    onNewMessage(new_message => {
      const messages = [...this.state.messages, new_message];
      this.setState({messages});
    });
  }

  onSendMessage(author, text) {
    const new_message = {
      id: this.state.messages[this.state.messages.length - 1].id + 1,
      author,
      text,
      channel_id: this.state.selected_channel_id
    };

    saveMessage(new_message);

    const messages = [...this.state.messages, new_message];
    this.setState({messages});
  }

  onChannelSelect(id) {
    this.setState({ selected_channel_id: id });
  }

  filteredMessages() {
    return this.state.messages.filter(({channel_id}) => channel_id === this.state.selected_channel_id);
  }

  render() {

    return (
      <div className="App">
        <ChannelList
          channels={this.state.channels}
          selectedChannelId={this.state.selected_channel_id}
          onSelect={this.onChannelSelect}
        />
        <MessagePane messages={this.filteredMessages()} onSendMessage={this.onSendMessage} />
      </div>
    );
  }
}

export default App;

0 个答案:

没有答案