Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

WebSockets texnologiyasi

ULASHISH

WebSockets-ga kirish

WebSockets mijoz va server o‘rtasida doimiy aloqani ta’minlaydi, bu real vaqtda, ikki tomonlama aloqani ta’minlaydi.

Bu so‘rov-javob modeliga amal qiladigan an’anaviy HTTP-dan farq qiladi.

WebSockets-ning asosiy afzalliklari

  • Real vaqtda yangilanishlar: ma’lumotlarni darhol mijozlarga uzating
  • Samarali: takroriy HTTP so‘rovlariga ehtiyoj yo‘q
  • Ikki tomonlama: mijoz ham, server ham xabar yuborishi mumkin
  • Kam kechikish: Xabarlar darhol yuboriladi

WebSockets va HTTP

WebSockets va HTTP o‘rtasidagi farqni tushunish real vaqtda ilovalarni samarali yaratish uchun juda muhimdir.

Xususiyat WebSockets HTTP
Ulanish Doimiy, yagona ulanish Har bir so‘rov uchun yangi ulanish
Aloqa Ikki tomonlama, to‘liq dupleks Bir yo‘nalishli, so‘rov-javob
Ustki yuk Qo‘l siqishdan keyin minimal Har bir so‘rov bilan sarlavhalar
Foydalanish holati Haqiqiy vaqtda ilovalar An’anaviy veb-sahifalar, API
Misol Chat ilovalari, jonli tasma Veb-sahifalarni yuklash, ariza topshirish

Pro Maslahat: WebSockets WebSocket protokoliga (ws:// yoki wss://) yangilashdan oldin HTTP qo‘l siqish (status kodi 101) bilan boshlanadi.

WebSockets sozlamalari

1. ws modulini o‘rnating

Birinchidan, loyihangiz uchun yangi katalog yarating va uni ishga tushiring:

mkdir websocket-demo
cd websocket-demo
npm init -y

Keyin ws paketini o‘rnating:

npm install ws

Eslatma: ws moduli oddiy, tezkor va har tomonlama sinovdan o‘tgan WebSocket mijozi va server dasturidir.

WebSocket serverini yaratish

Keling, har qanday qabul qilingan xabarni aks ettiruvchi oddiy WebSocket serverini yarataylik.

server.js nomli yangi fayl yarating:

Misol: WebSocket Echo Server

const WebSocket = require('ws');

// Create a WebSocket server on port 8080
const wss = new WebSocket.Server({ port: 8080 });

console.log('WebSocket server is running on ws://localhost:8080');

// Connection event handler
wss.on('connection', (ws) => {
  console.log('New client connected');
  
  // Send a welcome message to the client
  ws.send('Welcome to the WebSocket server!');

  // Message event handler
  ws.on('message', (message) => {
    console.log(`Received: ${message}`);
    // Echo the message back to the client
    ws.send(`Server received: ${message}`);
  });

  // Close event handler
  ws.on('close', () => {
    console.log('Client disconnected');
  });
});

Kodeksni tushunish

  1. Biz ws modulini import qilamiz
  2. 8080 portida yangi WebSocket serverini yarating
  3. Ulanishlar, xabarlar va uzilishlar uchun hodisa ishlov beruvchilarini sozlang
  4. Qabul qilingan xabarlarni mijozga qaytaring

Sinab ko‘ring

1. Yuqoridagi kodni server.js sifatida saqlang

2. Serverni ishga tushiring: node server.js

3. Server ws://localhost:8080 da ishga tushadi va tinglaydi

WebSocket mijozini yaratish

Endi bizda WebSocket serveri bor, keling, unga ulanish uchun mijozlar yarataylik. Biz Node.js mijozi va brauzer mijozini yaratamiz.

1. Node.js mijozi

client.js nomli yangi fayl yarating:

const WebSocket = require('ws');
const readline = require('readline');

// Create readline interface for user input
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

// Connect to the WebSocket server
const ws = new WebSocket('ws://localhost:8080');

// Connection opened
ws.on('open', () => {
  console.log('Connected to the WebSocket server');
  promptForMessage();
});

// Listen for messages from the server
ws.on('message', (message) => {
  console.log(`Server: ${message}`);
});

// Handle errors
ws.on('error', (error) => {
  console.error('WebSocket error:', error);
});

// Handle connection close
ws.on('close', () => {
  console.log('Disconnected from the server');
  process.exit(0);
});

// Function to prompt user for messages
function promptForMessage() {
  rl.question('Enter a message (or "exit" to quit): ', (message) => {
    if (message.toLowerCase() === 'exit') {
      ws.close();
      rl.close();
      return;
    }
    ws.send(message);
    promptForMessage();
  });
}

Node.js mijozidan qanday foydalanish kerak

  1. Yuqoridagi kodni client.js sifatida saqlang
  2. WebSocket serveri ishlayotganligiga ishonch hosil qiling
  3. Mijozni ishga tushiring: node client.js
  4. Xabarlarni kiriting va ularni serverga yuborish uchun Enter tugmasini bosing
  5. Chiqish uchun "chiqish" ni kiriting

2. Brauzer mijozi

Keling, WebSocket serverimizga ulanish uchun JavaScript bilan oddiy HTML sahifa yarataylik.

index.html nomli fayl yarating:

<!DOCTYPE html>
<html>
<head>
  <title>WebSocket Client</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 600px;
      margin: 0 auto;
      padding: 20px;
    }
    #messages {
      height: 300px;
      border: 1px solid #ccc;
      overflow-y: auto;
      padding: 10px;
      margin-bottom: 10px;
    }
    .message { margin: 5px 0; }
  </style>
