WebSocket connection to 'ws://localhost:4000/graphql' failed:

Question

I am now getting this Websocket Unable to Connect error on both the client and server side (pictured below). I'm not using any other Websocket configuration other than the one specified in the apollo client. This confused me for about two days. Any help would be greatly appreciated. If you need to see any further code please let me know.

I have a Vue application client connected to the graphql apollo server. The code for apolloclient configuration is given below.

<code>// Apollo packages
    import { ApolloClient } from "apollo-boost-upload";
    import { WebSocketLink } from "apollo-link-ws";
    import { HttpLink } from "apollo-link-http";
    import { InMemoryCache } from "apollo-cache-inmemory";
    import { split } from "apollo-link";
    import { getMainDefinition } from "apollo-utilities";
    import VueApollo from "vue-apollo";
    Vue.use(VueApollo);    
    wsLink = new WebSocketLink({
      uri: "ws://localhost:4000/graphql", // use wss for a secure endpoint
      options: {
        reconnect: true,
      },
    });
    
    const link = split(
      // split based on operation type
      ({ query }) => {
        const definition = getMainDefinition(query);
        return (
          definition.kind === "OperationDefinition" &&
          definition.operation === "subscription"
        );
      },
      wsLink,
      httpLink
    );
    
    // Cache implementation
        
    export const defaultClient = new ApolloClient({
      // uri: "http://localhost:4000/graphql",
      link,
      cache: new InMemoryCache(),
      fetchOptions: {
        credentials: "include",
      },
     
      request: (operation) => {
        // if no token in local storage, add it
        if (!localStorage.anaceptToken) {
          localStorage.setItem("anaceptToken", "");
        }
        // operation adds the token to authorizatrion header, which is sent o backend
        operation.setContext({
          headers: {
            authorization: "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);
            if (
              error.name === "AuthenticationError" ||
              error.message === "jwt expired"
            ) {
              // set auth error in state
              store.commit("setError", error);
              // signout user to clear error
              store.dispatch("signUserOut");
            }
          }
        }
      },
    });</code>

vue 配置文件

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

Answer 1

Interesting try localhost 4004, it should work