Vue.js - 在 Websocket 上使用承诺？

Posted 2023-02-16

【中文标题】Vue.js - 在 Websocket 上使用承诺？

【英文标题】：Vue.js - Using Promises on Websocket?

【发布时间】：2020-02-20 20:24:18

【问题描述】：

我在使用带有 vue 的 websocket 时遇到了一个问题，因为我希望有一个变量来保持最后的就绪状态。 enter image description here

在第一行中，readyState 是 0，但在序列中 readyState 是 3。我怎样才能让 readyState 等于 3？

  const params = Object.entries(
  user: `$this.username@$this.$props.uid`,
  passwd: encodeURIComponent(this.passwd),
  cols: this.xterm.cols,
  rows: this.xterm.rows
)
  .map(([k, v]) => 
    return `$k=$v`;
  )
  .join("&");

this.ws = await new WebSocket(`ws://$location.host/ws/ssh?$params`);

// stateConection = true
// eslint-disable-next-line no-console
console.log(this.ws);

【问题讨论】：

使用WebSocket最简单的方法是使用vue-websocketnpmjs.com/package/vue-websocket等模块

await 用于等待一个正在解决的承诺。 new AnythingThatIsntAPromise 不会返回你可以 await 的 Promise - 话虽如此，this.ws 将是 WebSocket 的一个实例，所以当你的代码添加一个无意义的 await 时，代码仍然会像 await 不存在一样工作

【参考方案1】：

您可以创建一个Promise，它在open 上进行解析，并在error 或close 上拒绝。

const ws = new WebSocket(`ws://$location.host/ws/ssh?$params`);
const ready = new Promise((resolve, reject) => 
    ws.onopen = resolve;
    ws.onerror = reject;
    ws.onclose = reject;
);
await ready;

这将等待直到 websocket 打开，或者如果 websockets 关闭有或没有错误，则抛出错误。