WebSocket ilə Real-Vaxt Bildiriş Sistemi: Sıfırdan Prodaksına

WebSocket ilə Real-Vaxt Bildiriş Sistemi Qurmaq

Salam, developer dostum. Əgər indiyə qədər setInterval ilə hər 5 saniyədən bir serverə sorğu göndərib "yeni bildiriş varmı?" soruşan kod yazmısansa — bu məqalə sənin üçündür. Bu gün HTTP polling-in niyə pis olduğunu, WebSocket-in necə işlədiyini və real bildiriş sistemini sıfırdan qurmağı danışacağıq.

Bakıda fintech, e-commerce və delivery sektorunda işləyən şirkətlər — Birbank, Umico, Wolt kimi platformalar real-vaxt bildirişlər olmadan yaşaya bilməz. Sifarişin statusu dəyişdi? Ödəniş gəldi? Kurier yaxınlaşır? Bütün bunlar WebSocket və ya oxşar texnologiyalarla həll olunur. Bu skill-i öyrənmək sənin CV-ni ciddi şəkildə gücləndirir — Bakıda real-time təcrübəsi olan Node.js developer üçün maaş aralığı 1500-3500 AZN civarındadır.

HTTP Polling vs WebSocket: Nə Fərq Var?

Gəl sadə analogiya ilə başlayaq:

• HTTP Polling: Hər 5 saniyə mağazaya gedib "məktubum gəlib?" soruşursan. 99% hallda cavab "xeyr" olur. Vaxt və enerji itkisi.
• WebSocket: Poçtçuya deyirsən "məktub gələndə mənə xəbər ver". Rahat oturub gözləyirsən.

Texniki fərqlər:

Real rəqəm: 10,000 aktiv istifadəçin varsa, polling ilə saniyədə 2,000 boş sorğu göndərirsən. WebSocket ilə yalnız real bildiriş olanda məlumat ötürülür — server yükü 90%+ azalır.

Arxitektura: Nə Quracağıq?

Sadə, amma prodaksına yaxın bir sistem:

1. Backend: Node.js + Express + Socket.IO
2. Frontend: Vanilla JS (istənilən framework-ə adaptasiya olunur)
3. Bildiriş növləri: sifariş statusu, mesaj, sistem xəbərdarlığı

Axış belə işləyir:

İstifadəçi brauzeri açır → WebSocket bağlantısı qurulur → Server hadisə baş verəndə bildiriş göndərir → Client real-vaxtda göstərir

Addım 1: Backend Quraşdırma

İlk öncə layihəni yaradaq:

bashKopyala
mkdir notification-system && cd notification-system
npm init -y
npm install express socket.io cors

İndi server.js faylını yazaq:

javascriptKopyala
const express = require('express');
const http = require('http');
const { Server } = require('socket.io');
const cors = require('cors');

const app = express();
app.use(cors());
const server = http.createServer(app);

const io = new Server(server, {
  cors: {
    origin: '*',
    methods: ['GET', 'POST']
  }
});

// Aktiv istifadəçiləri saxlayırıq
const activeUsers = new Map();

io.on('connection', (socket) => {
  console.log(`Yeni bağlantı: ${socket.id}`);

  // İstifadəçi autentifikasiyası
  socket.on('register', (userId) => {
    activeUsers.set(userId, socket.id);
    socket.userId = userId;
    console.log(`İstifadəçi qeydiyyatdan keçdi: ${userId}`);
  });

  // Bağlantı kəsiləndə təmizləyirik
  socket.on('disconnect', () => {
    if (socket.userId) {
      activeUsers.delete(socket.userId);
    }
    console.log(`Bağlantı kəsildi: ${socket.id}`);
  });
});

// Konkret istifadəçiyə bildiriş göndərmək üçün funksiya
function sendNotification(userId, notification) {
  const socketId = activeUsers.get(userId);
  if (socketId) {
    io.to(socketId).emit('notification', {
      id: Date.now(),
      ...notification,
      timestamp: new Date().toISOString(),
      read: false
    });
    return true;
  }
  return false; // İstifadəçi online deyil
}

// REST endpoint — digər servislərdən bildiriş trigger etmək üçün
app.post('/api/notify', express.json(), (req, res) => {
  const { userId, type, title, message } = req.body;
  const sent = sendNotification(userId, { type, title, message });
  res.json({ sent, online: sent });
});

// Hamıya bildiriş (sistem xəbərdarlığı)
app.post('/api/broadcast', express.json(), (req, res) => {
  const { type, title, message } = req.body;
  io.emit('notification', {
    id: Date.now(),
    type,
    title,
    message,
    timestamp: new Date().toISOString(),
    read: false
  });
  res.json({ sent: true, recipients: activeUsers.size });
});

