與「ws://localhost:4000/graphql」的 WebSocket 連線失敗：
<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>