WebSocket API: open, message, close ve error
Bir WebSocket bağlantısı oluşturmayı, message olay işleyicisinde iletiler gönderip almayı ve bağlantı hataları ile düzgün kapanmayı yönetmeyi öğrenin.
WebSocket API: open, message, close ve error, CoddyKit'te ücretsiz bir Frontend 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, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
WebSockets Neden Kullanılır?
HTTP, istek ve yanıt temellidir. Gerçek zamanlı uygulamalar (sohbet, çok oyunculu oyunlar, canlı güncellemeler) için kalıcı, iki yönlü iletişime ihtiyacınız vardır. WebSockets, açık kalan tek bir TCP bağlantısı sağlar ve her iki tarafın da istediği zaman mesaj göndermesine olanak tanır.
WebSocket Oluşturma
ws:// veya wss:// URL'siyle bir WebSocket oluşturun. Tarayıcı, yükseltme el sıkışmasını kendisi yönetir.
const ws = new WebSocket('wss://api.example.com/realtime');
// Always use wss:// (secure) in productionDört Olay
WebSocket'in dört olay türü vardır: open (bağlandı), message (veri alındı), close (bağlantı sona erdi), error (sorun).
ws.addEventListener('open', () => {
console.log('Connected');
ws.send(JSON.stringify({ type: 'subscribe', channel: 'updates' }));
});
ws.addEventListener('message', (event) => {
const data = JSON.parse(event.data);
console.log('Received:', data);
});
ws.addEventListener('close', (event) => {
console.log('Closed:', event.code, event.reason);
});
ws.addEventListener('error', (event) => {
console.error('Error:', event);
});Mesaj Gönderme
ws.send() kullanın. Bu yöntem dizeleri, ArrayBuffers, Blob'ları veya ArrayBufferView'ları kabul eder. Yapılandırılmış veriler için önce JSON.stringify kullanın.
ws.send('hello');
ws.send(JSON.stringify({ type: 'chat', text: 'Hi' }));
// Binary:
const buffer = new ArrayBuffer(8);
ws.send(buffer);Mesaj Alma
event.data değerini inceleyin; türü, sunucunun gönderdiği veriyle aynıdır. Nesne yükleri için JSON.parse kullanın.
ws.addEventListener('message', (event) => {
// typeof event.data: string | ArrayBuffer | Blob
if (typeof event.data === 'string') {
const msg = JSON.parse(event.data);
handleMessage(msg);
}
});Bağlantı Durumu (readyState)
ws.readyState değerini kontrol edin: CONNECTING=0, OPEN=1, CLOSING=2, CLOSED=3. OPEN durumundan önce gönderim yapmayın.
if (ws.readyState === WebSocket.OPEN) {
ws.send(message);
} else {
console.warn('Not connected yet');
}Temiz Kapatma
ws.close(code, reason) çağrısını yapın. Standart kapatma kodları: 1000 (normal), 1001 (uzaklaşma), 1008 (ilke ihlali), 1011 (sunucu hatası).
ws.close(1000, 'User logged out');Yeniden Bağlanma Stratejisi
WebSockets, ağ değişiklikleri, sunucunun yeniden başlatılması ve benzeri durumlarda bağlantısını keser. Üstel geri çekilmeyle yeniden bağlanmayı uygulayın.
let reconnectDelay = 1000;
function connect() {
const ws = new WebSocket('wss://api/realtime');
ws.addEventListener('open', () => { reconnectDelay = 1000; });
ws.addEventListener('close', () => {
setTimeout(connect, reconnectDelay);
reconnectDelay = Math.min(reconnectDelay * 2, 30000);
});
return ws;
}Kalp Atışları / Canlı Tutma
Boşta kalan WebSocket bağlantıları, yaklaşık 60 saniye sonra proxy'ler ve yük dengeleyiciler tarafından sonlandırılır. Bağlantıyı canlı tutmak için her 25-30 saniyede bir ping gönderin.
let pingInterval;
ws.addEventListener('open', () => {
pingInterval = setInterval(() => {
if (ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify({ type: 'ping' }));
}
}, 25000);
});
ws.addEventListener('close', () => clearInterval(pingInterval));Kimlik Doğrulama
WebSockets özel üst bilgileri desteklemez. Seçenekler: 1) WS URL'sinde sorgu dizesi belirteciyle (?token=jwt) kimlik doğrulama. 2) open olayından sonra bir kimlik doğrulama mesajı gönderme. 3) Bir çerez kullanma (aynı kaynak için otomatik olarak çalışır).
// Query string:
const ws = new WebSocket(`wss://api/realtime?token=${jwt}`);
// Auth message:
ws.addEventListener('open', () => {
ws.send(JSON.stringify({ type: 'auth', token: jwt }));
});WebSockets için React Kancası
Bağlantıların sızmasını önlemek için WS yaşam döngüsünü özel bir kancada kapsülleyin.
function useWebSocket(url) {
const [messages, setMessages] = useState([]);
const wsRef = useRef(null);
useEffect(() => {
const ws = new WebSocket(url);
wsRef.current = ws;
ws.addEventListener('message', (e) => {
setMessages(m => [...m, JSON.parse(e.data)]);
});
return () => ws.close();
}, [url]);
return { messages, send: (msg) => wsRef.current?.send(JSON.stringify(msg)) };
}WebSocket ve HTTP/2 ve SSE Karşılaştırması
WebSocket: tam çift yönlüdür; her iki taraf da gönderim yapar. HTTP/2 sunucu itmesi: kullanımdan kaldırılmıştır. Server-Sent Events: yalnızca sunucudan istemciye iletişim sağlar, daha basittir ve otomatik olarak yeniden bağlanır. İstemcinin de gönderim yapması gerekiyorsa (sohbet gibi) WS'yi, tek yönlü bildirimler için SSE'yi seçin.
Hızlı Kontrol
Normal ve kasıtlı bir kapatma (örneğin kullanıcının oturumunu kapatması) için standart WebSocket kapatma kodu nedir?
Özet: WebSocket API'si
new WebSocket('wss://...') bağlantıyı açar. Dört olay: open, message, close, error. send() dize/ArrayBuffer/Blob kabul eder; nesneler için JSON.stringify kullanılır. Gönderimden önce readyState değerini kontrol edin. Temiz kapatma için close(1000) kullanın. Üstel geri çekilmeyle yeniden bağlanın. Bağlantıyı canlı tutmak için her 25 saniyede bir kalp atışı gönderin. Sorgu dizesi veya kimlik doğrulama mesajıyla kimlik doğrulaması yapın. React'te yaşam döngüsü için bir kancaya sarın.
Sıkça Sorulan Sorular
“WebSocket API: open, message, close ve error” dersi ücretsiz mi?
Evet — “WebSocket API: open, message, close ve error” 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 Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“WebSocket API: open, message, close ve error” dersinde ne öğreneceğim?
Bir WebSocket bağlantısı oluşturmayı, message olay işleyicisinde iletiler gönderip almayı ve bağlantı hataları ile düzgün kapanmayı yönetmeyi öğrenin. Frontend 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.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend 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.
“WebSocket API: open, message, close ve error” 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 Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend 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
- WebSocket API: open, message, close ve error
- Socket.io İstemci Entegrasyonu
- Tek Yönlü Akış için Sunucu Tarafından Gönderilen Olaylar
- Gerçek Zamanlı Arayüz Kalıpları