WebSocket is Null after onOpen

Question

我尝试使用以下代码连接Websocket:

var sConn = {
    socket: null,
    uri: "ws://" + window.location.host + "/socket/",
    init: function() { 
        this.socket = new WebSocket(this.uri);
        this.socket.onopen = this.onOpen;
        this.socket.onclose = this.onClose;
        this.socket.onerror = this.onError;
        this.socket.onmessage = this.onMessage;
    },

    onOpen: function(){
        console.log(this.socket); // prints "undefined"
        this.socket.send("Hello Server!"); // can't read property send of undefined
    },
    onClose: function(event){
         console.log("Close:",event); // is never called
    },
    onError: function(err){
        console.log("Error:",err); // also never called
    },
    onMessage: function(msg){
        console.log("Got Message:",msg);
    }
};
$(document).ready(function(){
    sConn.init();
});

不幸的是，当调用onOpen时，套接字似乎是未定义的。我最初认为可能在onOpen之后套接字就关闭了，但onClose从未被调用，onError也从未被调用。

我犯了什么错？

Answer 1

您正在丢失init()中的绑定上下文。

尝试将其改写为：

init: function() { 
  this.socket = new WebSocket(this.uri);
  this.socket.onopen = this.onOpen.bind(this);
  this.socket.onclose = this.onClose.bind(this);
  this.socket.onerror = this.onError.bind(this);
  this.socket.onmessage = this.onMessage.bind(this);
}

这样可以确保sConn中的所有事件处理程序函数都在正确的this上下文中运行。

或者，可以使用sConn.socket而不是this.socket来引用套接字。