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，因此必須從此lib中注入$websocket並立即在構造函數上創建其實例。

因此，我要尋找的是：能夠創建多個WebSocket連接，理想情況下是在服務/工廠中，其中每個連接都有自己的連接參數（將在實例化此服務的控制器上給出） ，然后每個實例將能夠管理新的相應“房間”消息的發送/接收。

使用ES5，我可能可以創建一個非單一服務或工廠，這可能可以解決此問題，但是當我學習ES6時，我真的很想以這種方式解決這個問題。 這是我當前的Chat服務類，該類目前僅能夠處理靜態連接，並且是單例。

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

您可以在任何角度服務js中編寫此代碼。

看JS Fiddle示例 。