javascript django graphql graphql-subscriptions

How to implement only client to graphql subscriptions in a website with only front code?

I am coding a only front end site using Django. to query data to a DataBase I use AJAX to my Django and Django requests a third party GraphQL. so far all works perfect. But now I need to alert the users on updates to a table. the third party has setup subscriptions. I know is working because I made a view with the play ground, execute the subscription and on updates, the playground shows the update.

So how can I implemente those subscriptions to my site so on updates I can do console.log(subscriptionUpdateMsg) ? I have been looking for about 3 days and I have found many docs whith info, but they require node.js or other servers, the problem is that I already have all on Django server as I was required. and some other sites works with but I get error failed: Error during WebSocket handshake: Unexpected response code: 500

This is what the code creates, and is working: screenshot here

Here is the working code with the playgroun in my site:

<html>
    <head>
        <style>
            html,
            body {
                height: 100%;
                margin: 0;
                overflow: hidden;
                width: 100%;
            }
        </style>
        <link
            href="//cdn.jsdelivr.net/npm/[email protected]/graphiql.css"
            rel="stylesheet"
        />
        <script src="//cdn.jsdelivr.net/react/15.4.2/react.min.js"></script>
        <script src="//cdn.jsdelivr.net/react/15.4.2/react-dom.min.js"></script>
        <script src="//cdn.jsdelivr.net/npm/[email protected]/graphiql.min.js"></script>
        <script src="//cdn.jsdelivr.net/npm/[email protected]/browser/client.js"></script>
    </head>

    <body>
        <script>
            // Setup subscription client.
            const GRAPHQL_ENDPOINT =
                (location.protocol === "https" ? "wss" : "ws") +
                "://" +
                //location.host +
                "apiclients.develop.ThirdPartyWebSite.com:8009/graphql/"
            let subClient = new window.SubscriptionsTransportWs.SubscriptionClient(
                GRAPHQL_ENDPOINT,
                {reconnect: true},
            )
            subFetcher = subClient.request.bind(subClient)

            // Render <GraphiQL /> into the body.
            ReactDOM.render(
                React.createElement(GraphiQL, {
                    fetcher: subFetcher, //graphQLFetcher
                }),
                document.body,
            )
        </script>
    </body>
</html>

Solution

Since I could not find any tutorials or full examples I made hours of test on the browser console and now I see that is easy:

1: add the javascript src="//cdn.jsdelivr.net/npm/[email protected]/browser/client.js

2: with only this javascript we are ready to subscribe

            const GRAPHQL_ENDPOINT =
                (location.protocol === "https" ? "wss" : "ws") +
                "://apiclients.develop.ThirdPartyWebSite.com:8009/graphql/"
            let subClient = new window.SubscriptionsTransportWs.SubscriptionClient(
                GRAPHQL_ENDPOINT,
                {reconnect: true},
            )

with the next line:

subClient.subscribe({query:'subscription{onNewReservation(group:"clients"){reservationId}}'}, function(error,data){console.log(data); })

☺