HTML5Websocket类及其实例使用彼此连接

Question

我有一个Websocket类，我想用于到不同端口的多个连接。我注意到，当我打开第一个网络套接字时，第二个网络套接字会关闭连接；或者当同时打开socket1和socket2时，socket2正在使用socket1端口。是否可以用一个类实例化多个websocket对象？如果是，你能指出我的两个套接字实例"混淆"并使用彼此端口的可能问题在哪里吗？非常感谢。

function MyWebsocket(server, port) {
_self = this;
_self.timeout = 2000;
_self.clearTimer = -1;
_self.data = {};
_self.socket = {};
_self.server = server;
_self.port = port;
_self.regMessage = "";
_self.setOnMessage = "";
_self.action = "";
_self.setRegMessage = function (message) {
    _self.regMessage = message;
};

_self.getData = function () {
    return _self.data;
}
_self.getSocketState = function () {
    console.log("get state; port: " + _self.port);
    return (_self.socket != null) ? _self.socket.readyState : 0;
};
_self.onOpen = function () {
    console.log("open; port: "  + _self.port);
    clearInterval(_self.clearTimer);
    _self.send();
};
_self.send = function () {
    _self.socket.send(_self.regMessage);
};
_self.onError = function (event) {
    console.log("error; port: " + _self.port);
    _self.errorMessage(event);
    clearInterval(_self.clearTimer);
    _self.socket.onclose = function () {};
    _self.clearTimer = setInterval(" _self.connect()", _self.timeout);
};
_self.onClose = function (event) {
    console.log("close; port: " + _self.port);
    _self.errorMessage(event);
    clearInterval(_self.clearTimer);
    _self.clearTimer = setInterval(" _self.connect()", _self.timeout);
};
_self.onMessage = function (e) {
    var data = JSON.parse(e.data);
    switch (data.action) {
    case "Action1": { getAction1(data); break;}
    case "Action2": { getAction2(data); break;}
}
};
_self.connect = function () {
    if ("WebSocket" in window) {
        if (_self.getSocketState() === 1) {
            _self.socket.onopen = _self.onOpen;
            clearInterval(_self.clearTimer);
            console.log(_self.getSocketState());
        }
        else {
            try {
                host = "ws://" + _self.server + ":" + _self.port;
                _self.socket = new WebSocket(host);
                console.log(_self.socket);
                _self.socket.onopen = _self.onOpen;
                _self.socket.onmessage = function (e) {_self.onMessage(e);};
                _self.socket.onerror = function (e) { _self.onError; }
                _self.socket.onclose = function (e) { _self.onClose; }
            }
            catch (exeption) {
                console.log(exeption);
            }
        }
    }
};
_self.disconnect = function () {
    console.log("disconnect; port: " + _self.port);   
       _self.socket.onclose = function (event) {};
       _self.socket.close(1000);
};

}；

main.js-实例化websocket并在需要时打开/关闭它们

function connectS1(){
 leaderSocket = new MyWebsocket('127.0.0.1','23456');
 leaderSocket.setRegMessage(xml);
 leaderSocket.connect();
}
function disconnectS1(){
  if(typeof leaderSocket!='undefined' && leaderSocket.socket.readyState==1){
  leaderSocket.disconnect();
}
}
function connectS2(){
 scScoket = new MyWebsocket('127.0.0.1','12345');
 scScoket.setRegMessage(xml2);
 scScoket.connect();
}
function disconnectS2(){
 if(typeof scScoket!='undefined'&& scScoket.socket.readyState==1){
 scScoket.disconnect();
}
}
 function getAction2(data){
  console.log(data.Fed);
 }
 function getAction1(data) {
     console.log(data.Fed);
 }

index.html-有按钮打开其中一个插座或让它们都打开

    <button onclick='disconnectS2();connectS1();'>Socket1</button>
    <button onclick='disconnectS1();connectS2();'>Socket2</button>
    <button    onclick='disconnectS1();connectS1();disconnectS2();connectS2();'>both</button>

Answer 1

我建议您考虑使用prototype而不是_self GLOBAL变量。。。

我不确定当你在MyWebsocket函数之外使用_self变量时（最后你确实这样做了），它会做什么，但我有一种强烈的感觉，它并没有像你所期望的那样将方法添加到类中。

此外，由于_self变量是GLOBAL，一旦打开第二个连接，就会覆盖它，这可能会在代码中引起一些冲突。

这里有一个关于Javascript类的很棒的教程。

从本质上讲，您的代码可能看起来更像这样：

function MyWebsocket(server, port) {
    this.timeout = 2000;
    this.clearTimer = -1;
    this.data = {};
    this.socket = {};
    this.server = server;
    this.port = port;
    this.regMessage = "";
    this.setOnMessage = "";
    this.action = "";
};
MyWebsocket.getSocket = function (ws) {
    if(this.map == NaN) { this.map = {} };
    return this.map[ws]
};
MyWebsocket.setSocket = function (object) {
    this.map[object.socket] = object;
    return object;
};
MyWebsocket.prototype.setRegMessage = function (message) {
    this.regMessage = message;
};

MyWebsocket.prototype.getData = function () {
    return this.data;
}
MyWebsocket.prototype.getSocketState = function () {
    console.log("get state; port: " + this.port);
    return (this.socket != null) ? this.socket.readyState : 0;
};
MyWebsocket.prototype.onOpen = function () {
    console.log("open; port: "  + this.port);
    clearInterval(this.clearTimer);
    this.send();
};
MyWebsocket.prototype.send = function () {
    this.socket.send(this.regMessage);
};
MyWebsocket.prototype.onError = function (event) {
    var my = MyWebsocket.getSocket(this)
    console.log("error; port: " + my.port);
    my.errorMessage(event);
    clearInterval(my.clearTimer);
    this.onclose = function () {};
    my.clearTimer = setInterval(" this.connect()", my.timeout);
};
MyWebsocket.prototype.onClose = function (event) {
    var my = MyWebsocket.getSocket(this)
    console.log("close; port: " + my.port);
    my.errorMessage(event);
    clearInterval(my.clearTimer);
    my.clearTimer = setInterval(" this.connect()", my.timeout);
};
MyWebsocket.prototype.onMessage = function (e) {
    var data = JSON.parse(e.data);
    switch (data.action) {
    case "Action1": { getAction1(data); break;}
    case "Action2": { getAction2(data); break;}
}
};
MyWebsocket.prototype.connect = function () {
    if ("WebSocket" in window) {
        if (this.getSocketState() === 1) {
            this.socket.onopen = this.onOpen;
            clearInterval(this.clearTimer);
            console.log(this.getSocketState());
        }
        else {
            try {
                var host = "ws://" + this.server + ":" + this.port;
                this.socket = new WebSocket(host);
                MyWebsocket.setSocket(this)
                console.log(this.socket);
                this.socket.onopen = this.onOpen;
                this.socket.onmessage = this.onMessage
                this.socket.onerror = this.onError;
                this.socket.onclose = this.onClose;
            }
            catch (exeption) {
                console.log(exeption);
            }
        }
    }
};
MyWebsocket.prototype.disconnect = function () {
    console.log("disconnect; port: " + this.port);   
       this.socket.onclose = function (event) {};
       this.socket.close(1000);
};

如果这个更改没有帮助，请告诉我，我会仔细阅读更多的代码，并尝试与您一起修复它。