Abrindo uma conexão WebSocket
Conecte-se a um servidor WebSocket.
Abrindo uma conexão WebSocket é uma aula grátis de JavaScript 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 JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.
O que são WebSockets?
WebSockets fornecem uma conexão persistente e bidirecional simultânea entre o navegador e o servidor por meio de uma única conexão TCP. Diferentemente do modelo de solicitação/resposta do HTTP, qualquer lado pode enviar mensagens a qualquer momento — o que é ideal para conversas, fluxos de dados ao vivo e jogos.
Os esquemas ws e wss
Os endereços de WebSocket usam ws:// (sem criptografia) ou wss:// (criptografado com TLS). Prefira sempre wss:// em produção, assim como https.
const url = "wss://example.com/socket";Criando uma conexão
Crie um socket com new WebSocket(url). O processo de negociação começa imediatamente; a conexão só estará pronta quando for aberta.
const socket = new WebSocket("wss://example.com/socket");
console.log(socket.url);O evento de abertura
onopen é acionado quando o processo de negociação termina. Só então é seguro enviar dados.
socket.onopen = (event) => {
console.log("Connection established");
socket.send("Hello server");
};Alternativa a addEventListener
Você pode usar addEventListener em vez das propriedades on* para associar vários manipuladores.
socket.addEventListener("open", () => {
console.log("open via listener");
});readyState da conexão
readyState informa o ciclo de vida: CONNECTING (0), OPEN (1), CLOSING (2), CLOSED (3).
if (socket.readyState === WebSocket.OPEN) {
socket.send("ready!");
}Subprotocolos
Um segundo argumento negocia um subprotocolo. O servidor escolhe um, e você pode ler socket.protocol depois da abertura.
const s = new WebSocket("wss://example.com", ["chat", "v2.chat"]);
s.onopen = () => console.log("Using", s.protocol);Mesma origem e conteúdo misto
Uma página carregada por https só pode abrir conexões wss:// — abrir ws:// é bloqueado como conteúdo misto. Planeje os endereços de acordo com isso.
Tipo binário
Defina binaryType como "blob" (padrão) ou "arraybuffer" para controlar como os quadros binários chegam.
socket.binaryType = "arraybuffer";Um cliente mínimo
Reunindo tudo: abra a conexão, registre o status e faça a limpeza.
const socket = new WebSocket("wss://example.com/socket");
socket.onopen = () => console.log("opened");
socket.onclose = () => console.log("closed");Tempos limite de conexão
WebSockets não têm um tempo limite integrado para a conexão. Use um temporizador que feche o socket se onopen não for acionado a tempo.
const socket = new WebSocket(url);
const timer = setTimeout(() => {
if (socket.readyState !== WebSocket.OPEN) socket.close();
}, 5000);
socket.onopen = () => clearTimeout(timer);Verificação rápida
Teste os fundamentos das conexões.
Recapitulação: abrindo uma conexão
Você aprendeu os esquemas ws/wss, criou um socket com new WebSocket, tratou onopen, verificou readyState, negociou subprotocolos e adicionou um tempo limite de conexão. A seguir: envio e recebimento de mensagens.
Aprenda JavaScript 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
- 59
- Aulas
- 200
Perguntas Frequentes
A aula “Abrindo uma conexão WebSocket” é grátis?
Sim — o texto completo de “Abrindo uma conexão WebSocket” é 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 “Abrindo uma conexão WebSocket”?
Conecte-se a um servidor WebSocket. 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 1 de 4.
Quanto tempo leva a aula “Abrindo uma conexão WebSocket”?
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
- Abrindo uma conexão WebSocket
- Enviando e recebendo mensagens
- Ciclo de vida e erros da conexão
- Estratégias de reconexão