<p>I am now getting this <em>Websocket Unable to Connect</em> 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. </p> <p>I have a <strong>Vue application client</strong> connected to the <strong>graphql apollo server</strong>. The code for apolloclient configuration is given below.</p> <p> <pre class="snippet-code-js lang-js prettyprint-override"><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></pre> </p> <p>vue 配置文件</p> <pre class="brush:php;toolbar:false;">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(); }, });</pre>