如何等待 WebSocket 的 readyState 改变

Question

我正在尝试实现一个带有轮询后备的 WebSocket。如果 WebSocket 连接成功，readyState 变为 1，但如果失败，readyState 为 3，我应该开始轮询。

我尝试过这样的事情：

var socket = new WebSocket(url);
socket.onmessage = onmsg;
while (socket.readyState == 0)
{
}
if (socket.readyState != 1)
{
    // fall back to polling
    setInterval(poll, interval);
}

我期待socket.readyState 异步更新，并允许我立即阅读。但是，当我运行它时，我的浏览器冻结了（我在放弃之前将其打开了大约半分钟）。

我以为可能有 onreadyStateChanged 事件，但我在 MDN 参考资料中没有看到。

我应该如何实施？显然，一个空循环是行不通的，并且没有任何事件。

Answer 1

您的 while 循环可能会锁定您的线程。尝试使用：

setTimeout(function(){
    if(socket.readyState === 0) {
        //do nothing
    } else if (socket.readyState !=1) {
        //fallback
        setInterval(poll, interval);
    }
}, 50);

Answer 2

就像定义onmessage 处理程序一样，您也可以定义onerror 处理程序。连接失败时会调用这个。

var socket = new WebSocket(url);
socket.onmessage = onmsg;
socket.onerror = function(error) {
    // connection failed - try polling
}

Answer 3

这里有一个更详细的解释。首先，检查特定的浏览器 API，因为并非所有浏览器都使用最新的 RFC。您可以咨询

您不想运行循环来不断检查就绪状态，这是您不需要的额外开销。更好的方法是了解与就绪状态更改相关的所有事件，然后将它们适当地连接起来。它们如下：

onclose 当 WebSocket 连接的 readyState 变为 CLOSED 时调用的事件监听器。侦听器收到一个名为“close”的 CloseEvent。

onerror 发生错误时调用的事件监听器。这是一个名为“error”的简单事件。

onmessage 从服务器接收到消息时要调用的事件侦听器。侦听器收到一个名为“消息”的 MessageEvent。

onopen WebSocket 连接的 readyState 变为 OPEN 时调用的事件监听器；这表明连接已准备好发送和接收数据。该事件是一个名称为“open”的简单事件。

JS 完全是事件驱动的，因此您只需连接所有这些事件并检查就绪状态，这样您就可以相应地从 WS 切换到轮询。

我建议您查看 Mozilla 参考，它比 RFC 文档更易于阅读，并且可以很好地概述 API 及其工作原理 (link)。

如果失败，请不要忘记进行回调以进行重试并进行轮询，直到触发成功重新连接的回调。

Answer 4

关注http://dev.w3.org/html5/websockets/

搜索“事件处理程序”并找到表。

打开 -> 打开
onmessage -> 消息
错误->错误
onclose ->关闭

function update(e){ /*Do Something*/};
var ws = new WebSocket("ws://localhost:9999/");

ws.onmessage = update;

Answer 5

这很简单，而且效果很好...您可以添加关于最大时间的条件，或尝试次数以使其更健壮...

function sendMessage(msg){
    // Wait until the state of the socket is not ready and send the message when it is...
    waitForSocketConnection(ws, function(){
        console.log("message sent!!!");
        ws.send(msg);
    });
}

// Make the function wait until the connection is made...
function waitForSocketConnection(socket, callback){
    setTimeout(
        function () {
            if (socket.readyState === 1) {
                console.log("Connection is made")
                if (callback != null){
                    callback();
                }
            } else {
                console.log("wait for connection...")
                waitForSocketConnection(socket, callback);
            }

        }, 5); // wait 5 milisecond for the connection...
}

Answer 6

在我的用例中，如果连接失败，我想在屏幕上显示错误。

let $connectionError = document.getElementById("connection-error");

setTimeout( () => {
  if (ws.readyState !== 1) {
    $connectionError.classList.add( "show" );
  }
}, 100 );  // ms

请注意，在 Safari (9.1.2) 中，不会触发 error 事件 - 否则我会将其放在错误处理程序中。

Answer 7

我根本没有使用池。相反，我使用排队。 首先我创建一个新的发送函数和一个队列：

