每秒更新来自 api 的消息

Question

我在我的 react 原生移动应用程序中使用react-native gifted-chat 作为我的聊天界面，在我的组件中，我将从一个 api 获取用户的消息并将其呈现在有天赋的聊天界面中，在有天赋的聊天中发送的任何消息也被发送到一个api，它将消息保存在db中。现在我想每秒更新一次消息状态，以便当其他用户也向它更新的当前用户发送消息时，我尝试使用设置间隔但模拟器总是挂起，请问更新消息的最有效方法是什么除了我所做的以外的数组

 constructor(props) {
    super(props);
    this.state = {
        messages: []
    };
    this.checker = this.checker.bind(this);
};
checker(){
    const {params} = this.props.navigation.state;
           this.setState({loading: true});
           var bodyParameters = {
               id: params.id,
               receiver_id: params.receiver_id
           }
          /*    var config = {
               headers: {'Authorization': "Bearer " + this.state.token}
          };*/
          axios.post(
              'http://10.0.2.2:8000/api/messages',
              bodyParameters,
          //      config
          ).then((response) => {
           this.setState({loading: false});
           console.log(response);   
           var len = response.data.success?response.data.success.length:null;
           for (let i = 0; i < len; i++) {
               let row = response.data.success[i];
               console.log(row.id, row.user1.id);console.log("chat")
               this.setState(prevState => ({
                   messages: [...prevState.messages, {_id: row.id, text: row.message, 
                       createdAt: row.created_at, user: {_id: row.user1.id,name: row.user1.first_name+' '+row.user1.last_name}}],
               }), console.log(this.state.messages));
               console.log("checker");
           };
          }).catch((error) => {
           this.setState({loading: false}); 
                   console.log(error); 
                  });      
}
componentDidMount(){
this.interval = setInterval(() => this.checker(), 1000);
}
componentWillUnmount() {
        clearInterval(this.interval);
      }
componentWillMount() {
    const {params} = this.props.navigation.state;
 /*   var pusher = new Pusher('1363556f717d953dcf86', {
        cluster: 'mt1',
        forceTLS: true
      });
      var channel = pusher.subscribe('private-messages.'+ params.id);
      channel.bind('MessageSent', function(data) {
        console.log(data);
      });*/
        this.setState({loading: true});
        var bodyParameters = {
            id: params.id,
            receiver_id: params.receiver_id
        }
    /*    var config = {
            headers: {'Authorization': "Bearer " + this.state.token}
       };*/
       axios.post(
           'http://10.0.2.2:8000/api/messages',
           bodyParameters,
     //      config
       ).then((response) => {
        this.setState({loading: false});
        console.log(response);   
        var len = response.data.success?response.data.success.length:null;
        for (let i = 0; i < len; i++) {
            let row = response.data.success[i];
            console.log(row.id, row.user1.id);console.log("chat")
            this.setState(prevState => ({
                messages: [...prevState.messages, {_id: row.id, text: row.message, 
                    createdAt: row.created_at, user: {_id: row.user1.id,name: row.user1.first_name+' '+row.user1.last_name}}],
            }), console.log(this.state.messages));
            console.log("contjii");
        };
       }).catch((error) => {
        this.setState({loading: false});
            Alert.alert(
                'Error',
                 'Internal Server Error, please try again later',
                [
                  {text: 'OK'},
                ],  );    
                console.log(error); 
               });    
 /*   this.setState({
      messages: [
        {
          _id: 1,
          text: 'Hello developer',
          createdAt: new Date(),
          user: {
            _id: 1,
            name: 'React Native',
            avatar: 'https://placeimg.com/140/140/any',
          },
      //    image: 'https://facebook.github.io/react/img/logo_og.png',
          // additional custom parameters
          sent : true,
          received : true,
        },
      ],
    })*/
  }

  onSend(messages = []) {
      console.log(messages);
      const {params} = this.props.navigation.state;
      messages[0].sent = true;
    var bodyParameters = {
        id: params.id,
        receiver_id: params.receiver_id,
        message: messages[0].text
    }
/*    var config = {
        headers: {'Authorization': "Bearer " + this.state.token}
   };*/
   axios.post(
       'http://10.0.2.2:8000/api/sendMessage',
       bodyParameters,
 //      config
   ).then((response) => {
    this.setState({loading: false});
    console.log(response);   

   }).catch((error) => {
    this.setState({loading: false});
        Alert.alert(
            'Error',
             'Internal Server Error, please try again later',
            [
              {text: 'OK'},
            ],  );    
            console.log(error); 
           }); 
      this.setState(previousState => ({
      messages: GiftedChat.append(previousState.messages, messages),
    }));  
  }
render() {
    const {params} = this.props.navigation.state;
    return (
<GiftedChat
        messages={this.state.messages}
       //  inverted={false}
        onSend={messages => this.onSend(messages)}
        user={{
          _id: params.id,
        }}
      />
 );
 }

Answer 1

代码的问题在于 setInterval 不断发送 API 调用，而不关心之前的调用是否返回。 这在服务器上一次排队了很多请求。要解决此问题，您应该等待 API 响应，然后再进行下一次 API 调用。

Answer 2

处理此问题的最有效方法是使用 Web Sockets 协议，该协议会将通知从服务器发送到 UI 客户端。很难给你举个例子，因为我们不知道你的服务器堆栈，但是像 SignalR in.Net world 这样的东西在这里会很完美。

这里的前提是，服务器不会每秒向服务器询问新消息，而是会在有新消息时通知客户端。这样你会节省很多资源。