Angular 1.5:多个WebSocket连接

Question

我正在尝试使用Angular 1.5(与ES6一起)创建一个服务或工厂，在那里我可以有多个实例，每个实例都有到WebSocket的不同连接(这的主要目的是聊天系统)。

我能够做一个服务，为一个单一的WebSocket连接工作，但考虑到这个项目的目的，我需要能够连接到不同的"房间"，但他们中的每一个都有一个URL与不同的连接参数(如:ws://localhost:8080/chat/<param1>/<param2>)。

我使用angular-websocket (https://github.com/AngularClass/angular-websocket)。由于我使用严格模式的ES6，我必须从这个库中注入$websocket，并立即在构造函数中创建它的实例。

所以，我正在寻找的是:能够创建多个WebSocket连接，理想情况下是在服务/工厂中，其中每个人都有自己的连接参数(这将在此服务将被实例化的控制器上给出)，然后每个实例将能够管理新的各自"房间"消息的发送/接收。

使用ES5，我可能会创建一个非单例服务或工厂，这可能会解决这个问题，但我正在学习ES6，我真的很想用这种方式解决这个问题。这是我当前的聊天服务类，它目前只能处理静态连接，而且是单例的。

export default class ChatService {
  constructor($websocket) {
    'ngInject';
    this._$websocket = $websocket('wss://localhost:8080/chat' + '/param1/param2');
    this.collection = [];
    this.init();
  }
  init() {
    this._$websocket.onMessage(this.onMessage);
    this._$websocket.onOpen(this.onOpen);
    this._$websocket.onClose(this.onClose);
    this._$websocket.onError(this.onError);
  }
  onOpen() {
    console.log('Connection open');
  }
  onClose(event) {
    console.log('Connection closed: ', event);
  }
  onError(event) {
    console.log('Connection Error: ', event);
  }
  onMessage(message) {
    this.collection.push(JSON.parse(message.data));
  }
  closeSocket() {
    this._$websocket.close();
  }
  sendMessage(text) {
    // Code to send a message using this connection
  }
}

如果你对如何解决这个问题有任何其他建议，我洗耳恭听。

谢谢。

Answer 1

我使用jquery atmosphere js进行多套接字连接。你可以用它

多连接代码示例: HTML

<button id="b1">
ping s1
</button>
<button id="b2">
ping s1
</button>
<div id="s1">
  <h1>s1 pings</h1>  
  <p></p>
</div>

<div id="s2">
  <h1>s2 pings</h1>
  <p></p>
</div>

JS:

var container;
function Request(sU) {
    this.url = sU;
    this.contentType = 'application/json';
    this.logLevel = 'debug';
    this.trackMessageLength = false;
    this.enableProtocol = false;
    this.enableXDR = true;
    this.transport = 'websocket';
    this.fallbackTransport = 'sse';
    this.reconnectInterval = 5000;
    this.connectTimeout = 30000;
    this.timeout = 60000;
    this.maxReconnectOnClose = 3;
    this.isDetail = false;
    this.suspend = true;
    //this.headers           = {device: $rootScope.imageType}
    this.onOpen = function(response) {
        console.log("connected");
    };
    this.onReopen = function(response) {};
    this.onMessage = function(response) {
        $(container).append("<br>" + response.responseBody );
        console.log(response)
    };
    this.onClientTimeout = function(request) {};

    this.onReconnect = function(request, response) {};
    this.onError = function(response) {};
    this.onClose = function(response) {};
};// Request
function SocketConnector(sU) {
    return {
        request: new Request(sU),
        socket: null,
        closeSocket: function(aciklama) {
            this.socket.close();
        }, //closeSocket
        connectSocket: function() {
                this.socket = $.atmosphere.subscribe(this.request);
            } //connectSocket
    };
};

var socket1  = new SocketConnector('https://echo.websocket.org');
socket1.connectSocket();
$("#b1").click(function(){
  container = "#s1";
    socket1.socket.push(Date.now())
});
var socket2  = new SocketConnector('https://echo.websocket.org');
socket2.connectSocket();
$("#b2").click(function(){
  container = "#s2";
    socket2.socket.push(Date.now())
});

你可以把它写在任何angular服务js中。