WebSocket

WebSocket — bu server bilan doimiy, ikki tomonlama aloqa kanalini o'rnatuvchi protokol. fetchdan farqli o'laroq, u so'rov-javob modelida ishlamaydi: ulanish bir marta o'rnatiladi va ochiq turadi — server istagan paytda mijozga xabar yubora oladi. Bu real vaqt ilovalari uchun ajralmas: chat, o'yin, jonli bildirishnomalar, birja narxlari va h.k.

WebSocket nima uchun kerak?

Oddiy fetch yoki XHR bilan server faqat so'rovga javob bera oladi — mijoz so'ramaguncha, server o'zidan xabar yubora olmaydi. Ammo real vaqt ilovalarida server o'zi xabar yuborishi kerak bo'ladi:

• Chat: boshqa foydalanuvchi xabar yozsa, u darhol ko'rinishi kerak;
• Bildirishnomalar: server yangi voqea haqida darhol xabar berishi kerak;
• Jonli ma'lumotlar: birja narxlari, sport natijalari, onlayn o'yinlar.

WebSocket aynan shu muammoni hal qiladi: ulanish ochiq turadi va ikkala tomon ham istagan paytda xabar yubora oladi.

Ulanishni o'rnatish

WebSocket ulanishi new WebSocket(url) orqali yaratiladi. Manzil http:// emas, ws:// (yoki xavfsiz wss://) protokoli bilan boshlanadi:

let socket = new WebSocket('wss://example.com/chat');

• ws:// — oddiy (shifrlanmagan) ulanish;
• wss:// — xavfsiz, shifrlangan ulanish (HTTPS'ga o'xshab). Doim wss://dan foydalanish tavsiya etiladi.

Asosiy hodisalar

Ulanish o'rnatilgach, uning hayotini to'rtta hodisa boshqaradi:

• open — ulanish muvaffaqiyatli o'rnatildi;
• message — serverdan xabar keldi;
• error — xatolik yuz berdi;
• close — ulanish yopildi.

let socket = new WebSocket('wss://example.com/chat');

socket.onopen = function () {
  console.log('Ulanish o'rnatildi');
};

socket.onmessage = function (event) {
  console.log('Serverdan xabar: ' + event.data);
};

socket.onerror = function (error) {
  console.log('Xatolik yuz berdi');
};

socket.onclose = function (event) {
  if (event.wasClean) {
    console.log('Ulanish toza yopildi');
  } else {
    console.log('Ulanish uzildi (masalan, server o'chdi)');
  }
  console.log('Kod: ' + event.code + ', sabab: ' + event.reason);
};

Xabar yuborish: send

Serverga xabar yuborish uchun socket.send() ishlatiladi. Uni matn (string) yoki binar ma'lumot (Blob, ArrayBuffer) bilan chaqirish mumkin:

// Matn yuborish
socket.send('Salom, server!');

// Obyektni JSON qilib yuborish
socket.send(JSON.stringify({
  type: 'message',
  text: 'Assalomu alaykum'
}));

socket.onopen = function () {
  // Endi yuborish xavfsiz
  socket.send('Ulanish tayyor, salom!');
};

readyState — ulanish holati

socket.readyState ulanishning hozirgi holatini bildiradi:

• 0 (CONNECTING) — ulanmoqda, hali tayyor emas;
• 1 (OPEN) — ulanish ochiq, xabar yuborish mumkin;
• 2 (CLOSING) — yopilmoqda;
• 3 (CLOSED) — yopilgan.

if (socket.readyState === WebSocket.OPEN) {
  socket.send('Xabar');
} else {
  console.log('Ulanish hali tayyor emas');
}

Ulanishni yopish

Ulanishni tugatish uchun socket.close() ishlatiladi. Ixtiyoriy ravishda yopilish kodi va sababini berish mumkin:

// Oddiy yopish
socket.close();

// Kod va sabab bilan
socket.close(1000, 'Ish tugadi');
// 1000 — normal yopilish kodi

Qayta ulanish (reconnection)

Real ilovalarda tarmoq uzilishi mumkin. Ulanish uzilganda uni avtomatik qayta tiklash muhim. Buning uchun close hodisasida yangi ulanish yaratamiz:

function ulanish() {
  let socket = new WebSocket('wss://example.com/chat');

  socket.onopen = function () {
    console.log('Ulandi');
  };

  socket.onmessage = function (event) {
    console.log('Xabar: ' + event.data);
  };

  socket.onclose = function (event) {
    if (!event.wasClean) {
      // Ulanish g'ayritabiiy uzildi — qayta ulanamiz
      console.log('Ulanish uzildi, 3 sekunddan keyin qayta urinamiz...');
      setTimeout(ulanish, 3000);
    }
  };

  socket.onerror = function () {
    console.log('Xatolik, ulanish yopiladi');
  };
}

ulanish();

To'liq amaliy misol: oddiy chat

Xabar qabul qilish va yuborishni birlashtirgan soddalashtirilgan chat mijozi:

let socket = new WebSocket('wss://example.com/chat');

// Ulanish ochilganda
socket.onopen = function () {
  console.log('Chatga ulandingiz');
};

// Xabar kelganda
socket.onmessage = function (event) {
  let msg = JSON.parse(event.data);
  console.log(msg.user + ': ' + msg.text);
};

// Xabar yuborish funksiyasi
function xabarYubor(matn) {
  if (socket.readyState === WebSocket.OPEN) {
    socket.send(JSON.stringify({
      user: 'Ali',
      text: matn
    }));
  }
}

// Foydalanish (masalan, tugma bosilganda):
// xabarYubor('Salom hammaga!');

WebSocket va fetch: farqi

Ikki texnologiya butunlay boshqa maqsadlar uchun:

• Aloqa modeli: fetch — so'rov/javob (mijoz so'raydi, server javob beradi va tugaydi); WebSocket — doimiy ochiq kanal;
• Yo'nalish: fetch — asosan bir tomonlama (mijoz boshlaydi); WebSocket — ikki tomonlama (ikkalasi ham xabar yuboradi);
• Serverning tashabbusi: fetchda server o'zi xabar yubora olmaydi; WebSocketda yubora oladi;
• Protokol: fetch — http/https; WebSocket — ws/wss;
• Qachon ishlatiladi: fetch — oddiy ma'lumot olish/yuborish; WebSocket — real vaqt (chat, o'yin, jonli yangilanishlar).

Xulosa

• WebSocket — server bilan doimiy, ikki tomonlama, real vaqt aloqa kanali;
• Ulanish: new WebSocket('wss://...') — wss:// xavfsiz variantdir;
• To'rt asosiy hodisa: open (ulandi), message (xabar keldi), error (xatolik), close (yopildi);
• Xabar yuborish: socket.send(...) — faqat opendan keyin;
• socket.readyState — ulanish holatini bildiradi (CONNECTING, OPEN, CLOSING, CLOSED);
• Tarmoq uzilsa, close hodisasida setTimeout bilan qayta ulanish qo'llaniladi;
• fetch — so'rov/javob uchun; WebSocket — real vaqt, ikki tomonlama aloqa uchun.