我有一个项目在同一页面上使用多个 HTML5 websocket 连接。当所有连接都可用时,页面将按预期运行。但是,当一个或多个 websocket 连接断开时,所有剩余的连接都会被阻塞,直到坏连接超时。超时后,剩余的 websocket 会按预期连接。
请注意uris
下面的数组。我故意添加了一个错误的 websocket 地址来重新创建这个问题。当each
循环触发时,第一个 uri 立即连接并更新li
html 中的标签。然后,浏览器在第二个(坏)uri 上挂起长达 60 秒,然后最终移动到也立即连接的第三个 uri。
我能够在这里重新创建这个问题:http: //jsfiddle.net/eXZA6/2/
Javascript
var uris = {
'1': 'ws://echo.websocket.org/',
'2': 'ws://echo.websocket.org:1234/', //Bad websocket address
'3': 'ws://echo.websocket.org/'
};
var sockets = {};
$.each(uris, function(index, uri) {
sockets[index] = connect(index, uri);
});
function connect(index, uri) {
var websocket = new WebSocket(uri);
websocket.onopen = function (evt) {
$('li#' + index).text('Connected');
};
websocket.onclose = function (evt) {
$('li#' + index).text('Closed');
};
websocket.onmessage = function (evt) {
$('li#' + index).text('Received: ' + evt.data)
};
websocket.onerror = function (evt) {
$('li#' + index).text('Error');
};
return websocket;
}
HTML
<ul id="connection">
<li id="1" />
<li id="2" />
<li id="3" />
</ul>
- 我尝试使用 setTimeout 和其他 hacky 多线程技巧,但没有成功。
- 奇怪的是,我期望的功能似乎可以在 IE10 中使用,但不能在 Firefox 或 Chrome 中使用。