0Pricing
Vue Academy · Aula

Cliente Socket.io com Vue

socket.io-client, io(url), socket.on/emit e estado reativo do Vue a partir de eventos do socket.

Cliente Socket.io com Vue é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 2 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.

Por que usar Socket.IO?

Os WebSockets simples são de baixo nível. O Socket.IO é uma biblioteca popular que adiciona reconexão automática, transportes alternativos, salas e uma API limpa baseada em eventos.

Ele possui pacotes correspondentes para servidor e cliente; aqui, vamos nos concentrar no cliente do navegador usado dentro do Vue.

Instalando o cliente

Adicione o pacote do cliente ao seu projeto Vue. Ele é separado do pacote do servidor.

// terminal
// npm install socket.io-client

import { io } from "socket.io-client"

Conectando com io()

Chame io(url) para criar um socket e conectar-se. Diferentemente dos WebSockets simples, você fornece uma URL http(s):// — o Socket.IO negocia o transporte para você.

import { io } from "socket.io-client"

const socket = io("https://api.example.com", {
  autoConnect: true,
})

Escutando com socket.on

O Socket.IO é baseado em eventos nomeados. Use socket.on(name, handler) para reagir a um evento do servidor. O manipulador recebe qualquer carga que o servidor tenha emitido.

socket.on("message", (msg) => {
  console.log("New message:", msg.text, "from", msg.user)
})

Eventos integrados do ciclo de vida

O Socket.IO emite seus próprios eventos do ciclo de vida, aos quais você pode escutar: connect, disconnect e connect_error.

socket.on("connect", () => {
  console.log("Connected, id:", socket.id)
})

socket.on("disconnect", (reason) => {
  console.log("Disconnected:", reason)
})

Enviando com socket.emit

Para enviar dados, chame socket.emit(name, payload). Você escolhe o nome do evento; o servidor escuta esse mesmo nome. Não é necessário codificar JSON manualmente — o Socket.IO faz a serialização por você.

function sendMessage(text) {
  socket.emit("send", { text, at: Date.now() })
}

sendMessage("Hello room!")

Uma lista reativa de mensagens

No Vue, mantenha as mensagens recebidas em uma lista reativa de ref. O manipulador de socket.on usa push para adicioná-las, e o modelo é renderizado novamente automaticamente.

import { ref } from "vue"

const messages = ref([])

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

Conectando tudo em script setup

Um componente típico se conecta em onMounted, registra ouvintes e disponibiliza uma função de envio para o modelo.

import { ref, onMounted, onUnmounted } from "vue"
import { io } from "socket.io-client"

const messages = ref([])
const socket = io("https://api.example.com")

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

function send(text) {
  socket.emit("send", { text })
}

Limpando os ouvintes

Os ouvintes registrados com socket.on permanecem anexados. Se o componente for montado novamente, você poderá acumular manipuladores duplicados. Remova-os com socket.off ao desmontar o componente.

function onMessage(m) { messages.value.push(m) }

onMounted(() => socket.on("message", onMessage))
onUnmounted(() => socket.off("message", onMessage))

Desconectando em onUnmounted

Quando o componente for destruído, feche a conexão com socket.disconnect() para não deixar um socket aberto ocupando recursos durante as navegações.

import { onUnmounted } from "vue"

onUnmounted(() => {
  socket.disconnect()
})

Confirmações

Um recurso interessante do Socket.IO: passe uma função de retorno como último argumento de emit, e o servidor poderá chamá-la para confirmar o recebimento. Isso é ótimo para a experiência de usuário de "mensagem entregue".

socket.emit("send", { text: "hi" }, (ack) => {
  console.log("Server confirmed:", ack.status)
})

Verificação rápida

Verifique sua compreensão da API de cliente do Socket.IO.

Recapitulação

Nesta lição, você aprendeu:

  • io(url) de socket.io-client conecta-se usando uma URL http(s).
  • socket.on(name, handler) reage a eventos nomeados do servidor.
  • socket.emit(name, payload) envia eventos; as cargas são serializadas automaticamente.
  • Adicione os dados recebidos a uma lista reativa de ref para o modelo.
  • Faça a limpeza com socket.off e socket.disconnect() em onUnmounted.

Perguntas Frequentes

A aula “Cliente Socket.io com Vue” é grátis?

Sim — o texto completo de “Cliente Socket.io com Vue” é 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 “Cliente Socket.io com Vue”?

socket.io-client, io(url), socket.on/emit e estado reativo do Vue a partir de eventos do socket. 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 2 de 4.

Quanto tempo leva a aula “Cliente Socket.io com Vue”?

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

  1. Fundamentos de WebSocket no navegador
  2. Cliente Socket.io com Vue
  3. Criação de um componente de chat em tempo real
  4. Composable useWebSocket com reconexão
← Voltar para Vue Academy