Websocket从函数返回

Question

我正在尝试为我的应用程序使用 websockets

function Connector()
{
  this.protocol = "bla";
  this.socket   = new WebSocket("ws://echo.websocket.org", this.protocol);
}

Connector.prototype.emit = function()
{
  this.socket.send('abc');
}

对我来说可以调用：

var con = new Connector();
con.emit();

从我的浏览器控制台但从源代码我收到以下错误消息

InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable

有什么问题？

Answer 1

您不应该等待readyState 的正确值吗？

function Connector(wsurl) {
    this.protocol = "bla";
    this.socket = new WebSocket(wsurl, this.protocol);
}
Connector.prototype.emit = function(msg) {

    var self = this;

    (function _waitForSocketConnection(callback) {
        setTimeout(function() {
            if (self.socket.readyState === 1) {
                console.log("Connection is made")
                if (callback != null) {
                    callback();
                }
                return;

            } else {
                console.log("wait for connection...")
                _waitForSocketConnection(callback);
            }
        }, 5);
    })(function() {
        console.log("message sent!!!");
        self.socket.send(msg);
    });
}


var con = new Connector("ws://echo.websocket.org");
con.emit('abc');
//or even worst
new Connector("ws://echo.websocket.org").emit('def');

Answer 2

您在等待调用.onopen 函数吗？您应该仅在建立连接后才在 websocket 上发送消息。你可以试试类似

    function Connector() {
        this.protocol = "bla";
        this.socket   = new WebSocket("ws://echo.websocket.org", this.protocol);
        this.connected = false;
    }
    Connector.prototype.emit = function() {

        if(this.connected) {
            try {
                this.socket.send('abc');
                return true;
            }
            catch(err) {
                console.log('Error' + err.message);
                return false;
            }       
        }
        else {
            console.log('CRITICAL Error No WS');
            return false;
        }
    }

    con.socket.onopen = function() {
        console.log("webSocket Connected");
        con.connected = true;
        //send message here
        con.emit();
    };
    con.socket.onclose = function(e) {
        //closed
        con.connected = false;
    };
    con.socket.onerror = function(e) {
        console.log("Error",e);
    };
    con.socket.onmessage = function(msg) {
        //msg
    }

更新代码

function Connector(protocol, cB){
    var self = this,
        this.protocol = protocol,
        this.socket   = new WebSocket("ws://echo.websocket.org", this.protocol),
        this.connected = false;    

    this.socket.onopen = function() {
        self.connected = true;
        cB();
    };

    this.socket.onclose = function(e) {
        self.connected = false;
        //closed, inform(event)
    };

    this.socket.onerror = function(e) {
        //error, inform(event)
    };

    this.socket.onmessage = function(msg) {
        //msg, inform(event)
    }
}

Connector.prototype.emit = function(msg) {
    if(this.connected) {
        try {
            this.socket.send(msg);
            return true;
        }
        catch(err) {
            console.log('Error' + err.message);
            return false;
        }       
    }
    else {
        console.log('CRITICAL Error No WS');
        return false;
    }
}

var con = new Connector('blah',function() {
    con.emit('abc');
});

以及没有构造函数或任何其他事件的最简单情况；只是简单/基本的 ws 客户端

var socket   = new WebSocket("ws://echo.websocket.org", 'bla');
socket.onopen = function() {
    socket.send('msg');
};

Answer 3

您应该先等待套接字连接。 Websocket 构造函数是非阻塞的，这意味着当您创建一个新的 Websocket 时，它会在后台连接并且您的代码会继续运行。你需要在你的 Websocket 上设置一个 onopen 属性，以在 Websocket 连接时执行回调。

Here你可以看到它是如何完成你可以监听的事件的。