未捕获的 InvalidStateError：无法在“WebSocket”上执行“发送”：仍处于 CONNECTING 状态答案

【问题标题】：Uncaught InvalidStateError: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state未捕获的 InvalidStateError：无法在“WebSocket”上执行“发送”：仍处于 CONNECTING 状态
【发布时间】：2014-05-27 21:37:09
【问题描述】：

当我的页面加载时，我尝试向服务器发送send 消息以启动连接，但它不起作用。这个脚本块在我的文件顶部附近：

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

大多数时候，我看到标题中的错误：

未捕获的 InvalidStateError：无法在“WebSocket”上执行“发送”：仍处于 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 进行测试。

【问题讨论】：

Re "InvalidStateError is not defined 会产生ReferenceError"，相信你可以查if (error.name === "InvalidStateError") {

标签： javascript exception-handling websocket

【解决方案1】：

您可以通过等待 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。

【讨论】：

我猜，当你在setTimeout 中调用它时，你忘了在that.waitForConnection(callback, interval) 中提供interval 参数。
你先生很棒:)

【解决方案2】：

如果您使用一个 websocket 客户端对象并从随机应用程序位置连接，则对象可以处于连接模式（并发访问）。

如果您只想通过一个 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/

【讨论】：

它仍然在下面一行显示关闭状态错误 wsClient =>{wsClient.send('data'); console.log('send')})

【解决方案3】：

出现此错误是因为您在 WebSocket 连接建立之前发送消息。

你可以简单地解决它：

conn.onopen = () => conn.send("Message");

这个onopen函数在发送你的消息之前等待你的WebSocket连接建立。

【讨论】：

您可能需要 json.stringify 发送的消息，但这对我有用：chatSocket.onopen = () => chatSocket.send(JSON.stringify({'message': 'Welcome to the chat. Type below to begin a conversation...' }));
根据我的经验，这还不够。有时，即使使用您建议的代码，我仍然会收到海报的原始错误消息。
这是客户端还是服务器端？

【解决方案4】：

使用异步函数

我有另一个想法，在连接套接字时解决一个承诺：

await waitForConnection();
ws.send(data);

实现

这个技巧是使用解析器数组实现的。

let ws = new WebSocket(url);

let connection_resolvers = [];
let waitForConnection = () => {
    return new Promise((resolve, reject) => {
        if (ws.readyState === WebSocket.OPEN) {
            resolve();
        }
        else {
            connection_resolvers.push({resolve, reject});
        }
    });
}

ws.addEventListener('open', () => {
    connection_resolvers.forEach(r => r.resolve())
});

【讨论】：