WebSocket-Verbindung zu „ws://localhost:4000/graphql' ist fehlgeschlagen:

Question

Ich erhalte jetzt sowohl auf der Client- als auch auf der Serverseite den Fehler Websocket Unable to Connect (wie im Bild unten gezeigt). Ich verwende keine andere Websocket-Konfiguration als die im Apollo-Client angegebene. Das verwirrte mich etwa zwei Tage lang. Jede Hilfe wäre sehr dankbar. Wenn Sie weiteren Code benötigen, lassen Sie es mich bitte wissen.

Ich habe einen Vue-Anwendungsclient, der mit dem graphql Apollo-Server verbunden ist. Der Code für die Apolloclient-Konfiguration ist unten angegeben.

<code>// Apollo-Pakete
    import { ApolloClient } aus „apollo-boost-upload“;
    import { WebSocketLink } from „apollo-link-ws“;
    import { HttpLink } von „apollo-link-http“;
    import { InMemoryCache } aus „apollo-cache-inmemory“;
    import { split } from „apollo-link“;
    import { getMainDefinition } from „apollo-utilities“;
    VueApollo aus „vue-apollo“ importieren;
    Vue.use(VueApollo);    
    wsLink = neuer WebSocketLink({
      uri: „ws://localhost:4000/graphql“, // wss für einen sicheren Endpunkt verwenden
      Optionen: {
        erneut verbinden: wahr,
      },
    });
    
    const link = split(
      // Aufteilung basierend auf dem Operationstyp
      ({ query }) => {
        const definition = getMainDefinition(query);
        zurückkehren (
          definition.kind === "OperationDefinition" &&
          definition.operation === "Abonnement"
        );
      },
      wsLink,
      httpLink
    );
    
    // Cache-Implementierung
        
    export const defaultClient = new ApolloClient({
      // uri: „http://localhost:4000/graphql“,
      Verknüpfung,
      Cache: neues InMemoryCache(),
      fetchOptions: {
        Anmeldeinformationen: „include“,
      },
     
      Anfrage: (Operation) => {
        // wenn kein Token im lokalen Speicher vorhanden ist, füge es hinzu
        if (!localStorage.anaceptToken) {
          localStorage.setItem("anaceptToken", "");
        }
        // Operation fügt das Token zum Autorisierungsheader hinzu, der an das Backend gesendet wird
        operation.setContext({
          Überschriften: {
            Autorisierung: „Bearer“ + localStorage.getItem(“anaceptToken“),
          },
        });
      },
      onError: ({ graphQLErrors, networkError }) => {
        if (networkError) {
          console.log("[networkError]", networkError);
        }
        if (graphQLErrors) {
          for (const error of graphQLErrors) {
            console.dir(error);
            console.log(error);
            Wenn (
              error.name === „AuthenticationError“ ||
              error.message === „jwt abgelaufen“
            ) {
              // Authentifizierungsfehler im Status festlegen
              store.commit("setError", Fehler);
              // Benutzer abmelden, um Fehler zu löschen
              store.dispatch("signUserOut");
            }
          }
        }
      },
    });</code>

vue 配置文件

const { defineConfig }= require("@vue/cli-service");
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
module.exports = defineConfig({
  PluginOptions: {
    Apollo: {
      enableMocks: wahr,
      enableEngine: true,
    },
  },
  transpileDependencies: ["vuetify"],
  chainWebpack: (config) => {
    config.performance.maxEntrypointSize(400000).maxAssetSize(400000);
    neues NodePolyfillPlugin();
  },
});

Answer 1

有趣的尝试 localhost 4004，它应该可以工作