echo notification vue

Author: joetannenbaum

packages/react/src/hooks/use-echo.ts

@@ -2,13 +2,13 @@ import { type BroadcastDriver } from "laravel-echo";
 import { useCallback, useEffect, useRef } from "react";
 import { echo } from "../config";
 import type {
+    BroadcastNotification,
     Channel,
     ChannelData,
     ChannelReturnType,
     Connection,
     ModelEvents,
     ModelPayload,
-    Notification,
 } from "../types";
 import { toArray } from "../util";
 
@@ -169,11 +169,11 @@ export const useEchoNotification = <
     TDriver extends BroadcastDriver = BroadcastDriver,
 >(
     channelName: string,
-    callback: (payload: Notification<TPayload>) => void = () => {},
+    callback: (payload: BroadcastNotification<TPayload>) => void = () => {},
     event: string | string[] = [],
     dependencies: any[] = [],
 ) => {
-    const result = useEcho<Notification<TPayload>, TDriver, "private">(
+    const result = useEcho<BroadcastNotification<TPayload>, TDriver, "private">(
         channelName,
         [],
         callback,
@@ -186,7 +186,7 @@ export const useEchoNotification = <
     const initialized = useRef(false);
 
     const cb = useCallback(
-        (notification: Notification<TPayload>) => {
+        (notification: BroadcastNotification<TPayload>) => {
             if (!listening.current) {
                 return;
             }

packages/react/src/types.ts

@@ -16,7 +16,10 @@ export type Channel = {
     visibility: "private" | "public" | "presence";
 };
 
-export type Notification<TPayload> = TPayload & { id: string; type: string };
+export type BroadcastNotification<TPayload> = TPayload & {
+    id: string;
+    type: string;
+};
 
 export type ChannelReturnType<
     T extends BroadcastDriver,

packages/vue/src/composables/useEcho.ts

@@ -2,6 +2,7 @@ import { type BroadcastDriver } from "laravel-echo";
 import { onMounted, onUnmounted, ref, watch } from "vue";
 import { echo } from "../config";
 import type {
+    BroadcastNotification,
     Channel,
     ChannelData,
     ChannelReturnType,
@@ -178,6 +179,75 @@ export const useEcho = <
     };
 };
 
+export const useEchoNotification = <
+    TPayload,
+    TDriver extends BroadcastDriver = BroadcastDriver,
+>(
+    channelName: string,
+    callback: (payload: BroadcastNotification<TPayload>) => void = () => {},
+    event: string | string[] = [],
+    dependencies: any[] = [],
+) => {
+    const result = useEcho<BroadcastNotification<TPayload>, TDriver, "private">(
+        channelName,
+        [],
+        callback,
+        dependencies,
+        "private",
+    );
+
+    const events = toArray(event);
+    let listening = false;
+    let initialized = false;
+
+    const cb = (notification: BroadcastNotification<TPayload>) => {
+        if (!listening) {
+            return;
+        }
+
+        if (events.length === 0 || events.includes(notification.type)) {
+            callback(notification);
+        }
+    };
+
+    const listen = () => {
+        if (listening) {
+            return;
+        }
+
+        if (!initialized) {
+            result.channel().notification(cb);
+        }
+
+        listening = true;
+        initialized = true;
+    };
+
+    const stopListening = () => {
+        if (!listening) {
+            return;
+        }
+
+        listening = false;
+    };
+
+    onMounted(() => {
+        listen();
+    });
+
+    return {
+        ...result,
+        /**
+         * Stop listening for notification events
+         */
+        stopListening,
+        /**
+         * Listen for notification events
+         */
+        listen,
+    };
+};
+
 export const useEchoPresence = <
     TPayload,
     TDriver extends BroadcastDriver = BroadcastDriver,

packages/vue/src/index.ts

@@ -1,6 +1,7 @@
 export {
     useEcho,
     useEchoModel,
+    useEchoNotification,
     useEchoPresence,
     useEchoPublic,
 } from "./composables/useEcho";

packages/vue/src/types.ts

@@ -16,6 +16,11 @@ export type Channel = {
     visibility: "private" | "public" | "presence";
 };
 
+export type BroadcastNotification<TPayload> = TPayload & {
+    id: string;
+    type: string;
+};
+
 export type ChannelReturnType<
     T extends BroadcastDriver,
     V extends Channel["visibility"],