鍍金池/ 問答/HTML5  HTML/ 如何將websocket的send和onmessage改造成promise?

如何將websocket的send和onmessage改造成promise?

如題,

第一步: ws.send(JSON.stringify(query));
第二部:服務(wù)器會在收到收到參數(shù)后將查詢結(jié)果data返回給前端,前端收到onmessage事件

這個怎么改造成promise的寫法?可以用類似.then(console.log(data))來拿到數(shù)據(jù)?..

回答
編輯回答
孤影
// 每一個實例都只能open一條socket線路,用鎖機制防止重復(fù)open
// 本例中不使用心跳檢測,為了方便,只要close是非主動觸發(fā)且前端能捕捉到的(如瀏覽器主動斷開,服務(wù)器主動斷開),都會進行自動重連
export default class MyWebSocket {
  constructor(url) {
    this.url = url;

    // close來源判斷及后續(xù)操作
    this.closeConfig = {
      resolve: null,
      closing: false
    }
    // promise池
    this.promisePool = {};
  }

  tokenCheck(req, rsp) {
    // 此處根據(jù)自己的數(shù)據(jù)結(jié)構(gòu)進行tokenCheck的判斷,返回一個boolean
  }

  open() {
    return new Promise((resolve, reject) => {
      if (typeof this._websocket === 'undefined') {
        this._websocket = new WebSocket(this.url);
        this._websocke.open = (e) => {
          resolve({e, ws: this});
        };
        this._websocket.onerror = (e) => {
          reject(e);
        }
      }
      this._websocket.onclose = (e) => {
        // 非主動close
        if (!this.closeConfig.closing) {
          console.log('reconnect');
          // 對應(yīng)的重連操作
        }
        // 若手動close,恢復(fù)初始狀態(tài)
        this.closeConfig.closing = false;
      }

      this._websocket.onmessage = (e) => {
        const key = e.content.token;
        const req = this.promisePool[key]
        req.resolve(e);
        delete this.promisePool[key];
      };
    });
  }

  close() {
    this.closeConfig.closing = true;
    this._websocket.close();
  }
  // token包含在content中
  send(name, content) {
    return new Promise((resolve, reject) => {
      this.promisePool[content.token] = {
        content,
        resolve,
        reject,
        name
      };
      this._websocket.send({name, content});
    });
  }
2017年10月21日 11:41
編輯回答
安淺陌
function getMsg() {
    return new Promise((resolve, reject) => {
        ws.onmessage = (e) => {
               resloce(e)
        }
    })
}
getMsg.then(res => {
    // dosomething
})

試試這樣可以么

2018年4月20日 21:14