JavaScript Academy · Aula

Enviando e recebendo mensagens

Troque dados com send e onmessage.

Enviando e recebendo mensagens é uma aula grátis de JavaScript 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 JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

Enviando texto

Depois de aberta, a conexão permite que socket.send(string) transmita uma mensagem de texto ao servidor.

socket.onopen = () => {
  socket.send("ping");
};

Recebendo mensagens

onmessage é acionado para cada quadro recebido. Os dados estão em event.data.

socket.onmessage = (event) => {
  console.log("Received:", event.data);
};

Estruturação de mensagens com JSON

WebSockets transportam cadeias de caracteres brutas. Para enviar dados estruturados, serialize-os com JSON.stringify e interprete-os ao recebê-los.

socket.send(JSON.stringify({ type: "chat", text: "hi" }));
socket.onmessage = (e) => {
  const msg = JSON.parse(e.data);
  console.log(msg.type, msg.text);
};

Roteamento por tipo de mensagem

Um padrão comum é incluir um campo type e encaminhar a mensagem com base nele.

socket.onmessage = (e) => {
  const msg = JSON.parse(e.data);
  switch (msg.type) {
    case "chat": showChat(msg); break;
    case "presence": updatePresence(msg); break;
  }
};

Enviando dados binários

send também aceita ArrayBuffer, matrizes tipadas e Blob como cargas úteis binárias.

const bytes = new Uint8Array([1, 2, 3, 4]);
socket.send(bytes.buffer);

Recebendo dados binários

Com binaryType = "arraybuffer", event.data é um ArrayBuffer que você pode envolver em uma matriz tipada.

socket.binaryType = "arraybuffer";
socket.onmessage = (e) => {
  if (e.data instanceof ArrayBuffer) {
    const view = new Uint8Array(e.data);
    console.log(view.length);
  }
};

Controle de fluxo com bufferedAmount

bufferedAmount informa quantos bytes estão na fila, mas ainda não foram enviados. Verifique esse valor antes de inundar o socket para evitar o crescimento ilimitado do uso de memória.

if (socket.bufferedAmount < 1_000_000) {
  socket.send(payload);
}

Sinais de vida

Envie mensagens periódicas de verificação para que ambos os lados saibam que a conexão está ativa e que intermediários não encerrem conexões ociosas.

setInterval(() => {
  if (socket.readyState === WebSocket.OPEN) {
    socket.send(JSON.stringify({ type: "ping" }));
  }
}, 30000);

Solicitação/resposta via WebSocket

Inclua um identificador nas mensagens enviadas e resolva uma promessa pending quando a resposta correspondente chegar.

const pending = new Map();
function request(payload) {
  const id = crypto.randomUUID();
  socket.send(JSON.stringify({ id, ...payload }));
  return new Promise((res) => pending.set(id, res));
}
socket.onmessage = (e) => {
  const msg = JSON.parse(e.data);
  if (pending.has(msg.id)) { pending.get(msg.id)(msg); pending.delete(msg.id); }
};

Enfileirando antes da abertura

Se for possível enviar antes de o socket abrir, armazene as mensagens e envie-as em onopen.

const queue = [];
function safeSend(data) {
  if (socket.readyState === WebSocket.OPEN) socket.send(data);
  else queue.push(data);
}
socket.onopen = () => { queue.forEach((d) => socket.send(d)); queue.length = 0; };

Validando dados recebidos

Nunca confie nos dados recebidos. Coloque JSON.parse em um bloco try/catch e valide a estrutura antes de usá-los.

socket.onmessage = (e) => {
  let msg;
  try { msg = JSON.parse(e.data); }
  catch { return; }
  if (typeof msg.type !== "string") return;
  handle(msg);
};

Verificação rápida

Teste o envio e o recebimento de mensagens.

Recapitulação: enviando e recebendo

Você enviou dados de texto e binários, tratou onmessage, estruturou dados como JSON, encaminhou mensagens por tipo, acompanhou bufferedAmount para controlar o fluxo, adicionou sinais de vida e enfileirou mensagens antes de o socket abrir. A seguir: o ciclo de vida da conexão.

Perguntas Frequentes

A aula “Enviando e recebendo mensagens” é grátis?

Sim — o texto completo de “Enviando e recebendo mensagens” é 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 JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “Enviando e recebendo mensagens”?

Troque dados com send e onmessage. Você pratica JavaScript 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 JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript 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 “Enviando e recebendo mensagens”?

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 JavaScript Academy?

Sim. Cada aula de JavaScript 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

← Voltar para JavaScript Academy