未捕获的无效状态错误:无法在“WebSocket”上执行“发送”:仍处于“正在连接”状态

您可以通过等待 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;
    });
};

对于更精简的东西，你可以看看承诺。

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

您可以通过简单地执行此操作来解决它：

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

此 onopen 函数在发送消息之前等待您的 WebSocket 连接建立。

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

如果您只想通过一个网络进行交换，那么创建具有承诺的类并将其保留在属性中

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： 检查连接

您可以在连接套接字时解析承诺：

async function send(data) {
    await checkConnection();
    ws.send(data);
}

实现

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

let ws = new WebSocket(url);
let connection_resolvers = [];
let checkConnection = () => {
    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())
});

方法 2：等待连接

您可以在套接字未连接时解析承诺：

const MAX_RETRIES = 4;
async function send(data, retries = 0) {
    try {
        ws.send(data);
    } 
    catch (error) {
        if (retries < MAX_RETRIES error.name === "InvalidStateError") {
            await waitForConnection();
            send(data, retries + 1);
        }
        else {
            throw error;
        }
    }
}

实现

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

let ws = new WebSocket(url);
let connection_resolvers = [];
let waitForConnection = () => {
    return new Promise((resolve, reject) => {
        connection_resolvers.push({resolve, reject});
    });
}
ws.addEventListener('open', () => {
    connection_resolvers.forEach(r => r.resolve())
});

我的看法是第二种方法有一点不错的性能！

可以将函数和readyState与setTimeout一起使用。

function openSocket()
{
    webSocket = new WebSocket("");
}
function sendData()
{
    if(webSocket.readyState)
    {
        webSocket.send(JSON.stringify(
        {
            "event"     : "", 
            "message"   : ""
        }));
    }
    else
    {
        setTimeout(sendData, 1000);
    }
}
function eventHandler()
{
    webSocket.onmessage = function(e)
    {
        data  = JSON.parse(e.data);
        event = data.event;
        switch (event)
        {...}
    }
}
openSocket();
sendData();
eventHandler();