与'ws://localhost:4000/graphql”的 WebSocket 连接失败：

Question

<p>我现在在客户端和服务器端都收到此 <em>Websocket 无法连接</em> 错误（如下图所示）。除了 apollo 客户端中指定的配置之外，我没有使用任何其他 Websocket 配置。这让我困惑了大约两天。任何帮助，将不胜感激。如果您需要查看任何进一步的代码，请告诉我。</p> <p>我有一个连接到 <strong>graphql apollo 服务器</strong>的 <strong>Vue 应用客户端</strong>。下面给出apolloclient配置的代码。</p> <p>

// Apollo 包
    从“apollo-boost-upload”导入{ ApolloClient }；
    从“apollo-link-ws”导入{WebSocketLink}；
    从“apollo-link-http”导入 { HttpLink }；
    从“apollo-cache-inmemory”导入{InMemoryCache}；
    从“apollo-link”导入{ split }；
    从“apollo-utilities”导入{ getMainDefinition }；
    从“vue-apollo”导入VueApollo；
    Vue.use(VueApollo);    
    wsLink = 新的 WebSocketLink({
      uri: "ws://localhost:4000/graphql", // 使用 wss 作为安全端点
      选项： {
        重新连接：正确，
      },
    });
    
    常量链接 = 分割(
      // 根据操作类型进行分割
      ({ 查询 }) => {
        const 定义 = getMainDefinition(query);
        返回 （
          Definition.kind ===“操作定义”&&
          定义.操作===“订阅”
        ）；
      },
      wsLink,
      http链接
    ）；
    
    // 缓存实现
        
    导出 const defaultClient = new ApolloClient({
      // uri: "http://localhost:4000/graphql",
      关联，
      缓存：new InMemoryCache(),
      获取选项：{
        凭据：“包括”，
      },
     
      请求：（操作）=> {
        // 如果本地存储中没有token，则添加它
        if (!localStorage.anaceptToken) {
          localStorage.setItem("anaceptToken", "");
        }
        // 操作将令牌添加到授权标头，该标头发送到后端
        操作.setContext({
          标题：{
            授权：“Bearer” + localStorage.getItem(“anaceptToken”),
          },
        });
      },
      onError: ({ graphQLErrors, networkError }) =>; {
        如果（网络错误）{
          console.log("[网络错误]", 网络错误);
        }
        如果（graphQLErrors）{
          for (graphQLErrors 的常量错误) {
            控制台.dir(错误);
            控制台.log(错误);
            如果 （
              error.name ===“身份验证错误”||
              error.message ===“jwt 已过期”
            ）{
              // 在状态中设置身份验证错误
              store.commit("setError", 错误);
              // 注销用户以清除错误
              store.dispatch(“signUserOut”);
            }
          }
        }
      },
    });</code></pre>


</p>
vue 配置文件
const { DefineConfig }= require(“@vue/cli-service”);
const NodePolyfillPlugin = require(“node-polyfill-webpack-plugin”);
module.exports = DefineConfig({
  插件选项：{
    阿波罗：{
      启用Mocks：真，
      启用引擎：真，
    },
  },
  transpileDependency: [“vuetify”],
  chainWebpack：（配置）=> {
    config.performance.maxEntrypointSize(400000).maxAssetSize(400000);
    新的 NodePolyfillPlugin();
  },
});</pre>            

Answer 1

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