Fundamentos de WebSocket no navegador
Abra conexões WebSocket, envie mensagens e trate eventos com a API nativa WebSocket.
Fundamentos de WebSocket no navegador é uma aula grátis de React 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 React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.
O que é WebSocket
WebSocket é um protocolo que fornece comunicação bidirecional simultânea por meio de uma única conexão TCP. Ao contrário do HTTP, a conexão permanece aberta, permitindo que o servidor envie dados ao cliente a qualquer momento.
Abrindo uma conexão
Crie um objeto WebSocket com uma URL ws:// ou wss://. A conexão é aberta de forma assíncrona.
const ws = new WebSocket('wss://api.example.com/ws');
ws.onopen = () => {
console.log('Connection established');
};Enviando mensagens
Use ws.send() para enviar dados. Você pode enviar strings ou dados binários (ArrayBuffer e objetos binários). Codifique os objetos em JSON antes de enviá-los.
ws.onopen = () => {
ws.send(JSON.stringify({ type: 'join', room: 'general' }));
ws.send('Hello, server!');
};Recebendo mensagens
O evento onmessage é disparado sempre que o servidor envia dados. Os dados ficam em event.data como uma string ou em formato binário.
ws.onmessage = (event) => {
const data = JSON.parse(event.data);
console.log('Received:', data);
};Lidando com erros e fechando
Trate os eventos onerror e onclose. O evento de fechamento inclui um código e um motivo que explicam por que a conexão foi encerrada.
ws.onerror = (error) => {
console.error('WebSocket error:', error);
};
ws.onclose = (event) => {
console.log(`Closed: ${event.code} ${event.reason}`);
if (event.wasClean) {
console.log('Clean disconnect');
} else {
console.log('Connection lost — will retry');
}
};Códigos de fechamento
Códigos padrão de fechamento do WebSocket: 1000 = normal, 1001 = encerramento remoto, 1006 = anormal (sem quadro de fechamento), 1008 = violação de política.
readyState
ws.readyState informa o estado atual da conexão: CONNECTING (0), OPEN (1), CLOSING (2) ou CLOSED (3). Sempre verifique antes de enviar.
function sendSafely(ws, data) {
if (ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify(data));
} else {
console.warn('WebSocket not open, dropping message');
}
}Fechando a conexão
Chame ws.close(code, reason) para iniciar um fechamento limpo. O servidor recebe o quadro de fechamento e pode responder com o próprio quadro.
// Normal close
ws.close(1000, 'User logged out');
// Close from a cleanup effect
return () => ws.close();Dados binários
Defina ws.binaryType = 'arraybuffer' (ou 'blob') para receber mensagens binárias. Isso é útil para áudio, imagens ou protocolos personalizados.
ws.binaryType = 'arraybuffer';
ws.onmessage = (event) => {
if (event.data instanceof ArrayBuffer) {
const view = new Uint8Array(event.data);
console.log('Binary message, bytes:', view.length);
} else {
console.log('Text message:', event.data);
}
};Pulso / solicitação-resposta
A API WebSocket do navegador não expõe quadros de ping, mas você pode implementar um pulso no nível da aplicação: envie uma mensagem de verificação a cada N segundos e espere uma resposta correspondente.
function startHeartbeat(ws) {
return setInterval(() => {
if (ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify({ type: 'ping' }));
}
}, 30_000);
}WebSocket versus eventos enviados pelo servidor
Use WebSocket para comunicação bidirecional (bate-papo, jogos). Use eventos enviados pelo servidor (SSE) para fluxos apenas do servidor para o cliente (notificações, fontes de dados em tempo real) — SSE funciona sobre HTTP simples e reconecta automaticamente.
Verificação rápida
Qual valor de readyState do WebSocket indica que a conexão está aberta e pronta para enviar?
Recapitulação
Crie conexões com new WebSocket(url), envie objetos codificados como strings JSON por meio de ws.send() e trate os eventos onmessage, onerror e onclose. Verifique readyState antes de enviar e feche a conexão corretamente com ws.close(1000).
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 React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.
O que vou aprender em “Fundamentos de WebSocket no navegador”?
Abra conexões WebSocket, envie mensagens e trate eventos com a API nativa WebSocket. Você pratica React 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 React Academy?
Nenhuma experiência prévia é necessária. React 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 React Academy?
Sim. Cada aula de React 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
- Usando Socket.IO com React
- Criando um componente de chat em tempo real
- Reconexão, tratamento de erros e limpeza