「ws://localhost:4000/graphql」への WebSocket 接続が失敗しました:
<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>
