Merge pull request #435 from laravel/null-channel-fix

`channel` is now immediately available

Author: joetannenbaum

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

@@ -4,7 +4,6 @@ import { echo } from "../config";
 import type {
     Channel,
     ChannelData,
-    ChannelReturnType,
     Connection,
     ModelEvents,
     ModelPayload,
@@ -51,7 +50,7 @@ const leaveChannel = (channel: Channel, leaveAll: boolean): void => {
 
 const resolveChannelSubscription = <T extends BroadcastDriver>(
     channel: Channel,
-): Connection<T> | void => {
+): Connection<T> => {
     if (channels[channel.id]) {
         channels[channel.id].count += 1;
 
@@ -60,12 +59,6 @@ const resolveChannelSubscription = <T extends BroadcastDriver>(
 
     const channelSubscription = subscribeToChannel<T>(channel);
 
-    if (!channelSubscription) {
-        // eslint-disable-next-line no-console
-        console.warn(`Failed to subscribe to channel: ${channel.id}`);
-        return;
-    }
-
     channels[channel.id] = {
         count: 1,
         connection: channelSubscription,
@@ -85,11 +78,6 @@ export const useEcho = <
     dependencies: any[] = [],
     visibility: TVisibility = "private" as TVisibility,
 ) => {
-    const callbackFunc = useCallback(callback, dependencies);
-    const subscription = useRef<Connection<TDriver> | null>(null);
-    const listening = useRef(false);
-
-    const events = toArray(event);
     const channel: Channel = {
         name: channelName,
         id: ["private", "presence"].includes(visibility)
@@ -98,13 +86,22 @@ export const useEcho = <
         visibility,
     };
 
+    const callbackFunc = useCallback(callback, dependencies);
+    const listening = useRef(false);
+    const initialized = useRef(false);
+    const subscription = useRef<Connection<TDriver>>(
+        resolveChannelSubscription<TDriver>(channel),
+    );
+
+    const events = toArray(event);
+
     const stopListening = useCallback(() => {
         if (!listening.current) {
             return;
         }
 
         events.forEach((e) => {
-            subscription.current!.stopListening(e, callbackFunc);
+            subscription.current.stopListening(e, callbackFunc);
         });
 
         listening.current = false;
@@ -116,7 +113,7 @@ export const useEcho = <
         }
 
         events.forEach((e) => {
-            subscription.current!.listen(e, callbackFunc);
+            subscription.current.listen(e, callbackFunc);
         });
 
         listening.current = true;
@@ -129,14 +126,11 @@ export const useEcho = <
     }, dependencies);
 
     useEffect(() => {
-        const channelSubscription =
-            resolveChannelSubscription<TDriver>(channel);
-
-        if (!channelSubscription) {
-            return;
+        if (initialized.current) {
+            subscription.current = resolveChannelSubscription<TDriver>(channel);
         }
 
-        subscription.current = channelSubscription;
+        initialized.current = true;
 
         listen();
 
@@ -163,8 +157,7 @@ export const useEcho = <
         /**
          * Channel instance
          */
-        channel: () =>
-            subscription.current as ChannelReturnType<TDriver, TVisibility>,
+        channel: () => subscription.current,
     };
 };
 

packages/react/src/types.ts

@@ -28,15 +28,6 @@ export type ModelPayload<T> = {
     afterCommit: boolean;
 };
 
-export type ChannelReturnType<
-    T extends BroadcastDriver,
-    V extends Channel["visibility"],
-> = V extends "presence"
-    ? Broadcaster[T]["presence"]
-    : V extends "private"
-      ? Broadcaster[T]["private"]
-      : Broadcaster[T]["public"];
-
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export type ModelName<T extends string> = T extends `${infer _}.${infer U}`
     ? ModelName<U>

packages/vue/src/composables/useEcho.ts

@@ -4,7 +4,6 @@ import { echo } from "../config";
 import type {
     Channel,
     ChannelData,
-    ChannelReturnType,
     Connection,
     ModelEvents,
     ModelPayload,
@@ -15,7 +14,7 @@ const channels: Record<string, ChannelData<BroadcastDriver>> = {};
 
 const resolveChannelSubscription = <T extends BroadcastDriver>(
     channel: Channel,
-): Connection<T> | null => {
+): Connection<T> => {
     if (channels[channel.id]) {
         channels[channel.id].count += 1;
 
@@ -24,12 +23,6 @@ const resolveChannelSubscription = <T extends BroadcastDriver>(
 
     const channelSubscription = subscribeToChannel<T>(channel);
 
-    if (!channelSubscription) {
-        // eslint-disable-next-line no-console
-        console.warn(`Failed to subscribe to channel: ${channel.id}`);
-        return null;
-    }
-
     channels[channel.id] = {
         count: 1,
         connection: channelSubscription,
@@ -95,8 +88,6 @@ export const useEcho = <
         },
     );
 
-    let subscription: Connection<TDriver> | null = null;
-    const events = Array.isArray(event) ? event : [event];
     const channel: Channel = {
         name: channelName,
         id: ["private", "presence"].includes(visibility)
@@ -105,13 +96,11 @@ export const useEcho = <
         visibility,
     };
 
-    const setupSubscription = () => {
-        subscription = resolveChannelSubscription<TDriver>(channel);
-
-        if (!subscription) {
-            return;
-        }
+    const subscription: Connection<TDriver> =
+        resolveChannelSubscription<TDriver>(channel);
+    const events = Array.isArray(event) ? event : [event];
 
+    const setupSubscription = () => {
         listen();
     };
 
@@ -121,7 +110,7 @@ export const useEcho = <
         }
 
         events.forEach((e) => {
-            subscription!.listen(e, eventCallback.value);
+            subscription.listen(e, eventCallback.value);
         });
 
         listening.value = true;
@@ -133,7 +122,7 @@ export const useEcho = <
         }
 
         events.forEach((e) => {
-            subscription!.stopListening(e, eventCallback.value);
+            subscription.stopListening(e, eventCallback.value);
         });
 
         listening.value = false;
@@ -184,7 +173,7 @@ export const useEcho = <
         /**
          * Channel instance
          */
-        channel: () => subscription! as ChannelReturnType<TDriver, TVisibility>,
+        channel: () => subscription,
     };
 };
 
@@ -231,8 +220,8 @@ export const useEchoModel = <
 >(
     model: TModel,
     identifier: string | number,
-    event: ModelEvents<TModel> | ModelEvents<TModel>[],
-    callback: (payload: ModelPayload<TPayload>) => void,
+    event: ModelEvents<TModel> | ModelEvents<TModel>[] = [],
+    callback: (payload: ModelPayload<TPayload>) => void = () => {},
     dependencies: any[] = [],
 ) => {
     return useEcho<ModelPayload<TPayload>, TDriver, "private">(

packages/vue/src/types.ts

@@ -28,15 +28,6 @@ export type ModelPayload<T> = {
     afterCommit: boolean;
 };
 
-export type ChannelReturnType<
-    T extends BroadcastDriver,
-    V extends Channel["visibility"],
-> = V extends "presence"
-    ? Broadcaster[T]["presence"]
-    : V extends "private"
-      ? Broadcaster[T]["private"]
-      : Broadcaster[T]["public"];
-
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export type ModelName<T extends string> = T extends `${infer _}.${infer U}`
     ? ModelName<U>