const PORT = process.env.PORT || 3001;
server.listen(PORT, () => {
  console.log(`Server işləyir: http://localhost:${PORT}`);
  console.log(`Aktiv bağlantılar: ${activeUsers.size}`);
});

Addım 2: Frontend — Bildiriş Qəbul Etmək

Client tərəfdə Socket.IO ilə qoşulub bildirişləri göstərək:

htmlKopyala
<!DOCTYPE html>
<html lang="az">
<head>
  <meta charset="UTF-8">
  <title>Bildiriş Sistemi</title>
  <style>
    .notification {
      padding: 12px 16px;
      margin: 8px 0;
      border-radius: 8px;
      border-left: 4px solid #3b82f6;
      background: #f0f9ff;
      animation: slideIn 0.3s ease;
    }
    .notification.order { border-color: #10b981; background: #f0fdf4; }
    .notification.warning { border-color: #f59e0b; background: #fffbeb; }
    .notification .time { font-size: 12px; color: #6b7280; }
    @keyframes slideIn {
      from { transform: translateX(100%); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }
  </style>
</head>
<body>
  <h2>🔔 Bildirişlər (<span id="count">0</span>)</h2>
  <div id="notifications"></div>

  <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
  <script>
    const socket = io('http://localhost:3001');
    const userId = 'user_' + Math.random().toString(36).substr(2, 9);
    let count = 0;

    socket.on('connect', () => {
      console.log('WebSocket bağlantısı quruldu!');
      socket.emit('register', userId);
    });

    socket.on('notification', (data) => {
      count++;
      document.getElementById('count').textContent = count;

      const container = document.getElementById('notifications');
      const div = document.createElement('div');
      div.className = `notification ${data.type || ''}`;
      div.innerHTML = `
        <strong>${data.title}</strong>
        <p>${data.message}</p>
        <span class="time">${new Date(data.timestamp).toLocaleTimeString('az-AZ')}</span>
      `;
      container.prepend(div);

      // Browser notification
      if (Notification.permission === 'granted') {
        new Notification(data.title, { body: data.message });
      }
    });

    socket.on('disconnect', () => {
      console.log('Bağlantı kəsildi. Yenidən qoşulur...');
    });

    // Browser notification icazəsi
    Notification.requestPermission();
  </script>
</body>
</html>

Addım 3: Test Etmək

Serveri işə sal və bildiriş göndər:

bashKopyala
# Terminal 1: Serveri başlat
node server.js

# Terminal 2: Test bildirişi göndər
curl -X POST http://localhost:3001/api/broadcast \
  -H "Content-Type: application/json" \
  -d '{"type": "order", "title": "Sifariş təsdiqləndi", "message": "Sifarişiniz 15 dəqiqə ərzində çatdırılacaq"}'

Prodaksın Üçün Vacib Məsləhətlər

Bu kod demo üçün yaxşıdır, amma prodaksına çıxmazdan əvvəl bunları unutma:

• Autentifikasiya: connection event-ində JWT token yoxla. Socket.IO middleware-i buna əladır:

javascriptKopyala
io.use((socket, next) => {
  const token = socket.handshake.auth.token;
  try {
    const user = jwt.verify(token, SECRET);
    socket.userId = user.id;
    next();
  } catch (err) {
    next(new Error('Autentifikasiya uğursuz'));
  }
});

• Redis Adapter: Əgər bir neçə server instance-ın varsa (ki, prodaksında olmalıdır), @socket.io/redis-adapter istifadə et. Bu, bildirişin düzgün instance-a çatmasını təmin edir.
• Offline bildirişlər: İstifadəçi online deyilsə, bildirişi Redis və ya PostgreSQL-ə yaz, qoşulanda göndər.
• Rate limiting: Bir istifadəçiyə saniyədə 10-dan çox bildiriş göndərmə.
• Heartbeat: Socket.IO default olaraq ping/pong mexanizmi ilə "ölü" bağlantıları aşkarlayır. pingTimeout və pingInterval parametrlərini tənzimlə.

Scaling: Böyük Rəqəmlər

Socket.IO + Node.js bir server instance-ında rahat şəkildə 10,000-50,000 concurrent bağlantı saxlaya bilir. Bakıda orta ölçülü bir platforma üçün bu kifayətdir. Daha böyük yük üçün:

• Horizontal scaling + Redis adapter
• Nginx ilə WebSocket proxy (proxy_pass + Upgrade header)
• Kubernetes-də auto-scaling

Yekun

WebSocket real-vaxt tətbiqlərin əsasıdır. Bu gün öyrəndiklərini öz layihəndə tətbiq et — chat sistemi, live dashboard, sifariş tracking, notification center. Portfolio-na belə bir layihə əlavə etmək Bakıda iş müsahibələrində ciddi üstünlük verir.

Kod tam işləyir — kopyala, yapışdır, eksperiment et. Sualın varsa, şərhlərdə gözləyirəm.

Kod yazmağa davam! 🚀