Gerçek Zamanlı Bildirim Sorunlarını Vue, Laravel ve Socket.IO Kullanarak Çözme

Gerçek zamanlı bildirimler, birçok modern uygulamanın temel bir özelliğidir.

Son zamanlarda, bir Vue + Laravel uygulaması üzerinde çalışırken, Socket.IO tabanlı bildirimler ile ilgili bir dizi sorunla karşılaştım; yerel ortamda iyi çalışan bu bildirimler üretim ortamında sorunlar çıkarıyordu.

Bu yazıda, sorunun ne olduğunu, nasıl çözdüğümü ve öğrendiğim dersleri açıklayacağım.

🔔 Sorun

Gerçek zamanlı bildirimleri Socket.IO kullanarak uyguladık, böylece kullanıcılar hemen güncellemeleri (etkinlikler, uyarılar, sistem mesajları) alabiliyordu.

Karşılaştığımız sorunlar:

• Bildirimler rastgele durdu
• Sayfa yenileme sonrasında çift bildirim
• Kullanıcılar “bağlı” kaldı ama mesaj almadılar
• Her şey yerelde çalıştı, ancak üretim ortamı kararsızdı

Bu durum karışıklığa neden oldu ve sisteme duyulan güveni azalttı.

🧰 Teknoloji Yığını

• Frontend: Vue.js
• Backend: Laravel
• WebSocket: Socket.IO
• Auth: Token tabanlı kimlik doğrulama
• Sunucu: Nginx + Üretim ortamı

🔍 Kök Neden Analizi

Frontend ve backend’i hata ayıkladıktan sonra, ana sorunlar şunlardı:

1. WebSocket bağlantıları biri birden fazla kez oluşturuldu
2. Olay dinleyicileri temizlenmedi
3. Kullanıcılar socket bağlantılarına doğru şekilde eşlenmedi
4. Boşta kalan bağlantılar sessizce kesildi
5. Yeniden bağlanma mantığı çift olay oluşturdu

Kısacası:

👉 WebSocket bağlantısı mevcuttu ama doğru şekilde yönetilmiyordu.

🛠️ Çözüm

1️⃣ Vue’da Doğru Socket Başlatma

Socket, her bileşen yüklendiğinde yeniden başlatılıyordu.

Düzeltme: Tek bir yeniden kullanılabilir socket örneği oluşturun.

js
// socket.js
import { io } from "socket.io-client";

let socket = null;

export const connectSocket = (token) => {
  if (!socket) {
    socket = io(import.meta.env.VITE_SOCKET_URL, {
      auth: { token },
      transports: ["websocket"],
    });
  }
  return socket;
};