Apollo Lighthouse Subscription - Laravel Echo Server

echo_client.js

import {ApolloClient, InMemoryCache, HttpLink} from "@apollo/client";
import gql from "graphql-tag";
import Echo from "laravel-echo";
import {createLighthouseSubscriptionLink} from "@thekonz/apollo-lighthouse-subscription-link";
import {ApolloLink} from "apollo-link";

window.io = require("socket.io-client");

const echoClient = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname,
    path: '/socket.io',
    transports: ['websocket'],
    auth: {
        headers: {
            Accept: "application/json",
            Cookie: "XDEBUG_SESSION=PHPSTORM"
        },
    }
});

let id_token = "";
const httpLink = new HttpLink({
    uri: "/graphql",
    headers: {Authorization: 'Bearer ' + id_token}
});

const client = new ApolloClient({
    link: ApolloLink.from([
        createLighthouseSubscriptionLink(echoClient),
        httpLink,
    ]),
    cache: new InMemoryCache(),
});

const subscriber = client.subscribe({
    query: gql`
        subscription {
            balanceUpdated {
                total_coins
            }
        }
    `,
}).subscribe(({balanceUpdated}) => {
    console.log(balanceUpdated);
});

// stop listening to events
// subscriber.unsubscribe()

// package.json
// "@apollo/client": "^3.4.17",
// "@thekonz/apollo-lighthouse-subscription-link": "^1.2.3", 
// "apollo-link": "^1.2.14",
// "laravel-echo": "^1.11.3",
// "react": "^17.0.2",
// "socket.io-client": "^2.4.0"