WebSockets & Realtime Systems Programming · Aula

Ciclo de vida e estados da conexão

Explore os vários estados de uma conexão WebSocket, desde a abertura até o fechamento, e aprenda a gerenciá-los.

Aula 3 de 411 etapas

Ciclo de vida e estados da conexão é uma aula grátis de WebSockets & Realtime Systems Programming no CoddyKit. Esta é a aula 3 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 WebSockets & Realtime Systems Programming, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de WebSockets & Realtime Systems Programming inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

Understanding Connection States

When you work with WebSockets, it's crucial to know the current state of your connection. This helps you manage data flow and handle disconnections gracefully.

Just like a phone call goes through phases (dialing, connected, hanging up), a WebSocket connection has a defined lifecycle with specific states.

The CONNECTING State (0)

The very first state of a WebSocket is CONNECTING. This happens immediately after you create a new WebSocket object.

Its numeric value is 0.
In this state, the client is trying to establish a connection with the server.
This includes the initial HTTP handshake process that upgrades the connection to WebSocket.
You cannot send messages yet.

Connecting with Node.js

When a WebSocket client attempts to connect, it enters the CONNECTING state (readyState = 0). This is where the initial handshake occurs.

To run this Node.js example:

Make sure you have Node.js installed.
Open your terminal and run npm init -y
Install the ws library: npm install ws
Save the code below as index.js.
Run node index.js.

Note: You'll need a WebSocket server running on ws://localhost:8080 for a successful connection.

const WebSocket = require('ws');

const ws = new WebSocket('ws://localhost:8080');

console.log(`Initial state: ${ws.readyState}`); // Expected: 0 (CONNECTING)

ws.onopen = () => {
  console.log(`Connection opened! State: ${ws.readyState}`); // Expected: 1 (OPEN)
  ws.send('Hello from CoddyKit client!');
  setTimeout(() => ws.close(1000, 'Demo complete'), 2000);
};

ws.onmessage = (event) => {
  console.log(`Received: ${event.data}`);
};

ws.onclose = (event) => {
  console.log(`Connection closed. Code: ${event.code}, Reason: ${event.reason}`);
  console.log(`Final state: ${ws.readyState}`); // Expected: 3 (CLOSED)
};

ws.onerror = (error) => {
  console.error('WebSocket Error:', error.message);
};

The OPEN State (1)

Once the handshake is complete and the connection is successfully established, the WebSocket enters the OPEN state.

Its numeric value is 1.
In this state, the connection is ready for bidirectional communication.
You can send data to the server, and the server can send data to you.
This is the active communication phase.

Handling the OPEN Event

The onopen event is fired once the WebSocket connection transitions from CONNECTING to OPEN. This is your cue that you can start sending messages.

Run this Node.js example to see the onopen event in action:

const WebSocket = require('ws');
const ws = new WebSocket('ws://localhost:8080');

ws.onopen = () => {
  console.log('WebSocket connection is now OPEN!');
  console.log(`Current state: ${ws.readyState}`); // Expected: 1 (OPEN)
  ws.send('Ready to chat!');
  setTimeout(() => ws.close(), 1500); // Close after a short delay
};

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

ws.onclose = () => {
  console.log('Connection closed.');
};

ws.onerror = (error) => {
  console.error('Error:', error.message);
};

The CLOSING State (2)

When either the client or the server decides to terminate the connection, it enters the CLOSING state.

Its numeric value is 2.
This state occurs after ws.close() is called, but before the connection is fully shut down.
During this phase, a closing handshake is performed to ensure a clean termination.
No new messages should be sent, though some buffered messages might still be processed.

Gracefully Closing a Connection

You can explicitly close a WebSocket connection using the ws.close() method. This will transition the connection through the CLOSING state (readyState = 2) before finally becoming CLOSED (readyState = 3).

Observe the state changes when closing:

const WebSocket = require('ws');
const ws = new WebSocket('ws://localhost:8080');

ws.onopen = () => {
  console.log(`Connection OPEN. State: ${ws.readyState}`); // 1
  console.log('Initiating connection close...');
  ws.close(1000, 'Client requested shutdown'); // Code 1000: normal closure
  console.log(`State after calling close(): ${ws.readyState}`); // Expected: 2 (CLOSING)
};

ws.onclose = (event) => {
  console.log(`Connection CLOSED. State: ${ws.readyState}`); // 3
  console.log(`Close Code: ${event.code}, Reason: ${event.reason}`);
};

ws.onerror = (error) => {
  console.error('Error during connection:', error.message);
};

The CLOSED State (3)

The final state for a WebSocket connection is CLOSED.

Its numeric value is 3.
The connection has been completely terminated.
No further communication can occur on this particular WebSocket object.
If you need to reconnect, you must create a new WebSocket instance.

Checking Connection Status

You can always check the current state of a WebSocket connection using its readyState property. This property returns one of the numeric values (0, 1, 2, 3) or their corresponding named constants:

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

Using these constants makes your code more readable!

Quick Check: Connection States

The readyState property indicates the current status of a WebSocket connection.

Responda na aula interativa

Recap: WebSocket Lifecycle

Great job! You've learned about the four essential states of a WebSocket connection:

CONNECTING (0): Handshake in progress.
OPEN (1): Connection established, ready for data.
CLOSING (2): Close handshake initiated.
CLOSED (3): Connection terminated.

Understanding these states is fundamental for building robust and reliable realtime applications.

Grátis para começar

Aprenda WebSockets & Realtime Systems Programming 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: 12
Aulas: 47

Começar a aprender grátis Ver o curso completo

Perguntas Frequentes

A aula “Ciclo de vida e estados da conexão” é grátis?

Sim — o texto completo de “Ciclo de vida e estados da conexão” é 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 WebSockets & Realtime Systems Programming, atualize para CoddyKit PRO. O curso de WebSockets & Realtime Systems Programming inclui 4 aulas no total.

O que vou aprender em “Ciclo de vida e estados da conexão”?

Explore os vários estados de uma conexão WebSocket, desde a abertura até o fechamento, e aprenda a gerenciá-los. Você pratica WebSockets & Realtime Systems Programming 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 WebSockets & Realtime Systems Programming?

Nenhuma experiência prévia é necessária. WebSockets & Realtime Systems Programming 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 3 de 4.

Quanto tempo leva a aula “Ciclo de vida e estados da conexão”?

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 WebSockets & Realtime Systems Programming?

Sim. Cada aula de WebSockets & Realtime Systems Programming 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

Explicando o handshake do WebSocket
Enquadramento de dados e mensagens WebSocket
Ciclo de vida e estados da conexão
Subprotocolos, extensões e compressão

← Voltar para WebSockets & Realtime Systems Programming