Angular 1.5:多个 WebSocket 连接

Posted

技术标签:

【中文标题】Angular 1.5:多个 WebSocket 连接【英文标题】:Angular 1.5: multiple WebSocket connections 【发布时间】:2016-11-16 17:59:53 【问题描述】:

我正在尝试使用 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
  

如果您对如何解决此问题有任何其他建议,我会全力以赴。

谢谢。

【问题讨论】:

【参考方案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())
);

您可以在任何角度服务 js 中编写此代码。

看JS Fiddle example。

【讨论】:

我不知道 Atmosphere。谢谢你。尽管如此,我还是无法使用它。我为它找到了一个 Angular 包装器,但由于某种原因,我似乎无法让它工作。即使我在项目中同时导入了大气.js 和包装器,它也不起作用...... @NunoM 我为您编辑了它并在 JS Fiddle 上创建了一个示例。 卡穆兰,也许我没有正确解释自己。我可以运行你的代码(谢谢,顺便说一句)。我不能让 Atmosphere.js 在我的 ES6(带有 Browserify)Angular 应用程序上与现有的 Angular 包装器一起运行。由于某种原因,包装器看不到原始的 Atmosphere 代码。我很确定,一旦他们开始相互合作,您的大部分代码可能都可以用于设置连接和处理消息传递。 Karuman,我终于能够让 Atmosphere.js 和 Angular 包装器一起工作。您的连接设置也对我有帮助,因为由于某种原因,如果我坚持使用基本配置(url、传输和 contentType),WebSocket 将无法连接。尽管您的回答帮助我解决了我的主要问题,但我想看看是否有人可以为我提供一些关于在使用 ES6 编写 Angular 应用程序时如何制作非单例服务的输入。我还没有设法得到那个。如果没有提供进一步的输入,我会将您的输入标记为正确答案,好吗?谢谢! 我很高兴能帮助你 NunoM。如果您共享您的包装,我可以为您检查。

以上是关于Angular 1.5:多个 WebSocket 连接的主要内容,如果未能解决你的问题,请参考以下文章

具有一个功能的 Angular 多个事件

在 Angular2 应用程序中使用 angular2-websocket 关闭 websocket 连接时,如何重新连接它?

404 使用 Angular2、angular2-websocket 和类型

Angular 4 中的 WebSocket

Angular - 用 jasmine 测试 websocket 包装器

在 Angular 中连接 WebSocket