Merge branch 'laravel:2.x' into 2.x

Author: toitzi

CHANGELOG.md

@@ -1,6 +1,19 @@
 # Release Notes
 
-## [Unreleased](https://github.com/laravel/echo/compare/v2.1.4...2.x)
+## [Unreleased](https://github.com/laravel/echo/compare/v2.1.6...2.x)
+
+## [v2.1.6](https://github.com/laravel/echo/compare/v2.1.5...v2.1.6) - 2025-06-17
+
+* Fix subscriptions not being restored on reconnect by [@electron93](https://github.com/electron93) in https://github.com/laravel/echo/pull/446
+
+## [v2.1.5](https://github.com/laravel/echo/compare/v2.1.4...v2.1.5) - 2025-06-03
+
+### What's Changed
+
+* Revert CSRF logic by [@joetannenbaum](https://github.com/joetannenbaum) in https://github.com/laravel/echo/pull/442
+* Added useEchoNotification hook by [@joetannenbaum](https://github.com/joetannenbaum) in https://github.com/laravel/echo/pull/443
+
+**Full Changelog**: https://github.com/laravel/echo/compare/v2.1.4...v2.1.5
 
 ## [v2.1.4](https://github.com/laravel/echo/compare/v2.1.3...v2.1.4) - 2025-05-15
 

packages/laravel-echo/package.json

@@ -1,6 +1,6 @@
 {
     "name": "laravel-echo",
-    "version": "2.1.4",
+    "version": "2.1.6",
     "description": "Laravel Echo library for beautiful Pusher and Socket.IO integration",
     "keywords": [
         "laravel",

packages/laravel-echo/src/connector/connector.ts

@@ -90,14 +90,26 @@ export abstract class Connector<
      * Extract the CSRF token from the page.
      */
     protected csrfToken(): null | string {
-        return (
-            window?.Laravel?.csrfToken ??
-            this.options.csrfToken ??
-            document
-                ?.querySelector('meta[name="csrf-token"]')
-                ?.getAttribute("content") ??
-            null
-        );
+        if (typeof window !== "undefined" && window.Laravel?.csrfToken) {
+            return window.Laravel.csrfToken;
+        }
+
+        if (this.options.csrfToken) {
+            return this.options.csrfToken;
+        }
+
+        if (
+            typeof document !== "undefined" &&
+            typeof document.querySelector === "function"
+        ) {
+            return (
+                document
+                    .querySelector('meta[name="csrf-token"]')
+                    ?.getAttribute("content") ?? null
+            );
+        }
+
+        return null;
     }
 
     /**

packages/laravel-echo/src/connector/socketio-connector.ts

@@ -46,7 +46,7 @@ export class SocketIoConnector extends Connector<
             this.options as Partial<ManagerOptions & SocketOptions>,
         );
 
-        this.socket.on("reconnect", () => {
+        this.socket.io.on("reconnect", () => {
             Object.values(this.channels).forEach((channel) => {
                 channel.subscribe();
             });

packages/react/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@laravel/echo-react",
-    "version": "2.1.4",
+    "version": "2.1.6",
     "description": "React hooks for seamless integration with Laravel Echo.",
     "keywords": [
         "laravel",

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

@@ -2,6 +2,7 @@ import { type BroadcastDriver } from "laravel-echo";
 import { useCallback, useEffect, useRef } from "react";
 import { echo } from "../config";
 import type {
+    BroadcastNotification,
     Channel,
     ChannelData,
     ChannelReturnType,
@@ -167,6 +168,91 @@ 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 = useRef(
+        toArray(event)
+            .map((e) => {
+                if (e.includes(".")) {
+                    return [e, e.replace(/\./g, "\\")];
+                }
+
+                return [e, e.replace(/\\/g, ".")];
+            })
+            .flat(),
+    );
+    const listening = useRef(false);
+    const initialized = useRef(false);
+
+    const cb = useCallback(
+        (notification: BroadcastNotification<TPayload>) => {
+            if (!listening.current) {
+                return;
+            }
+
+            if (
+                events.current.length === 0 ||
+                events.current.includes(notification.type)
+            ) {
+                callback(notification);
+            }
+        },
+        dependencies.concat(events.current).concat([callback]),
+    );
+
+    const listen = useCallback(() => {
+        if (listening.current) {
+            return;
+        }
+
+        if (!initialized.current) {
+            result.channel().notification(cb);
+        }
+
+        listening.current = true;
+        initialized.current = true;
+    }, [cb]);
+
+    const stopListening = useCallback(() => {
+        if (!listening.current) {
+            return;
+        }
+
+        listening.current = false;
+    }, [cb]);
+
+    useEffect(() => {
+        listen();
+    }, dependencies.concat(events.current));
+
+    return {
+        ...result,
+        /**
+         * Stop listening for notification events
+         */
+        stopListening,
+        /**
+         * Listen for notification events
+         */
+        listen,
+    };
+};
+
 export const useEchoPresence = <
     TPayload,
     TDriver extends BroadcastDriver = BroadcastDriver,

packages/react/src/index.ts

@@ -2,6 +2,7 @@ export { configureEcho, echo } from "./config/index";
 export {
     useEcho,
     useEchoModel,
+    useEchoNotification,
     useEchoPresence,
     useEchoPublic,
 } from "./hooks/use-echo";

packages/react/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"],