Middle
A nossa aplicação de chat deve mostrar as novas mensagens que chegam do servidor o mais rápido possível. A mensagem tem o seguinte formato: interface Message { id: number text: string } O id da primeira mensagem é 1, e o id de cada mensagem seguinte é 1 maior que o da anterior. Precisamos exibir as mensagens na ordem correta, mas o servidor não garante a ordem correta das mensagens enviadas para a nossa aplicação. Linha do tempo: // (chega) [telefone] // (desenhamos) . 1 2 3 . . 4 5 6 7 8 Para exibir as mensagens, deve-se usar a função render: render(message)
sobes.tech IA
Resposta da IA
Чтобы отображать сообщения в правильном порядке, несмотря на возможный приход сообщений с сервера в произвольном порядке, можно реализовать буферизацию и последовательный рендеринг.
Идея:
- Хранить в памяти последний отрендеренный id сообщения (например,
lastRenderedId). - При получении нового сообщения:
- Если
message.id === lastRenderedId + 1, сразу рендерим и увеличиваемlastRenderedId. - Если
message.id > lastRenderedId + 1, сохраняем сообщение в буфер (например, объект или Map). - После рендера сообщения проверяем буфер, есть ли следующее сообщение (
lastRenderedId + 1), и если есть — рендерим его, обновляемlastRenderedIdи повторяем проверку.
- Если
Пример реализации:
const buffer = new Map();
let lastRenderedId = 0;
function onMessageReceived(message) {
if (message.id === lastRenderedId + 1) {
render(message);
lastRenderedId++;
// Проверяем, есть ли в буфере следующее сообщение
while (buffer.has(lastRenderedId + 1)) {
const nextMsg = buffer.get(lastRenderedId + 1);
buffer.delete(lastRenderedId + 1);
render(nextMsg);
lastRenderedId++;
}
} else if (message.id > lastRenderedId + 1) {
// Сообщение пришло раньше времени, сохраняем в буфер
buffer.set(message.id, message);
}
// Если message.id <= lastRenderedId, это уже отрендеренное или дубликат — игнорируем
}
Такой подход гарантирует, что сообщения будут отображаться строго по порядку, а новые сообщения, пришедшие раньше времени, будут отложены до появления всех предыдущих.