</head>
<body>
  <h1>WebSocket Client</h1>
  <div id="status">Connecting to server...</div>
  <div id="messages"></div>
  <div>
    <input type="text" id="messageInput" placeholder="Type your message">
    <button onclick="sendMessage()">Send</button>
  </div>

  <script>
    const status = document.getElementById('status');
    const messages = document.getElementById('messages');
    const messageInput = document.getElementById('messageInput');

    // Connect to the WebSocket server
    const ws = new WebSocket('ws://localhost:8080');

    // Connection opened
    ws.onopen = () => {
      status.textContent = 'Connected to server';
      status.style.color = 'green';
    };

    // Listen for messages
    ws.onmessage = (event) => {
      const message = document.createElement('div');
      message.className = 'message';
      message.textContent = event.data;
      messages.appendChild(message);
      messages.scrollTop = messages.scrollHeight;
    };

    // Handle errors
    ws.onerror = (error) => {
      status.textContent = 'Error: ' + error.message;
      status.style.color = 'red';
    };

    // Handle connection close
    ws.onclose = () => {
      status.textContent = 'Disconnected from server';
      status.style.color = 'red';
    };

    // Function to send a message
    function sendMessage() {
      const message = messageInput.value.trim();
      if (message) {
        ws.send(message);
        messageInput.value = '';
      }
    }

    // Send message on Enter key
    messageInput.addEventListener('keypress', (e) => {
      if (e.key === 'Enter') {
        sendMessage();
      }
    });
  </script>
</body>
</html>
O‘zingiz sinab ko‘ring »

Brauzer mijozidan qanday foydalanish kerak

  1. Yuqoridagi kodni index.html sifatida saqlang
  2. WebSocket serveri ishlayotganligiga ishonch hosil qiling
  3. HTML faylni veb-brauzerda oching
  4. Kirish maydoniga xabarlarni kiriting va Yuborish tugmasini bosing yoki Enter tugmasini bosing

Eslatma: Brauzer mijozi ishlashi uchun brauzer xavfsizligi cheklovlari tufayli HTML faylga veb-server orqali (masalan, http-server yoki live-server) xizmat ko‘rsatishingiz kerak bo‘ladi.

3. Ilovani sinovdan o‘tkazish

  1. WebSocket serverini ishga tushiring: node server.js
  2. Mijoz HTML sahifasi bilan bir nechta brauzer oynalarini oching
  3. Turli mijozlardan xabarlar yuboring va ularning real vaqtda paydo bo‘lishini ko‘ring
  4. Brauzer mijozlari bilan bir qatorda Node.js mijozini ham ishga tushirishingiz mumkin

Amalga oshirishni tushunish

  • Server barcha ulangan mijozlar to‘plamini saqlaydi
  • Bitta mijozdan xabar qabul qilinganda, u boshqa barchaga uzatiladi
  • Mijoz ulanish, uzilish va xato hodisalarini boshqaradi
  • Xabarlar qabul qilingan vaqtda real vaqt rejimida ko‘rsatiladi

WebSocket voqealari

WebSockets voqealarga asoslangan modeldan foydalanadi. Mana asosiy voqealar:

Tadbir Tavsif
connection (server) Mijoz serverga ulanganda ishga tushiriladi
open (client) Ulanish o‘rnatilganda ishga tushiriladi
message Xabar qabul qilinganda ishga tushiriladi
error Xatolik yuzaga kelganda ishga tushiriladi
close Ulanish yopilganda ishga tushiriladi

Haqiqiy dunyo ilovalari

WebSockets turli xil real ilovalarda qo‘llaniladi:

  • Chat ilovalari: Tezkor xabarlarni yetkazib berish
  • Jonli boshqaruv paneli: Ko‘rsatkichlar va ma’lumotlarning real vaqtda yangilanishi
  • Hamkorlik vositalari: Bitta hujjatni bir nechta foydalanuvchi tahrirlaydi
  • O‘yinlar: Tez o‘zaro ta’sirlarni talab qiluvchi ko‘p o‘yinchi onlayn o‘yinlar
  • Moliyaviy platformalar: Haqiqiy vaqtda birja kotirovkalari va savdo platformalari
  • IoT ilovalari: Ulangan qurilmalarni kuzatish va boshqarish

