WebSocket does not inherit from EventTarget anymore (addEventListener/removeEventListener not available)
Reported by
olri...@gmail.com,
May 2 2016
|
|||
Issue description
UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2722.0 Safari/537.36
Example URL:
Steps to reproduce the problem:
Dear Google developers,
It looks like the 'addEventListener' function is not available anymore on the WebSocket object in the latest Chrome canary versions (52.0.2722.0 and previous one)
It looks like it does not inherit from EventTarget anymore.
You can find a screenshot that shows the differences between Chrome 49.0.2623.112 m (64-bit) and the last Canary build 52.0.2722.0 canary (64-bit).
Step to reproduce the problem:
1] Host the following code on a web server:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Test Web Socket</title>
<style>
body, input, textarea, button {
font-family: Consolas, monospace;
}
.column {
float: left;
min-width: 300px;
}
.break {
clear: both;
}
.bold, button {
font-weight: bold;
}
input, textarea {
width: 100%;
}
div {
padding: 5px;
}
</style>
</head>
<body>
<div class="column">
<div><span class="bold">Location:</span></div>
<div>
<input id="uri" type="text" readonly="readonly" value="wss://echo.websocket.org"/>
</div>
<div>
<button id="connectButton">Connect</button>
<button id="disconnectButton" disabled="">Disconnect</button>
</div>
<div>
<div><span class="bold">Message:</span></div>
<div>
<input type="text" id="message"/>
</div>
<div>
<button id="sendButton" disabled="">Send</button>
</div>
</div>
</div>
<div class="column">
<div>
<span class="bold">Log:</span>
</div>
<div>
<textarea id="log" cols="30" rows="10"></textarea>
</div>
</div>
<script type="text/javascript">
var App = (function(){
var webSock = null;
var logEl = null;
var _log = function(type, s) {
if (logEl) {
logEl.value += type + ":\t" + s + "\n";
}
};
var _logMessage = function(s) {
_log("MSG", s);
};
var _logError = function(s) {
_log("ERR", s);
};
var _setDisabled = function(id, disabled) {
var el = document.getElementById(id);
if (el && el.disabled !== undefined) {
el.disabled = disabled;
}
};
var _onConnected = function() {
_log("PROT", "CONNECTED");
_setDisabled('connectButton', true);
_setDisabled('sendButton', false);
_setDisabled('disconnectButton', false);
};
var _onError = function() {
_log("PROT", "ERROR");
};
var _onClose = function() {
_log("PROT", "CLOSE");
_setDisabled('connectButton', false);
_setDisabled('sendButton', true);
_setDisabled('disconnectButton', true);
}
var _onMessage = function(e) {
_logMessage(e.data);
};
var _onSendButtonClicked = function() {
var el = document.getElementById('message');
var message = el.value;
el.value = "";
if (message && webSock) {
webSock.send(message);
}
};
var _onConnectButtonClicked = function() {
// init web sock
try {
var uri = document.getElementById("uri").value;
webSock = new WebSocket(uri);
webSock.addEventListener('open', _onConnected, false);
webSock.addEventListener('error', _onError, false);
webSock.addEventListener('close', _onClose, false);
webSock.addEventListener('message', _onMessage, false);
} catch (e) {
_logError(e.message);
}
};
var _onDisconnectButtonClicked = function() {
if (webSock) {
webSock.close();
}
}
var _init = function() {
logEl = document.getElementById('log');
if (!!!window.WebSocket) {
_logError("WebSocket not available");
return;
}
// add button click listener
document
.getElementById('connectButton')
.addEventListener('click', _onConnectButtonClicked, false);
document
.getElementById('sendButton')
.addEventListener('click', _onSendButtonClicked, false);
document
.getElementById('disconnectButton')
.addEventListener('click', _onDisconnectButtonClicked, false);
};
_init();
return {};
})();
</script>
</body>
</html>
2] Click the connect button.
What is the expected behavior?
The page should be able to connect and use the:
webSock.addEventListener
function to add an event listener (connect/close/error/message).
What went wrong?
Exception on the 'addEventListener' function call.
Did this work before? Yes 49.0.2623.112 m (64-bit) (and canary build of last week)
Chrome version: 52.0.2722.0 Channel: canary
OS Version: 10.0
Flash Version: Shockwave Flash 22.0 r0
I attach the test page and a comparison between what the inspector showed in 49.0.2623.112 and what is showed now.
The Web Socket specification (https://html.spec.whatwg.org/multipage/comms.html#network) specifies that WebSocket should inherits from EventTarget
,
May 3 2016
It appears that today my stable Chrome has reverted back to the old WebSocket structure and everything is working again. I have no idea how my v50 was having the same issue that you are seeing in v52.
,
May 3 2016
,
May 4 2016
I don't know how this is possible but I tested the same page today with the same version of Chrome (52.0.2722.0) and this time it worked. It is very strange that both parn...@gmail.com and I, saw the error then it disappeared without us doing anything.
,
May 4 2016
Close this issue as "unable-to-reproduce", please re-open it if the issue still exists. |
|||
►
Sign in to add a comment |
|||
Comment 1 by parn...@gmail.com
, May 2 2016