Implementasi WebSocket pada Frontend (Real-time chat between User)

🚧 Enhancement: Implementasi WebSocket di Front-End

📄 Deskripsi

Backend telah menyediakan endpoint WebSocket di route:

GET /api/chat/ws

Endpoint ini menggunakan autentikasi JWT dan mendukung fitur seperti:

• Real-time messaging antara dua pengguna
• Pengiriman pesan offline saat user reconnect
• Update status pesan (sent, delivered, read)

Namun, saat ini Front-End belum mengimplementasikan koneksi WebSocket ke endpoint tersebut, sehingga fitur real-time chat belum berfungsi.

✅ Acceptance Criteria

• Client melakukan koneksi WebSocket ke /api/chat/ws setelah login
• Koneksi WebSocket menggunakan header Authorization: Bearer <JWT>
• Client dapat mengirim dan menerima pesan secara real-time
• Pesan yang belum dibaca dapat diterima saat reconnect (offline message)
• Client dapat meng-handle error dari server (misalnya invalid format, user tidak valid)
• Client menutup koneksi saat logout atau tidak aktif

🔧 Referensi Teknis

Backend Handler: HandleWebSocketConnection di chat_handler.go
Service terkait: websocket_client.go, websocket_hub.go, chat_service.go

💡 Catatan Implementasi

• Gunakan library seperti native WebSocket, socket.io-client, atau reconnecting-websocket sesuai kebutuhan
• Gunakan context userID dari JWT claims untuk autentikasi saat upgrade koneksi
• Perhatikan format payload dari server, misalnya:

{
  "type": "new_private_message",
  "payload": {
    "id": 1,
    "senderid": 2,
    "recipientid": 3,
    "content": "Hello!",
    "timestamp": "2025-06-05T14:22:00Z",
    "status": "sent"
  }
}

---

Implementasi fitur ini penting untuk mendukung pengalaman pengguna yang lebih interaktif dan responsif pada fitur chat.

Dokumentasi WebSocket API

Websocket Documentation.pdf