WebSocket Demo: Sipariş Takip Sistemi

Bu proje Next.js ve Socket.io kullanılarak yapılmış basit bir gerçek zamanlı iletişim demosudur.

Kurulum ve Çalıştırma

Bu projeyi çalıştırmak için 2 terminale ihtiyacınız var.

1. Terminal: Socket Sunucusu (Backend)

Bu sunucu 3001 portunda çalışır ve tüm iletişimi yönetir.

node socket-server/server.js

(Ben sizin için bunu arka planda başlattım, ama durursa tekrar çalıştırabilirsiniz)

2. Terminal: Next.js Uygulaması (Frontend)

Bu uygulama 3000 portunda çalışır ve arayüzü sunar.

npm run dev

Nasıl Test Edilir?

1. Tarayıcıda http://localhost:3000 adresine gidin.
2. Müşteri Ekranı'nı yeni bir sekmede açın. (Burada "Bağlanıyor..." ve sipariş durumu görünür)
3. Mutfak Ekranı'nı başka bir sekmede (veya yan yana pencerede) açın.
4. Mutfak ekranındaki butonlara (Hazırlanıyor, Fırında vb.) tıklayın.
5. Müşteri ekranındaki yazının sayfa yenilenmeden anında değiştiğini gözlemleyin!

Dosya Yapısı

• socket-server/server.js: Backend. Socket.io sunucusu burada. Olayları dinler ve yayınlar.
• src/app/tracker/page.tsx: Müşteri sayfası. socket.on ile sunucuyu dinler.
• src/app/kitchen/page.tsx: Mutfak sayfası. socket.emit ile sunucuya veri gönderir.