var msgs = []
function send (msg) {
  if (ws.readyState !== 1) {
    msgs.push(msg)
  } else {
    ws.send(msg)
  }
}

那么我需要在第一次建立连接时读取和发送：

function my_element_click () {
  if (ws == null){
    ws = new WebSocket(websocket_url)
    ws.onopen = function () {
      while (msgs.length > 0) {
        ws.send(msgs.pop())
      }
    }
    ws.onerror = function(error) {
      // do sth on error
    }
  } 
  msg = {type: 'mymessage', data: my_element.value}
  send(JSON.stringify(msg))
}

此示例中的 WebSocket 连接仅在第一次单击时创建。通常，在第二个消息开始直接发送。

Answer 8

如果您使用async/await 并且只想等到连接可用，我建议您使用此功能：

async connection (socket, timeout = 10000) {
  const isOpened = () => (socket.readyState === WebSocket.OPEN)

  if (socket.readyState !== WebSocket.CONNECTING) {
    return isOpened()
  }
  else {
    const intrasleep = 100
    const ttl = timeout / intrasleep // time to loop
    let loop = 0
    while (socket.readyState === WebSocket.CONNECTING && loop < ttl) {
      await new Promise(resolve => setTimeout(resolve, intrasleep))
      loop++
    }
    return isOpened()
  }
}

用法（在async函数中）：

const websocket = new WebSocket('...')
const opened = await connection(websocket)
if (opened) {
  websocket.send('hello')
}
else {
  console.log("the socket is closed OR couldn't have the socket in time, program crashed");
  return
}

Answer 9

tl;dr

一个简单的proxy 包装器，用于将state 事件添加到WebSocket，当其readyState 更改时将发出该事件：

const WebSocketProxy = new Proxy(WebSocket, {
    construct: function(target, args) {
        // create WebSocket instance
        const instance = new target(...args);

        //internal function to dispatch 'state' event when readyState changed
        function _dispatchStateChangedEvent() {
            instance.dispatchEvent(new Event('state'));
            if (instance.onstate && typeof instance.onstate === 'function') {
                instance.onstate();
            }
        }

        //dispatch event immediately after websocket was initiated
        //obviously it will be CONNECTING event
        setTimeout(function () {
            _dispatchStateChangedEvent();
        }, 0);

        // WebSocket "onopen" handler
        const openHandler = () => {
            _dispatchStateChangedEvent();
        };

        // WebSocket "onclose" handler
        const closeHandler = () => {
            _dispatchStateChangedEvent();
            instance.removeEventListener('open', openHandler);
            instance.removeEventListener('close', closeHandler);
        };

        // add event listeners
        instance.addEventListener('open', openHandler);
        instance.addEventListener('close', closeHandler);

        return instance;
    }
});

长解释：

您可以使用Proxy 对象来监控内部WebSocket 状态。

这是一篇很好的文章，它解释了如何做到这一点Debugging WebSockets using JS Proxy Object

下面是上面文章中的代码 sn-p 示例，以防该站点将来无法使用：

// proxy the window.WebSocket object
var WebSocketProxy = new Proxy(window.WebSocket, {  
  construct: function(target, args) {
    // create WebSocket instance
    const instance = new target(...args);

    // WebSocket "onopen" handler
    const openHandler = (event) => {
      console.log('Open', event);
    };

    // WebSocket "onmessage" handler
    const messageHandler = (event) => {
      console.log('Message', event);
    };

    // WebSocket "onclose" handler
    const closeHandler = (event) => {
      console.log('Close', event);
      // remove event listeners
      instance.removeEventListener('open', openHandler);
      instance.removeEventListener('message', messageHandler);
      instance.removeEventListener('close', closeHandler);
    };  

    // add event listeners
    instance.addEventListener('open', openHandler);
    instance.addEventListener('message', messageHandler);
    instance.addEventListener('close', closeHandler);

    // proxy the WebSocket.send() function
    const sendProxy = new Proxy(instance.send, {
      apply: function(target, thisArg, args) {
        console.log('Send', args);
        target.apply(thisArg, args);
      }
    });

    // replace the native send function with the proxy
    instance.send = sendProxy;

    // return the WebSocket instance
    return instance;
  }
});

// replace the native WebSocket with the proxy
window.WebSocket = WebSocketProxy;