From aae37bd0b3d7f73cdffd325bce7d964ad201cce8 Mon Sep 17 00:00:00 2001
From: TR Tajim <com.tajim@gmail.com>
Date: Sun, 11 Oct 2026 10:48:05 +0600
Subject: [PATCH 1/2] feat(chat): gate realtime websocket to authenticated
 users and disconnect on unmount

---
 resources/js/lib/echo.ts          | 16 ++++++++
 resources/js/pages/Chat/Index.vue | 61 ++++++++++++++++++++++++-------
 2 files changed, 64 insertions(+), 13 deletions(-)

diff --git a/resources/js/lib/echo.ts b/resources/js/lib/echo.ts
index 6e135423..6f0e7411 100644
--- a/resources/js/lib/echo.ts
+++ b/resources/js/lib/echo.ts
@@ -44,3 +44,19 @@ export function getEcho(key?: string, cluster?: string): Echo<'pusher'> | null {
 
     return echoInstance;
 }
+
+export function disconnectEcho(): void {
+    if (echoInstance) {
+        try {
+            echoInstance.disconnect();
+        } catch {
+            // Silently ignore disconnect errors
+        }
+
+        echoInstance = null;
+
+        if (typeof window !== 'undefined' && (window as any).Echo) {
+            delete (window as any).Echo;
+        }
+    }
+}
diff --git a/resources/js/pages/Chat/Index.vue b/resources/js/pages/Chat/Index.vue
index 633df696..d026d93c 100644
--- a/resources/js/pages/Chat/Index.vue
+++ b/resources/js/pages/Chat/Index.vue
@@ -1,26 +1,26 @@
 <script setup lang="ts">
 import { Head, Link, router } from '@inertiajs/vue3';
 import {
-    Send,
-    Trash2,
-    Lock,
-    Loader2,
-    LogIn,
+    AlertCircle,
     ArrowDown,
+    AtSign,
     Ban,
-    Flag,
     Check,
     Copy,
-    X,
-    Reply,
-    Smile,
+    Flag,
     Info,
-    ShieldCheck,
-    AlertCircle,
+    Loader2,
+    Lock,
+    LogIn,
     Radio,
-    AtSign,
+    Reply,
+    Send,
+    ShieldCheck,
+    Smile,
+    Trash2,
     Users,
     UserX,
+    X,
 } from 'lucide-vue-next';
 import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
 import AuthModal from '@/components/AuthModal.vue';
@@ -29,7 +29,7 @@ import type { ChatBanUser } from '@/components/ChatBanModal.vue';
 import PwaInstallPrompt from '@/components/PwaInstallPrompt.vue';
 import UserListItem from '@/components/UserListItem.vue';
 import VerifiedBadge from '@/components/VerifiedBadge.vue';
-import { getEcho } from '@/lib/echo';
+import { disconnectEcho, getEcho } from '@/lib/echo';
 import { useAuth } from '@/lib/useAuth';
 import { getCsrfToken } from '@/lib/useCsrf';
 import { formatDateDivider, formatTime } from '@/lib/useDate';
@@ -606,6 +606,10 @@ const fetchLatestMessages = async (force = false) => {
 let handlePusherReconnect: (() => void) | null = null;
 
 const setupRealtime = () => {
+    if (!currentUser.value) {
+        return;
+    }
+
     const echo = getEcho(
         props.chatState.pusher_key,
         props.chatState.pusher_cluster,
@@ -1457,6 +1461,22 @@ const handleDocumentClick = () => {
     showMentionSuggestions.value = false;
 };
 
+watch(currentUser, (newUser, oldUser) => {
+    if (newUser && !oldUser) {
+        setupRealtime();
+        setupPresenceChannel();
+    } else if (!newUser && oldUser) {
+        const echo = getEcho();
+
+        if (echo) {
+            echo.leave(chatChannelName.value);
+            echo.leave(presenceChannelName.value);
+        }
+
+        disconnectEcho();
+    }
+});
+
 onMounted(() => {
     initCooldown();
     setupRealtime();
@@ -1537,6 +1557,8 @@ onUnmounted(() => {
         echo.leave(chatChannelName.value);
         echo.leave(presenceChannelName.value);
     }
+
+    disconnectEcho();
 });
 </script>
 
@@ -1631,6 +1653,19 @@ onUnmounted(() => {
         <div
             class="flex h-[calc(100dvh-13.5rem)] min-h-[480px] flex-col overflow-hidden rounded-2xl border border-slate-200/90 bg-white shadow-xs sm:h-[calc(100dvh-8.5rem)] dark:border-zinc-800 dark:bg-zinc-900"
         >
+            <!-- Guest Notice Banner -->
+            <div
+                v-if="!currentUser"
+                class="flex items-center gap-2 border-b border-indigo-100 bg-indigo-50/70 px-3.5 py-2 text-xs text-indigo-900 sm:px-5 dark:border-indigo-950/60 dark:bg-indigo-950/30 dark:text-indigo-200"
+            >
+                <Radio
+                    class="h-3.5 w-3.5 shrink-0 text-indigo-600 dark:text-indigo-400"
+                />
+                <p class="truncate text-[11px] sm:text-xs">
+                    রিয়েলটাইম লাইভ চ্যাট দেখতে ও মেসেজ পাঠাতে লগইন করুন
+                </p>
+            </div>
+
             <!-- Scrollable Message Stream -->
             <div
                 ref="messagesContainerRef"

From 64894b8af0641329215ffddc237f1dd354bf1742 Mon Sep 17 00:00:00 2001
From: TR Tajim <com.tajim@gmail.com>
Date: Sun, 11 Oct 2026 10:54:16 +0600
Subject: [PATCH 2/2] refactor(chat): remove redundant currentUser watcher

---
 resources/js/pages/Chat/Index.vue | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/resources/js/pages/Chat/Index.vue b/resources/js/pages/Chat/Index.vue
index d026d93c..fc620d4d 100644
--- a/resources/js/pages/Chat/Index.vue
+++ b/resources/js/pages/Chat/Index.vue
@@ -1461,22 +1461,6 @@ const handleDocumentClick = () => {
     showMentionSuggestions.value = false;
 };
 
-watch(currentUser, (newUser, oldUser) => {
-    if (newUser && !oldUser) {
-        setupRealtime();
-        setupPresenceChannel();
-    } else if (!newUser && oldUser) {
-        const echo = getEcho();
-
-        if (echo) {
-            echo.leave(chatChannelName.value);
-            echo.leave(presenceChannelName.value);
-        }
-
-        disconnectEcho();
-    }
-});
-
 onMounted(() => {
     initCooldown();
     setupRealtime();