Kengaytirilgan WebSocket xususiyatlari

1. Ikkilik ma’lumotlarni uzatish

WebSockets ma’lum turdagi ma’lumotlar uchun samaraliroq bo‘lgan ikkilik ma’lumotlarni yuborishni qo‘llab-quvvatlaydi:

// Sending binary data (server-side)
const buffer = Buffer.from([0x48, 0x65, 0x6c, 0x6c, 0x6f]); // 'Hello' in binary
ws.send(buffer, { binary: true });

// Receiving binary data (client-side)
ws.binaryType = 'arraybuffer';
ws.onmessage = (event) => {
  if (event.data instanceof ArrayBuffer) {
    const view = new Uint8Array(event.data);
    console.log('Received binary data:', view);
  }
};

2. Yurak urishi va ulanish monitoringi

Ajralishlarni aniqlash va boshqarish uchun yurak urishlarini amalga oshiring:

// Server-side heartbeat
function setupHeartbeat(ws) {
  ws.isAlive = true;
  ws.on('pong', () => { ws.isAlive = true; });
}

// Ping all clients every 30 seconds
const interval = setInterval(() => {
  wss.clients.forEach((ws) => {
    if (ws.isAlive === false) return ws.terminate();
    ws.isAlive = false;
    ws.ping();
  });
}, 30000);

// Clean up on server close
wss.on('close', () => {
  clearInterval(interval);
});

Xavfsizlik masalalari

1. Autentifikatsiya

Har doim WebSocket ulanishlarini autentifikatsiya qiling:

const http = require('http');
const WebSocket = require('ws');
const jwt = require('jsonwebtoken');

const server = http.createServer();
const wss = new WebSocket.Server({ noServer: true });

// Handle upgrade with authentication
server.on('upgrade', (request, socket, head) => {
  try {
    const token = request.url.split('token=')[1];
    if (!token) throw new Error('No token provided');
    
    // Verify JWT token
    jwt.verify(token, 'your-secret-key', (err, decoded) => {
      if (err) {
        socket.write('HTTP/1.1 401 Unauthorized\r\n\r\n');
        socket.destroy();
        return;
      }
      
      // Proceed with WebSocket handshake
      wss.handleUpgrade(request, socket, head, (ws) => {
        ws.user = decoded; // Attach user data to WebSocket
        wss.emit('connection', ws, request);
      });
    });
  } catch (error) {
    socket.write('HTTP/1.1 401 Unauthorized\r\n\r\n');
    socket.destroy();
  }
});

2. Tarifni cheklash

Tarifni cheklash bilan suiiste’mollikning oldini oling:

const rateLimit = require('ws-rate-limit');

// Limit to 100 messages per minute per connection
const limiter = rateLimit({
  windowMs: 60 * 1000, // 1 minute
  max: 100,
  message: 'Too many messages, please slow down!',
});

wss.on('connection', (ws) => {
  limiter(ws);
  // ... rest of your connection handler
});

3. Kirishni tekshirish

Har doim kiruvchi xabarlarni tasdiqlang:

const Joi = require('joi');

const messageSchema = Joi.object({
  type: Joi.string().valid('chat', 'join', 'leave').required(),
  username: Joi.string().alphanum().min(3).max(30),
  message: Joi.string().max(1000),
  room: Joi.string().alphanum().max(50),
});

ws.on('message', (data) => {
  try {
    const message = JSON.parse(data);
    const { error, value } = messageSchema.validate(message);
    if (error) {
      throw new Error(`Invalid message: ${error.details[0].message}`);
    }
    // Process valid message...
  } catch (err) {
    ws.send(JSON.stringify({ error: err.message }));
  }
});

Ishlashni optimallashtirish

Siqish

O‘tkazish qobiliyatini kamaytirish uchun har bir xabar deflatsiyasini yoqing:

const WebSocket = require('ws');

const wss = new WebSocket.Server({
  port: 8080,
  perMessageDeflate: {
    zlibDeflateOptions: {
      chunkSize: 1024,
      memLevel: 7,
      level: 3
    },
    zlibInflateOptions: {
      chunkSize: 10 * 1024
    },
    // Other options
    clientNoContextTakeover: true,
    serverNoContextTakeover: true,
    concurrencyLimit: 10,
  }
});

Eng yaxshi amaliyot: Ishlab chiqarish ilovalari uchun WebSockets-ni qo‘llab-quvvatlamaydigan brauzerlar uchun zaxiralar kabi qo‘shimcha funksiyalarni ta’minlaydigan Socket.IO kabi kutubxonalardan foydalanishni ko‘rib chiqing.

‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish