feat: Implement real-time chat with Reverb

resources/js/app.ts

@@ -4,6 +4,15 @@ import AppLayout from '@/layouts/AppLayout.vue';
 import AuthLayout from '@/layouts/AuthLayout.vue';
 import SettingsLayout from '@/layouts/settings/Layout.vue';
 import { initializeFlashToast } from '@/lib/flashToast';
+import { configureEcho } from '@laravel/echo-vue';
+
+configureEcho({
+    broadcaster: 'reverb',
+    key: import.meta.env.VITE_REVERB_APP_KEY,
+    host: import.meta.env.VITE_REVERB_HOST,
+    port: import.meta.env.VITE_REVERB_PORT,
+    scheme: import.meta.env.VITE_REVERB_SCHEME,
+});
 
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
 

resources/js/components/Chat.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { useForm } from '@inertiajs/vue3';
 import { route } from 'ziggy-js';
+import { onMounted } from 'vue';
+import { useEcho } from '@laravel/echo-vue';
 
 const props = defineProps({
     chat: Object,
@@ -10,6 +12,15 @@ const form = useForm({
     content: '',
 });
 
+const echo = useEcho();
+
+onMounted(() => {
+    echo.private(`chats.${props.chat.id}`)
+        .listen('MessageSent', (e) => {
+            props.chat.messages.push(e.message);
+        });
+});
+
 function submit() {
     form.post(route('chats.messages.store', props.chat.id), {
         onSuccess: () => form.reset(),