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.

// 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"); } } } }, });

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(); }, });