Angular 1.5：多个WebSocket连接

Question

I'm trying to create a service or factory using Angular 1.5 (with ES6) where I could have multiple instances of it, each one having a different connection to a WebSocket (the main purpose of this is a chat system).

I was able to do a service that works for a single WebSocket connection, but given the purpose of this project, I need to be able to connect to different "rooms" but each one of them has a URL with different connection parameters (like so: ws://localhost:8080/chat/<param1>/<param2> ).

I'm using angular-websocket ( https://github.com/AngularClass/angular-websocket ). Since I'm using ES6 with strict mode, I have to inject $websocket from this lib and create immediately an instance of it on the constructor.

So, what I'm looking for is: being able to create multiple WebSocket connections, ideally in a service/factory, where each one of them has its own connection parameters (which would be given on the controller where this service will be instantiated), and then each instance would be able to manage the sending/receiving of new respective "room" messages.

Using ES5, I could probably create a non-singleton service or factory and that could probably solve this problem, but as I'm learning ES6 I would really love to have this solved that way. Here's my current Chat service class, which currently only is able to handle a static connection, and it's a singleton.

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
  }
}

If you have any other suggestion on how to tackle this problem, I'm all ears.

Thank you.

Answer 1

I use jquery atmosphere js for multi socket connection. You can use it.

Exapmle multi connection code :

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())
});

You can write this in any angular service js.

Look at JS Fiddle example .