Vue Academy · Aula

Fundamentos de WebSocket no navegador

new WebSocket(url), onopen/onmessage/onerror/onclose, send() e readyState.

Fundamentos de WebSocket no navegador é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 1 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.

Tempo real no navegador

HTTP segue o modelo solicitação/resposta: o cliente faz a solicitação, o servidor responde e a conexão é encerrada. Para conversas, painéis ao vivo ou jogos multijogador, você precisa que o servidor envie dados sem que ninguém os solicite.

O protocolo WebSocket fornece uma única conexão duradoura e bidirecional entre o navegador e o servidor.

Abrindo uma conexão

O navegador oferece um construtor global WebSocket. Passe uma URL usando o esquema ws:// (simples) ou wss:// (TLS).

A criação do objeto inicia imediatamente o processo de conexão.

const ws = new WebSocket("wss://echo.example.com/socket")

// Construction kicks off the connection.
// Nothing is sent yet — we wait for it to open.

O manipulador onopen

A conexão não fica pronta no instante em que você a cria. O evento onopen é acionado assim que o processo de conexão é concluído e o socket está pronto para transportar dados.

Envie sua primeira mensagem dentro de onopen, nunca antes.

const ws = new WebSocket("wss://echo.example.com/socket")

ws.onopen = () => {
  console.log("Connected!")
  ws.send("hello server")
}

Recebendo mensagens

Os dados recebidos chegam por meio de onmessage. A carga está em event.data e, por padrão, é uma string.

A maioria dos aplicativos envia JSON, então você usa parse para convertê-lo novamente em um objeto.

ws.onmessage = (event) => {
  const msg = JSON.parse(event.data)
  console.log("Got:", msg.type, msg.payload)
}

Enviando mensagens

Use ws.send() para transmitir dados. Os WebSockets transportam strings simples ou dados binários, então codifique os objetos primeiro com JSON.stringify.

Os dois lados concordam com um formato — neste caso, um type e uma payload.

function sendChat(text) {
  const msg = { type: "chat", payload: { text } }
  ws.send(JSON.stringify(msg))
}

sendChat("Good morning")

Uma ida e volta completa

Juntar abertura, envio e recebimento fornece um cliente de eco completo. Abra o socket, envie quando ele for aberto e registre tudo o que retornar.

const ws = new WebSocket("wss://echo.example.com/socket")

ws.onopen = () => {
  ws.send(JSON.stringify({ type: "ping" }))
}

ws.onmessage = (event) => {
  const data = JSON.parse(event.data)
  console.log("Server replied:", data)
}

Fechando a conexão

O evento onclose é acionado quando a conexão termina — seja porque você chamou ws.close(), seja porque a rede caiu. O evento contém um code numérico e uma string reason.

O código 1000 significa um fechamento normal.

ws.onclose = (event) => {
  console.log("Closed:", event.code, event.reason)
  if (event.code !== 1000) {
    console.log("Unexpected close — may want to reconnect")
  }
}

// Trigger a clean close yourself:
// ws.close(1000, "done")

Tratando erros

O evento onerror é acionado em caso de falhas no transporte. O próprio evento de erro contém intencionalmente poucos detalhes por razões de segurança; trate-o como um sinal de que algo deu errado e de que provavelmente ocorrerá um fechamento.

ws.onerror = (event) => {
  console.error("WebSocket error occurred")
  // onclose usually fires right after onerror.
}

A propriedade readyState

ws.readyState é um número que informa em que ponto do ciclo de vida o socket está. Sempre verifique esse valor antes de enviar dados, para não lançar uma exceção ao usar um socket que ainda não foi aberto.

0 CONNECTING
1 OPEN
2 CLOSING
3 CLOSED

function safeSend(data) {
  if (ws.readyState === WebSocket.OPEN) {
    ws.send(JSON.stringify(data))
  } else {
    console.warn("Not open, readyState =", ws.readyState)
  }
}

Constantes nomeadas de readyState

Em vez de números mágicos, use as constantes da classe WebSocket. Elas são muito mais claras do que 0, 1 ou 3.

console.log(WebSocket.CONNECTING) // 0
console.log(WebSocket.OPEN)       // 1
console.log(WebSocket.CLOSING)    // 2
console.log(WebSocket.CLOSED)     // 3

if (ws.readyState === WebSocket.OPEN) {
  ws.send("ready to talk")
}

Juntando tudo no Vue

Dentro de um componente Vue, normalmente você cria o socket em onMounted e o desmonta em onUnmounted. Os manipuladores atualizam refs reativas que o seu modelo renderiza.

import { ref, onMounted, onUnmounted } from "vue"

const messages = ref([])
let ws

onMounted(() => {
  ws = new WebSocket("wss://echo.example.com/socket")
  ws.onmessage = (e) => messages.value.push(JSON.parse(e.data))
})

onUnmounted(() => ws && ws.close())

Verificação rápida

Verifique sua compreensão dos valores de readyState do WebSocket.

Recapitulação

Nesta lição, você aprendeu:

new WebSocket(url) inicia uma conexão bidirecional usando ws:// ou wss://.
onopen é acionado quando o socket está pronto; envie dados somente depois disso.
onmessage entrega dados em event.data — use parse no JSON para obter um objeto.
ws.send(JSON.stringify(msg)) transmite dados.
onclose e onerror tratam do encerramento e das falhas.
readyState é 0 CONNECTING, 1 OPEN, 2 CLOSING e 3 CLOSED.

Perguntas Frequentes

A aula “Fundamentos de WebSocket no navegador” é grátis?

Sim — o texto completo de “Fundamentos de WebSocket no navegador” é 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 “Fundamentos de WebSocket no navegador”?

new WebSocket(url), onopen/onmessage/onerror/onclose, send() e readyState. 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 1 de 4.

Quanto tempo leva a aula “Fundamentos de WebSocket no navegador”?

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