Как реализовать только клиентские подписки на graphql на сайте с помощью только front-кода?

Я создаю сайт на основе Django. Для запроса данных к базе данных я использую AJAX к Django, а Django запрашивает сторонний GraphQL. пока все работает идеально. Но теперь мне нужно оповещать пользователей об обновлениях в таблице. Сторонний сайт настроил подписки. Я знаю, что это работает, потому что я сделал представление с площадкой, выполняю подписку и при обновлении, площадка показывает обновление.

Итак, как я могу внедрить эти подписки на мой сайт, чтобы при обновлении я мог сделать console.log(subscriptionUpdateMsg)? Я искал около 3 дней и нашел много документов с информацией, но они требуют node.js или других серверов, проблема в том, что у меня уже есть все на сервере Django, как и требовалось. и некоторые другие сайты работают, но я получаю ошибку failed: Error during WebSocket handshake: Unexpected response code: 500

Вот что создает код, и он работает: скриншот здесь

Вот рабочий код с плейграундом на моем сайте:

<html>
    <head>
        <style>
            html,
            body {
                height: 100%;
                margin: 0;
                overflow: hidden;
                width: 100%;
            }
        </style>
        <link
            href="//cdn.jsdelivr.net/npm/graphiql@0.11.11/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/graphiql@0.11.11/graphiql.min.js"></script>
        <script src="//cdn.jsdelivr.net/npm/graphql-transport-ws@0.8.3/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>

Поскольку я не смог найти ни одного руководства или полного примера, я провел многочасовой тест на консоли браузера, и теперь я вижу, что это просто:

1: добавьте javascript src="//cdn.jsdelivr.net/npm/graphql-transport-ws@0.8.3/browser/client.js

2: только с этим javascript мы готовы подписаться

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

со следующей строкой:

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

☺

Вернуться на верх