谁能解释以下代码

Question

I am fairly new to javascript and know only the basic. Can anyone explain the following code as in the flow in which it occurs once the init function is called?

My Understanding of the following code is that once the init function is called sets a global variable output which is mapped to an HTML element with the id output. Then it calls the testWebSocket javascript function . This creates a WebSocket object. After this is the part which I don't understand completely.

Correct me if my understanding of the below is correct.

In the line websocket.open = function(evt) { onOpen(evt) }; ,the WebSocket object has an attribute named open which we are setting to whatever is being returned by

function(evt) { onOpen(evt) }; .

This in return calls the onOpen javascript function.

function onOpen(evt)  {
   writeToScreen("CONNECTED");doSend("WebSocket rocks");
}

This has a call to the onSend javascript function.

function doSend(message) {
   writeToScreen("SENT: " + message);websocket.send(message);
} 

So my first question what is being set in the WebSocket object(websocket.open) ??

Second Question:

Below is the sequence in which the testWebSocket() javascript function is executed.

websocket = new WebSocket(wsUri);        
websocket.onopen = function(evt) { 
  onOpen(evt) 
};
websocket.onclose = function(evt) { 
  onClose(evt) 
}; 
websocket.onmessage = function(evt) {
  onMessage(evt) 
};
websocket.onerror = function(evt) {
  onError(evt) 
};

When I run the below code and in case there is an error I only get an error printed in the browser.

So my question is that even though the attributes of the WebSocket object(websocket) open, close, onmessage, onerror are being set and in each, I am calling the writeToScreen function why are they not being set and what is going on the testWebSocket() javascript function .

function init() {
    output = document.getElementById("output");
    testWebSocket();
}

function testWebSocket() {
    websocket = new WebSocket(wsUri);
    websocket.onopen = function(evt) {
        onOpen(evt)
    };
    websocket.onclose = function(evt) {
        onClose(evt)
    };
    websocket.onmessage = function(evt) {
        onMessage(evt)
    };
    websocket.onerror = function(evt) {
        onError(evt)
    };
}

function onOpen(evt) {
    writeToScreen("CONNECTED");
    doSend("WebSocket rocks");
}

function onClose(evt) {
    writeToScreen("DISCONNECTED");
}

function onMessage(evt) {
    writeToScreen('<span style="color: blue;">RESPONSE: ' + evt.data + '</span>');
    websocket.close();
}

function onError(evt) {
    writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
}

function doSend(message) {
    writeToScreen("SENT: " + message);
    websocket.send(message);
}

function writeToScreen(message) {
    var pre = document.createElement("p");
    pre.style.wordWrap = "break-word";
    pre.innerHTML = message;
    output.appendChild(pre);
}

Answer 1

You are looking at event handlers .

The testWebSocket function tries to create a WebSocket connection to wsUri .

Once that connection is opened successfully, the onOpen function is called. Whenever the WebSocket connection receives a message the onMessage function is called and once the connection is closed onClose will execute.

If any of that goes wrong, the onError function will execute.

You are probably only seeing the error being displayed, because the connection cannot be established and thus, onError is the only thing that is being called.