Estoy codificando un único sitio front-end usando Django. para consultar datos en una base de datos, uso AJAX para mi Django y Django solicita un GraphQL de terceros. hasta ahora todo funciona perfecto. Pero ahora necesito alertar a los usuarios sobre las actualizaciones de una tabla. el tercero tiene suscripciones de configuración. Sé que funciona porque hice una vista con el patio de recreo, ejecuté la suscripción y en las actualizaciones, el patio de recreo muestra la actualización.
Entonces, ¿cómo puedo implementar esas suscripciones a mi sitio para que en las actualizaciones pueda hacer console.log(subscriptionUpdateMsg) ? Llevo unos 3 días buscando y he encontrado muchos documentos con información, pero requieren node.js u otros servidores, el problema es que ya tengo todo en el servidor Django como me lo requerían. y algunos otros sitios funcionan, pero recibo un error failed: Error during WebSocket handshake: Unexpected response code: 500
Esto es lo que crea el código, y está funcionando: captura de pantalla aquí
Aquí está el código de trabajo con el playgroun en mi sitio:
<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>Como no pude encontrar tutoriales o ejemplos completos, hice horas de prueba en la consola del navegador y ahora veo que es fácil:
1: agregue javascript src="//cdn.jsdelivr.net/npm/graphql-transport-ws@0.8.3/browser/client.js
2: con solo este javascript estamos listos para suscribirnos
const GRAPHQL_ENDPOINT = (location.protocol === "https" ? "wss" : "ws") + "://apiclients.develop.ThirdPartyWebSite.com:8009/graphql/" let subClient = new window.SubscriptionsTransportWs.SubscriptionClient( GRAPHQL_ENDPOINT, {reconnect: true}, )con la siguiente línea:
subClient.subscribe({query:'subscription{onNewReservation(group:"clients"){reservationId}}'}, function(error,data){console.log(data); })
☺