La connexion WebSocket à « ws://localhost:4000/graphql » a échoué :

Question

Je reçois maintenant cette erreur Websocket Impossible de se connecter côté client et côté serveur (comme indiqué dans l'image ci-dessous). Je n'utilise aucune autre configuration Websocket autre que celle spécifiée dans le client Apollo. Cela m'a dérouté pendant environ deux jours. Toute aide serait grandement appréciée. Si vous avez besoin de voir un code supplémentaire, faites-le-moi savoir.

J'ai un client d'application Vue connecté au serveur graphql apollo. Le code de configuration d'apolloclient est donné ci-dessous.

<code>// Packages Apollo
    importer { ApolloClient } depuis "apollo-boost-upload" ;
    importer { WebSocketLink } depuis "apollo-link-ws" ;
    importer { HttpLink } depuis "apollo-link-http" ;
    importer { InMemoryCache } depuis "apollo-cache-inmemory" ;
    importer { split } depuis "apollo-link" ;
    importer {getMainDefinition} depuis "apollo-utilities" ;
    importer VueApollo depuis "vue-apollo" ;
    Vue.use(VueApollo);    
    wsLink = nouveau WebSocketLink({
      uri : "ws://localhost:4000/graphql", // utilise wss pour un point de terminaison sécurisé
      options : {
        reconnecter : vrai,
      },
    });
    
    lien const = divisé (
      // fractionné en fonction du type d'opération
      ({ requête }) => {
        const définition = getMainDefinition(query);
        retour (
          definition.kind === "OperationDefinition" &&
          définition.opération === "abonnement"
        );
      },
      wsLink,
      httpLien
    );
    
    // Implémentation du cache
        
    export const defaultClient = new ApolloClient ({
      // uri : "http://localhost:4000/graphql",
      lien,
      cache : nouveau InMemoryCache(),
      options de récupération : {
        informations d'identification : "inclure",
      },
     
      demande : (opération) => {
        // s'il n'y a pas de jeton dans le stockage local, ajoutez-le
        si (!localStorage.anaceptToken) {
          localStorage.setItem("anaceptToken", "");
        }
        // L'opération ajoute le jeton à l'en-tête d'autorisation, qui est envoyé au backend
        opération.setContext({
          en-têtes : {
            autorisation : "Bearer " + localStorage.getItem("anaceptToken"),
          },
        });
      },
      onError : ({ graphQLErrors, networkError }) => {
        si (erreur réseau) {
          console.log("[Erreurréseau]",Erreurréseau);
        }
        si (graphQLErrors) {
          pour (erreur const de graphQLErrors) {
            console.dir (erreur);
            console.log(erreur);
            si (
              error.name === "AuthenticationError" ||
              error.message === "jwt a expiré"
            ) {
              // définit l'erreur d'authentification dans l'état
              store.commit("setError", erreur);
              // déconnexion de l'utilisateur pour effacer l'erreur
              magasin.dispatch("signUserOut");
            }
          }
        }
      },
    });</code>

vue 配置文件

const { définirConfig }= require("@vue/cli-service");
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
module.exports = définirConfig({
  Options du plugin : {
    Apollon : {
      activerMocks : vrai,
      activerEngine : vrai,
    },
  },
  transpileDépendances : ["vuetify"],
  chainWebpack : (config) => {
    config.performance.maxEntrypointSize(400000).maxAssetSize(400000);
    nouveau NodePolyfillPlugin();
  },
});

Answer 1

Intéressant, essayez localhost 4004, ça devrait fonctionner