0Pricing
React Academy · Ders

Tarayıcıda WebSocket Temelleri

WebSocket bağlantıları açın, mesaj gönderin ve olayları yerel WebSocket API'siyle yönetin.

Tarayıcıda WebSocket Temelleri, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 1. 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, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.

WebSocket Nedir?

WebSocket, tek bir TCP bağlantısı üzerinden tam çift yönlü iletişim sağlayan bir protokoldür. HTTP'den farklı olarak bağlantı açık kalır ve sunucunun istediği zaman istemciye veri göndermesine olanak tanır.

Bağlantı Açma

ws:// veya wss:// URL'siyle bir WebSocket nesnesi oluşturun. Bağlantı eşzamansız olarak açılır.

const ws = new WebSocket('wss://api.example.com/ws');

ws.onopen = () => {
  console.log('Connection established');
};

Mesaj Gönderme

Veri göndermek için ws.send() kullanın. Dizeler veya ikili veriler (ArrayBuffer, Blob) gönderebilirsiniz. Göndermeden önce nesneleri JSON biçimine dönüştürün.

ws.onopen = () => {
  ws.send(JSON.stringify({ type: 'join', room: 'general' }));
  ws.send('Hello, server!');
};

Mesaj Alma

Sunucu veri gönderdiğinde onmessage olayı tetiklenir. Veri, event.data içinde dize veya ikili tür olarak bulunur.

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

Hataları Ele Alma ve Kapatma

onerror ve onclose olaylarını ele alın. Kapatma olayı, bağlantının neden sona erdiğini açıklayan bir kod ve neden içerir.

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');
  }
};

Kapatma Kodları

Standart WebSocket kapatma kodları: 1000 = normal, 1001 = ayrılıyor, 1006 = anormal (kapatma çerçevesi yok), 1008 = ilke ihlali.

readyState

ws.readyState, geçerli bağlantı durumunu bildirir: CONNECTING (0), OPEN (1), CLOSING (2) veya CLOSED (3). Göndermeden önce her zaman kontrol edin.

function sendSafely(ws, data) {
  if (ws.readyState === WebSocket.OPEN) {
    ws.send(JSON.stringify(data));
  } else {
    console.warn('WebSocket not open, dropping message');
  }
}

Bağlantıyı Kapatma

Temiz bir kapatma başlatmak için ws.close(code, reason) çağrısını yapın. Sunucu kapatma çerçevesini alır ve kendi çerçevesiyle yanıt verebilir.

// Normal close
ws.close(1000, 'User logged out');

// Close from a cleanup effect
return () => ws.close();

İkili Veri

İkili mesajları almak için ws.binaryType = 'arraybuffer' (veya 'blob') ayarını yapın. Bu, ses, görüntü veya özel protokoller için kullanışlıdır.

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);
  }
};

Canlılık Denetimi / Yoklama-Yanıt

Tarayıcıdaki WebSocket programlama arayüzü yoklama çerçevelerini dışa açmaz; ancak uygulama düzeyinde bir canlılık denetimi uygulayabilirsiniz: her N saniyede bir yoklama iletisi gönderin ve bir yanıt bekleyin.

function startHeartbeat(ws) {
  return setInterval(() => {
    if (ws.readyState === WebSocket.OPEN) {
      ws.send(JSON.stringify({ type: 'ping' }));
    }
  }, 30_000);
}

WebSocket ve Sunucu Tarafından Gönderilen Olaylar

Çift yönlü iletişim için WebSocket kullanın (sohbet, oyunlar). Yalnızca sunucudan istemciye akışlar için Sunucu Tarafından Gönderilen Olayları (SSE) kullanın (bildirimler, canlı akışlar); SSE, düz HTTP üzerinden çalışır ve otomatik olarak yeniden bağlanır.

Hızlı Kontrol

Hangi WebSocket readyState değeri bağlantının açık ve göndermeye hazır olduğunu gösterir?

Özet

new WebSocket(url) ile bağlantılar oluşturun, JSON biçimine dönüştürülmüş nesneleri ws.send() aracılığıyla gönderin ve onmessage, onerror ve onclose olaylarını ele alın. Göndermeden önce readyState değerini kontrol edin ve ws.close(1000) ile temiz bir şekilde kapatın.

Sıkça Sorulan Sorular

“Tarayıcıda WebSocket Temelleri” dersi ücretsiz mi?

Evet — “Tarayıcıda WebSocket Temelleri” 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 React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.

“Tarayıcıda WebSocket Temelleri” dersinde ne öğreneceğim?

WebSocket bağlantıları açın, mesaj gönderin ve olayları yerel WebSocket API'siyle yönetin. React Academy 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.

React Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te React Academy, 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 1. dersidir.

“Tarayıcıda WebSocket Temelleri” 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 React Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her React Academy 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

  1. Tarayıcıda WebSocket Temelleri
  2. React ile Socket.IO Kullanımı
  3. Gerçek Zamanlı Sohbet Bileşeni Oluşturma
  4. Yeniden Bağlanma, Hata Yönetimi ve Temizleme
← React Academy Sayfasına Dön