JavaScript Academy · Ders

Mesaj Gönderme ve Alma

send ve onmessage ile veri alışverişi yapın.

Mesaj Gönderme ve Alma, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 2. 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, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

Metin Gönderme

Bağlantı açıldıktan sonra socket.send(string), sunucuya bir metin iletisi gönderir.

socket.onopen = () => {
  socket.send("ping");
};

onmessage ile Alma

Gelen her kare için onmessage tetiklenir. Veriler event.data içindedir.

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

JSON Çerçeveleme

WebSockets ham dizeler taşır. Yapılandırılmış veri göndermek için JSON.stringify ile serileştirin ve alındığında ayrıştırın.

socket.send(JSON.stringify({ type: "chat", text: "hi" }));
socket.onmessage = (e) => {
  const msg = JSON.parse(e.data);
  console.log(msg.type, msg.text);
};

İleti Türüne Göre Yönlendirme

Yaygın bir yaklaşım, bir type alanı eklemek ve işleme işlemini buna göre yönlendirmektir.

socket.onmessage = (e) => {
  const msg = JSON.parse(e.data);
  switch (msg.type) {
    case "chat": showChat(msg); break;
    case "presence": updatePresence(msg); break;
  }
};

İkili Veri Gönderme

send, ikili yükler için ArrayBuffer, türlendirilmiş diziler ve Blob değerlerini de kabul eder.

const bytes = new Uint8Array([1, 2, 3, 4]);
socket.send(bytes.buffer);

İkili Veri Alma

binaryType = "arraybuffer" kullanıldığında event.data, türlendirilmiş bir diziyle sarabileceğiniz bir ArrayBuffer olur.

socket.binaryType = "arraybuffer";
socket.onmessage = (e) => {
  if (e.data instanceof ArrayBuffer) {
    const view = new Uint8Array(e.data);
    console.log(view.length);
  }
};

bufferedAmount ile Geri Basınç

bufferedAmount, sıraya alınmış ancak henüz gönderilmemiş baytları bildirir. Sınırsız bellek büyümesini önlemek için socket'i aşırı miktarda veriyle doldurmadan önce bu değeri denetleyin.

if (socket.bufferedAmount < 1_000_000) {
  socket.send(payload);
}

Kalp Atışları

Her iki tarafın da bağlantının canlı olduğunu bilmesi ve aradaki sistemlerin boşta kalan bağlantıları kapatmaması için düzenli aralıklarla ping iletileri gönderin.

setInterval(() => {
  if (socket.readyState === WebSocket.OPEN) {
    socket.send(JSON.stringify({ type: "ping" }));
  }
}, 30000);

WebSocket Üzerinden İstek/Yanıt

Giden iletileri bir kimlikle etiketleyin ve eşleşen yanıt geldiğinde bekleyen vaadi tamamlayın.

const pending = new Map();
function request(payload) {
  const id = crypto.randomUUID();
  socket.send(JSON.stringify({ id, ...payload }));
  return new Promise((res) => pending.set(id, res));
}
socket.onmessage = (e) => {
  const msg = JSON.parse(e.data);
  if (pending.has(msg.id)) { pending.get(msg.id)(msg); pending.delete(msg.id); }
};

Bağlantı Açılmadan Önce Sıraya Alma

Socket açılmadan önce gönderim yapmanız olasıysa iletileri arabelleğe alın ve bunları onopen içinde gönderin.

const queue = [];
function safeSend(data) {
  if (socket.readyState === WebSocket.OPEN) socket.send(data);
  else queue.push(data);
}
socket.onopen = () => { queue.forEach((d) => socket.send(d)); queue.length = 0; };

Gelen Verileri Doğrulama

Ağ üzerinden gelen verilere asla güvenmeyin. JSON.parse çağrısını try/catch içine alın ve kullanmadan önce yapısını doğrulayın.

socket.onmessage = (e) => {
  let msg;
  try { msg = JSON.parse(e.data); }
  catch { return; }
  if (typeof msg.type !== "string") return;
  handle(msg);
};

Kısa Kontrol

İleti gönderme ve alma işlemlerini sınayın.

Özet: Gönderme ve Alma

Metin ve ikili veriler gönderdiniz, onmessage olayını yönettiniz, verileri JSON olarak çerçevelediniz, türüne göre yönlendirdiniz, geri basıncı izlemek için bufferedAmount değerini kullandınız, kalp atışları eklediniz ve socket açılmadan önce iletileri sıraya aldınız. Sırada bağlantının yaşam döngüsü var.

Sıkça Sorulan Sorular

“Mesaj Gönderme ve Alma” dersi ücretsiz mi?

Evet — “Mesaj Gönderme ve Alma” 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 JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“Mesaj Gönderme ve Alma” dersinde ne öğreneceğim?

send ve onmessage ile veri alışverişi yapın. JavaScript 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.

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

Önceden deneyim gerekmez. CoddyKit'te JavaScript 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 2. dersidir.

“Mesaj Gönderme ve Alma” 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 JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript 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

← JavaScript Academy Sayfasına Dön