<p>現在、クライアント側とサーバー側の両方でこの <em>Websocket に接続できません</em> エラーが発生しています (下の図)。 apollo クライアントで指定されたもの以外の Websocket 設定は使用していません。これで2日間ほど私は混乱しました。ご協力をいただければ幸いです。さらにコードを確認する必要がある場合は、お知らせください。 </p> <p>Vue アプリケーション クライアントを graphql apollo サーバーに接続しています。 apolloclient 構成のコードを以下に示します。</p> <p> <pre class="snippet-code-js lang-js prettyprint-override"><code>// Apollo パッケージ 「apollo-boost-upload」から { ApolloClient } をインポートします。 「apollo-link-ws」から { WebSocketLink } をインポートします。 「apollo-link-http」から { HttpLink } をインポートします。 import { InMemoryCache } from "apollo-cache-inmemory"; 「apollo-link」からインポート { 分割 }; 「apollo-utilities」からインポート { getMainDefinition }; 「vue-apollo」から VueApollo をインポートします。 Vue.use(VueApollo); wsLink = 新しい WebSocketLink({ uri: "ws://localhost:4000/graphql", // 安全なエンドポイントには wss を使用します オプション: { 再接続: true、 }、 }); const リンク = 分割( // 操作タイプに基づいて分割 ({ クエリ }) => { const 定義 = getMainDefinition(クエリ); 戻る （ Definition.kind === "OperationDefinition" && 定義.操作 === "サブスクリプション" ); }、 wsリンク、 httpリンク ); // キャッシュの実装 エクスポート const defaultClient = new ApolloClient({ // uri: "http://localhost:4000/graphql", リンク、 キャッシュ: 新しい InMemoryCache()、 fetchOptions: { 資格情報: "含む", }、 リクエスト: (操作) => { // ローカル ストレージにトークンがない場合は追加します if (!localStorage.anaceptToken) { localStorage.setItem("anaceptToken", ""); } // オペレーションによりトークンが authorizatriion ヘッダーに追加され、バックエンドに送信されます 操作.setContext({ ヘッダー: { 認可: "ベアラー" localStorage.getItem("anaceptToken"), }、 }); }、 onError: ({graphQLErrors, networkError }) => { if (ネットワークエラー) { console.log("[ネットワークエラー]", ネットワークエラー); } if (graphQLErrors) { for (graphQLErrors の定数エラー) { console.dir(エラー); コンソール.ログ(エラー); もし （ error.name === "認証エラー" || error.message === "jwt の有効期限が切れました" ) { // 認証エラーを状態に設定します store.commit("setError", エラー); // エラーをクリアするためにユーザーをサインアウトします 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({ プラグインオプション: { アポロ: { イネーブルモック: true、 イネーブルエンジン: true、 }、 }、 transpileDependency: ["vuetify"], chainWebpack: (config) => { config.パフォーマンス.maxEntrypointSize(400000).maxAssetSize(400000); 新しい NodePolyfillPlugin(); }、 });</pre>