Question

我正在开发一个聊天应用程序，该应用程序会在用户按下Enter发送一次消息后立即呈现聊天消息（React组件）：

在这里，键入ABC并按Enter之后，React组件的状态立即更新，并呈现消息，以避免UI呆滞。

然后发出AJAX请求。 AJAX将消息发送到服务器，如果chat_id为0（聊天的第一条消息），服务器将创建一个新的聊天，保存该消息并返回新创建的聊天的ID。此时，将使用服务器返回的ID更新聊天。代码片段下方：

class ChatApp extends React.Component {

    // ...
    constructor(props) {
        super(props)
        this.state = {
            currentChat: {
                id: 0, // 0 means "this is a new chat"
                messages: [],
                // ...
            }
        }
    }

    handleSendMessage(message) {
        this.setState((prevState) => {
            const pendingCurrentChat = {
                ...prevState.currentChat,
                messages: prevState.currentChat.messages.concat([{
                    message
                }])
            }
            return {
                currentChat: pendingCurrentChat
            }
        }, () =>
            this.setState((state) => {
                const currentChat = state.currentChat
                const currentChatId = currentChat.id

                // AJAX call starts here:
                const params = {
                    act: 'handleSendMessage',
                    message: message,
                    chat_id: currentChatId
                }
                this.POST(params, JSONResponseData =>
                    this.setState((prevState) => {
                        const chatId = JSONResponseData.chat_id

                        const currentChat = {
                            ...prevState.currentChat,
                            id: chatId
                        }
                        const newState = {
                            currentChat
                        }
                        return newState
                    })
                )

                // No state change here.
                return null
            })
        )
    }

    // ...

}

这种方法的问题是，如果聊天是新的（currentChat.id == 0），并且用户通过快速键入并按下Enter来发送一堆消息，则会出现争用情况，并且会出现一些AJAX chat_id: 0的请求重叠会导致在服务器端创建多个聊天：

在这里，我输入了a并快速输入，最后我在服务器端创建了多个聊天，因为在chat_id设置为0的情况下发出了多个请求。 / p>

如果用户快速键入，如何确保仅使用chat_id: 0将聊天的第一条消息发送到服务器，而不会出现竞争状况？

我只能想到：

在客户端上生成ID（也许是UUID），然后将其发送到服务器。我真的不想让用户等到第一个AJAX完成之后再呈现第一个消息；
在允许用户发送消息之前创建新的聊天。不过，这样一来，即使用户可能不会发送第一条消息，我也会在服务器上使用ID；

例如，

Facebook的Messenger具有我要寻找的行为：当您发送消息时，只要按Enter，就会呈现该消息，他们如何处理？通过查看“网络”标签，似乎他们可以提前创建一个ID，但是我不确定：

在UI / UX和服务器端数据持久性方面，您将如何处理？

Answer 1

我将生成一个id客户端，该客户端将一直持续到获取响应得到解决为止。

然后，如果客户端ID与刚刚创建新的聊天室的客户端ID相同，则不要创建新的聊天室，将新消息存储在某个位置，直到获得新的服务器ID，然后将其在线推送。

当仅在AJAX调用之后才知道其ID时，如何呈现React组件？

1 个答案: