ReactJs 从 axios api 数据更新状态

Question

我想用 ReactJS 和 Laravel api 创建一个小型chat应用程序，到目前为止我尝试过的是：

<Form.TextArea placeholder='say something..' onChange={this.handleChange} value={this.state.message} />
<Button animated className="Btheme-Btn-Success Btheme-Btn" onClick={this.handleSend}>
  <Button.Content visible>Send</Button.Content>
    <Button.Content hidden>
      <Icon name='send' />
    </Button.Content>
</Button>

这是语义部分，如您所见，有一个按钮和文本区域，用户可以编写并通过单击发送按钮将数据发送到 api。 这是处理程序和api调用：

async componentDidMount() {
    const data = {
        post_id: this.props.match.params.id
    }
    const result = await API.MessageShow(data); // get from api
    if(result.status === 200){
        this.setState({ data: result.data, loader: ''});
    }
}

处理变化：

handleChange = (e) => {
    let v = e.target.value;
    this.setState({
        message: v
    })
}

处理发送：

handleSend = async (e) => {
    e.preventDefault();
    const data = {
        post_id: this.props.match.params.id,
        user_id: this.props.match.params.user,
        message: this.state.message
    }
    const send = await API.sendMessage(data, 'agent'); // send message here
    if(send.status === 201){
        this.setState({
            message: ''
        })
        const data2 = {
            post_id: this.props.match.params.id
        }
        const result = await API.getAgentMessageShow(data2); //update from api here
        if(result.status === 200){
            this.setState({ data: result.data, loader: ''});
        }
    }
}

正如您在代码中看到的，所有消息都存储在一个名为message的state ，我在发送完成后更新此状态，这项工作很好，并不完美，但没关系，现在我面临一个挑战， （因为如果其他用户发送消息，当前用户在向该用户发送新消息之前不会看到）我想自动更新此状态，而不是在触发点击或任何处理程序之后......我不想使用自动刷新或类似的东西。 我应该使用套接字吗？ 或者可以用纯 reactjs 做到这一点。 如果您的选择是插座，请告诉我如何。

Answer 1

在特定时间内自动刷新会对服务器造成很大压力，有时会使其崩溃，因此我们将不得不使用套接字来处理此问题并使服务器自动响应客户端：我是 nodejs 开发人员，所以我什么都不知道关于 laravel 但在将 socket.io 与您的后端集成后：

为您的客户端安装 socket.io 并将其与您的服务器连接，当新消息可供用户使用时，服务器将响应客户端

npm i socket.io-client