feat: Realtime Functionality

nuxt/pages/index.vue

@@ -4,8 +4,24 @@ import BookInfoCard from '~/components/dashboard/BookInfoCard.vue'
 definePageMeta({ middleware: ['auth'] })
 
 const bookRecommendationStore = useBookRecommendationStore()
+const authStore = useAuthStore()
+const { $echo } = useNuxtApp()
 
 bookRecommendationStore.fetchActiveRecommendations()
+
+onMounted(() => {
+  $echo.private(`BookRecommendation`)
+    .listen('.BookRecommendationUpdated', (e) => {
+      bookRecommendationStore.updateRecommendationWS(e.bookRecommendation)
+    })
+    .listen('.BookRecommendationDeleted', (e) => {
+      bookRecommendationStore.deleteRecommendationWS(e.bookRecommendation)
+    })
+    .listen('.BookRecommendationCreated', (e) => {
+      bookRecommendationStore.createRecommendationWS(e.bookRecommendation)
+    })
+  authStore.socketId = $echo.socketId()
+})
 </script>
 
 <template>