Sambungan WebSocket ke 'ws://localhost:4000/graphql' gagal:

Question

Saya kini mendapat ralat Websocket Unable to Connect pada kedua-dua bahagian klien dan pelayan (seperti yang ditunjukkan dalam imej di bawah). Saya tidak menggunakan sebarang konfigurasi Websocket lain selain daripada yang dinyatakan dalam klien apollo. Ini mengelirukan saya selama kira-kira dua hari. Sebarang bantuan amatlah dihargai. Jika anda perlu melihat sebarang kod lanjut sila beritahu saya.

Saya mempunyai pelanggan aplikasi Vue disambungkan ke pelayan graphql apollo. Kod untuk konfigurasi apolloclient diberikan di bawah.

<code>// pakej Apollo
    import { ApolloClient } daripada "apollo-boost-upload";
    import { WebSocketLink } daripada "apollo-link-ws";
    import { HttpLink } daripada "apollo-link-http";
    import { InMemoryCache } daripada "apollo-cache-inmemory";
    import { split } daripada "apollo-link";
    import { getMainDefinition } daripada "apollo-utiliti";
    import VueApollo daripada "vue-apollo";
    Vue.use(VueApollo);    
    wsLink = WebSocketLink baharu({
      uri: "ws://localhost:4000/graphql", // gunakan wss untuk titik akhir yang selamat
      pilihan: {
        sambung semula: benar,
      },
    });
    
    pautan const = split(
      // berpecah berdasarkan jenis operasi
      ({ pertanyaan }) => {
        definisi const = getMainDefinition(query);
        kembali (
          definition.kind === "OperationDefinition" &&
          definition.operation === "langganan"
        );
      },
      wsLink,
      httpLink
    );
    
    // Pelaksanaan cache
        
    export const defaultClient = ApolloClient baru({
      // uri: "http://localhost:4000/graphql",
      pautan,
      cache: InMemoryCache baharu(),
      fetchOptions: {
        kelayakan: "termasuk",
      },
     
      permintaan: (operasi) => {
        // jika tiada token dalam storan tempatan, tambahkannya
        jika (!localStorage.anaceptToken) {
          localStorage.setItem("anaceptToken", "");
        }
        // operasi menambah token pada pengepala authorizatrion, yang dihantar ke hujung belakang
        operation.setContext({
          tajuk: {
            kebenaran: "Pembawa " + localStorage.getItem("anaceptToken"),
          },
        });
      },
      onError: ({ graphQLErrors, networkError }) => {
        if (networkError) {
          console.log("[networkError]", networkError);
        }
        jika (grafQLErrors) {
          for (const error of graphQLErrors) {
            console.dir(error);
            console.log(error);
            jika (
              error.name === "AuthenticationError" ||
              error.message === "jwt tamat tempoh"
            ) {
              // tetapkan ralat pengesahan dalam keadaan
              store.commit("setError", error);
              // pengguna log keluar untuk mengosongkan ralat
              store.dispatch("signUserOut");
            }
          }
        }
      },
    });</code>

vue 配置文件

const { defineConfig }= memerlukan("@vue/cli-service");
const NodePolyfillPlugin = memerlukan("node-polyfill-webpack-plugin");
module.exports = defineConfig({
  Pilihan pemalam: {
    apollo: {
      enableMocks: benar,
      enableEngine: benar,
    },
  },
  transpileDependencies: ["vuetify"],
  chainWebpack: (config) => {
    config.performance.maxEntrypointSize(400000).maxAssetSize(400000);
    new NodePolyfillPlugin();
  },
});

Answer 1

Cuba localhost 4004 yang menarik, pasti berkesan