WebSockets & Realtime Systems Programming · Ders

Bağlantı Yaşam Döngüsü ve Durumları

WebSocket bağlantısının açılmadan kapanmaya kadar çeşitli durumlarını ve bunların nasıl yönetileceğini keşfedin.

Bağlantı Yaşam Döngüsü ve Durumları, CoddyKit'te ücretsiz bir WebSockets & Realtime Systems Programming dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, WebSockets & Realtime Systems Programming öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. WebSockets & Realtime Systems Programming kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

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.

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.

Sıkça Sorulan Sorular

“Bağlantı Yaşam Döngüsü ve Durumları” dersi ücretsiz mi?

Evet — “Bağlantı Yaşam Döngüsü ve Durumları” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve WebSockets & Realtime Systems Programming kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. WebSockets & Realtime Systems Programming kursu toplamda 4 dersten oluşur.

“Bağlantı Yaşam Döngüsü ve Durumları” dersinde ne öğreneceğim?

WebSocket bağlantısının açılmadan kapanmaya kadar çeşitli durumlarını ve bunların nasıl yönetileceğini keşfedin. WebSockets & Realtime Systems Programming ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

WebSockets & Realtime Systems Programming öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te WebSockets & Realtime Systems Programming, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Bağlantı Yaşam Döngüsü ve Durumları” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu WebSockets & Realtime Systems Programming dersinde kod yazıp çalıştırabilir miyim?

Evet. Her WebSockets & Realtime Systems Programming dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

WebSocket El Sıkışma Sürecini Anlama
WebSocket Veri Çerçeveleme ve İletiler
Bağlantı Yaşam Döngüsü ve Durumları
Alt Protokoller, Uzantılar ve Sıkıştırma

← WebSockets & Realtime Systems Programming Sayfasına Dön