Vue Academy · Aula

Criação de um componente de chat em tempo real

Lista de mensagens com v-for, vinculação de entrada, emissão no envio e rolagem até o fim ao receber uma nova mensagem.

Aula 3 de 413 etapas

Criação de um componente de chat em tempo real é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

Objetivo: uma caixa de conversa em tempo real

Vamos montar um componente de conversa pequeno, mas completo: ele exibe uma lista rolável de mensagens, permite que o usuário digite e envie mensagens e acrescenta as mensagens recebidas em tempo real.

Isso reúne estado reativo, ganchos do ciclo de vida e acesso ao DOM.

A referência das mensagens

Mantenha a conversa em uma lista reativa. Cada entrada é um objeto simples com um identificador, um autor e um texto.

import { ref } from "vue"

const messages = ref([
  { id: 1, user: "system", text: "Welcome to the room" },
])

Uma referência para a entrada

Vincule a caixa de texto a uma referência separada com v-model. Ela armazena a mensagem que está sendo composta antes do envio.

// template:
// <input v-model="draft" @keyup.enter="sendMessage" />

const draft = ref("")

Registrando o ouvinte do socket

Em onMounted, inscreva-se para receber mensagens e adicione cada uma à lista. Usar onMounted garante que o componente esteja pronto antes de anexarmos os manipuladores.

import { onMounted } from "vue"

onMounted(() => {
  socket.on("message", (msg) => {
    messages.value.push(msg)
  })
})

Enviando uma mensagem

A função sendMessage emite o draft para o servidor e limpa a entrada. Impedimos o envio de strings vazias.

function sendMessage() {
  const text = draft.value.trim()
  if (!text) return
  socket.emit("send", { text })
  draft.value = ""
}

Renderizando a lista

O modelo percorre messages com v-for, usando o identificador como chave. Cada linha exibe o autor e o texto.

<!-- template -->
<div ref="chatBox" class="chat">
  <p v-for="m in messages" :key="m.id">
    <strong>{{ m.user }}:</strong> {{ m.text }}
  </p>
</div>

O problema da rolagem

Quando chega uma nova mensagem, o usuário quer que a visualização permaneça posicionada no final. Mas, se você rolar logo depois de adicionar a mensagem à lista, a nova linha ainda não estará no DOM — o Vue ainda não aplicou a atualização.

Você rola cedo demais e perde a linha mais recente.

Uma referência do modelo para o contêiner

Obtenha o contêiner de rolagem usando uma referência do modelo, para poder ler e definir sua posição de rolagem.

import { ref } from "vue"

const chatBox = ref(null)

// template: <div ref="chatBox"> ... </div>

Aguardando o DOM com nextTick

nextTick retorna uma promessa que é resolvida depois que o Vue aplica as atualizações pendentes do DOM. Aguarde-a antes de rolar, para que a nova mensagem exista no DOM.

import { nextTick } from "vue"

async function scrollToBottom() {
  await nextTick()
  const el = chatBox.value
  el.scrollTop = el.scrollHeight
}

Rolar após cada nova mensagem

Chame scrollToBottom logo após adicionar uma mensagem — tanto para mensagens recebidas quanto enviadas. Definir scrollTop = scrollHeight leva diretamente ao final.

onMounted(() => {
  socket.on("message", async (msg) => {
    messages.value.push(msg)
    await scrollToBottom()
  })
})

O fluxo completo

Agora, o componente recebe uma mensagem, atualiza o estado reativo, aguarda o DOM usando nextTick e então rola a tela. O envio segue o mesmo caminho. Limpo, previsível e em tempo real.

async function sendMessage() {
  const text = draft.value.trim()
  if (!text) return
  socket.emit("send", { text })
  draft.value = ""
  await scrollToBottom()
}

Verificação rápida

Verifique sua compreensão sobre o tempo de atualização do DOM no componente de chat.

Responda na aula interativa

Recapitulação

Nesta lição, você criou um componente de chat em tempo real. Pontos principais:

Mantenha as mensagens em uma matriz reativa de ref e o rascunho em sua própria ref.
Registre o ouvinte do soquete em onMounted e adicione as mensagens recebidas.
sendMessage emite o rascunho e limpa o campo de entrada.
Use uma referência de template e await nextTick() antes de definir scrollTop = scrollHeight, para que a mensagem mais recente fique visível.

Grátis para começar

Aprenda HTML com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos: 42
Aulas: 156

Começar a aprender grátis Ver o curso completo

Perguntas Frequentes

A aula “Criação de um componente de chat em tempo real” é grátis?

Sim — o texto completo de “Criação de um componente de chat em tempo real” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “Criação de um componente de chat em tempo real”?

Lista de mensagens com v-for, vinculação de entrada, emissão no envio e rolagem até o fim ao receber uma nova mensagem. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Criação de um componente de chat em tempo real”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Fundamentos de WebSocket no navegador
Cliente Socket.io com Vue
Criação de um componente de chat em tempo real
Composable useWebSocket com reconexão

← Voltar para Vue Academy