'ws://localhost:4000/graphql'에 대한 WebSocket 연결 실패:

Question

이제 클라이언트와 서버 측 모두에서 Websocket Unable to Connect 오류가 발생합니다(아래 이미지 참조). Apollo 클라이언트에 지정된 것 이외의 다른 Websocket 구성을 사용하지 않습니다. 이 때문에 약 이틀 동안 혼란스러웠습니다. 어떤 도움이라도 대단히 감사하겠습니다. 추가 코드가 필요하면 알려주시기 바랍니다.

graphql Apollo 서버에 Vue 애플리케이션 클라이언트가 연결되어 있습니다. apolloclient 구성 코드는 다음과 같습니다.

<code>// Apollo 패키지
    "apollo-boost-upload"에서 import { ApolloClient };
    "apollo-link-ws"에서 { WebSocketLink }를 가져옵니다.
    "apollo-link-http"에서 { HttpLink }를 가져옵니다.
    "apollo-cache-inmemory"에서 { InMemoryCache }를 가져옵니다.
    "아폴로 링크"에서 { 분할 } 가져오기;
    "apollo-utilities"에서 import { getMainDefinition };
    "vue-apollo"에서 VueApollo를 가져옵니다.
    Vue.use(VueApollo);    
    wsLink = 새로운 WebSocketLink({
      uri: "ws://localhost:4000/graphql", // 보안 엔드포인트를 위해 wss를 사용합니다.
      옵션: {
        다시 연결: 사실,
      },
    });
    
    const 링크 = 분할(
      // 작업 유형에 따라 분할
      ({ 쿼리 }) => {
        const 정의 = getMainDefinition(query);
        반품 (
          정의.종류 === "OperationDefinition" &&
          정의.작업 === "구독"
        );
      },
      ws링크,
      http링크
    );
    
    // 캐시 구현
        
    const defaultClient = 새로운 ApolloClient({
      // URI: "http://localhost:4000/graphql",
      링크,
      캐시: 새로운 InMemoryCache(),
      가져오기옵션: {
        자격 증명: "포함",
      },
     
      요청: (작업) => {
        // 로컬 저장소에 토큰이 없으면 추가합니다.
        if (!localStorage.anaceptToken) {
          localStorage.setItem("anaceptToken", "");
        }
        // 작업은 백엔드로 전송되는 인증 헤더에 토큰을 추가합니다.
        Operation.setContext({
          헤더: {
            승인: "Bearer " + localStorage.getItem("anaceptToken"),
          },
        });
      },
      onError: ({ graphQLErrors, networkError }) => {
        if (네트워크 오류) {
          console.log("[networkError]", networkError);
        }
        if (graphQLErrors) {
          for (graphQLErrors의 상수 오류) {
            console.dir(오류);
            console.log(오류);
            만약에 (
              error.name === "인증 오류" ||
              error.message === "jwt가 만료되었습니다"
            ) {
              // 상태에 인증 오류를 설정합니다.
              store.commit("setError", error);
              // 오류를 지우려면 사용자를 로그아웃하세요.
              store.dispatch("signUserOut");
            }
          }
        }
      },
    });</code>

vue 配置文件

const { 정의구성 }= require("@vue/cli-service");
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
module.exports = 정의구성({
  플러그인옵션: {
    아폴로: {
      활성화Mocks: 사실,
      활성화엔진: 사실,
    },
  },
  transpileDependency: ["vuetify"],
  chainWebpack: (config) => {
    config.performance.maxEntrypointSize(400000).maxAssetSize(400000);
    새로운 NodePolyfillPlugin();
  },
});

Answer 1

localhost 4004를 시도해 보면 흥미로울 것입니다. 작동할 것입니다