web-dev-qa-db-ja.com

Uncaught InvalidStateError： 'WebSocket'で 'send'の実行に失敗しました：まだCONNECTING状態です

ページが読み込まれると、サーバーへのメッセージをsendして接続を開始しようとしますが、機能しません。このスクリプトブロックは、ファイルの先頭近くにあります。

var connection = new WrapperWS();
connection.ident();
// var autoIdent = window.addEventListener('load', connection.ident(), false);

ほとんどの場合、タイトルにエラーが表示されます。

Uncaught InvalidStateError： 'WebSocket'で 'send'の実行に失敗しました：まだCONNECTING状態です

そこで、以下に示すように、例外をcatchしようとしましたが、今ではInvalidStateErrorが定義されておらず、ReferenceErrorを生成しているようです。

これが私のwebsocket接続のラッパーオブジェクトです。

// Define WrapperWS

function WrapperWS() {
    if ("WebSocket" in window) {
        var ws = new WebSocket("ws://server:8000/");
        var self = this;

        ws.onopen = function () {
            console.log("Opening a connection...");
            window.identified = false;
        };
        ws.onclose = function (evt) {
            console.log("I'm sorry. Bye!");
        };
        ws.onmessage = function (evt) {
            // handle messages here
        };
        ws.onerror = function (evt) {
            console.log("ERR: " + evt.data);
        };

        this.write = function () {
            if (!window.identified) {
                connection.ident();
                console.debug("Wasn't identified earlier. It is now.");
            }
            ws.send(theText.value);
        };

        this.ident = function () {
            var session = "Test";
            try {
                ws.send(session);
            } catch (error) {
                if (error instanceof InvalidStateError) {
                    // possibly still 'CONNECTING'
                    if (ws.readyState !== 1) {
                        var waitSend = setInterval(ws.send(session), 1000);
                    }
                }
            }
        window.identified = true;
            theText.value = "Hello!";
            say.click();
            theText.disabled = false;
        };

    };

}

UbuntuでChromiumを使用してテストしています。

javascriptexception-handlingwebsocket
33
icedwater

ReadyStateが1になるのを待つプロキシ関数を介してメッセージを送信できます。

this.send = function (message, callback) {
    this.waitForConnection(function () {
        ws.send(message);
        if (typeof callback !== 'undefined') {
          callback();
        }
    }, 1000);
};

this.waitForConnection = function (callback, interval) {
    if (ws.readyState === 1) {
        callback();
    } else {
        var that = this;
        // optional: implement backoff for interval here
        setTimeout(function () {
            that.waitForConnection(callback, interval);
        }, interval);
    }
};

次に、this.sendの代わりにws.sendを使用し、後で実行するコードをコールバックに配置します。

this.ident = function () {
    var session = "Test";
    this.send(session, function () {
        window.identified = true;
        theText.value = "Hello!";
        say.click();
        theText.disabled = false;
    });
};

より合理化されたものについては、 promises を調べることができます。

24
Gigablah

1つのwebsocketクライアントオブジェクトを使用し、ランダムなアプリの場所から接続する場合、オブジェクトは接続モード（同時アクセス）になります。

1つのWebsoketのみで交換したい場合は、 promise でクラスを作成し、プロパティに保持します

class Ws {
  get newClientPromise() {
    return new Promise((resolve, reject) => {
      let wsClient = new WebSocket("ws://demos.kaazing.com/echo");
      console.log(wsClient)
      wsClient.onopen = () => {
        console.log("connected");
        resolve(wsClient);
      };
      wsClient.onerror = error => reject(error);
    })
  }
  get clientPromise() {
    if (!this.promise) {
      this.promise = this.newClientPromise
    }
    return this.promise;
  }
}

シングルトンを作成する

window.wsSingleton = new Ws()

アプリの任意の場所でclientPromiseプロパティを使用する

window.wsSingleton.clientPromise
  .then( wsClient =>{wsClient.send('data'); console.log('sended')})
  .catch( error => alert(error) )

http://jsfiddle.net/adqu7q58/11/

1
Ramil Gilfanov