Angular5集成eventbus

作者: 是小太阳呀 | 来源:发表于2018-07-12 23:27 被阅读9次

    1.package.json中

    "dependencies": {
         ...
        "vertx3-eventbus-client": "3.5.2",
      },
    

    然后 npm install,或者:

    npm install vertx3-eventbus-client@3.5.2
    

    2.angular-cli.json中

     "scripts": [
             ...
            "../node_modules/vertx3-eventbus-client/vertx-eventbus.js"
          ],
    

    3.创建一个eventbus.service.ts用来通信
    导入eventbus:

    import { EventBus } from 'vertx3-eventbus-client';
    

    声明eventbus:

    declare var EventBus: any;
    

    4.创建eventbus实例,监听接口以及发送消息

    //创建实例
    var eb = new EventBus('http://localhost:8080/eventbus');
    
    eb.onopen = function() {
     //注册监听器用来接受消息
      eb.registerHandler('some-address', function(error, message) {
        console.log('received a message: ' + JSON.stringify(message));
      });
    
     //发送消息
      eb.send('some-address', {name: 'tim', age: 587});
    
    }
    

    更多信息请参考这里 https://vertx.io/docs/vertx-web/java/

    注:
    对于需要发送消息来接受的消息,需要先监听,然后再发送消息。
    对于一直推送的消息,不需要发送。

    代码实例如下:

    RegisterHandler(key, id, callback) {
            const address = '***.' + key + '.' + id;
            if (typeof (this.eventBus[key]) === 'undefined' || !this.eventBus[key]) {
                this.eventBus[key] = new EventBus(environment.eventbusUrl);
            }
            if (this.eventBus[key].state === EventBus.OPEN) {
                this.eventBus[key].registerHandler(address, callback);
            } else {
                const $this = this;
                this.eventBus[key].onopen = function () {
                    $this.eventBus[key].registerHandler(address, callback)
                }
            }
        }
    
    Send(key, id) {
            var data = '';
            const address = ***.' + key + '.' + id;
            if (typeof (this.eventBus[key]) === 'undefined' || !this.eventBus[key]) {
                this.eventBus[key] = new EventBus(environment.eventbusUrl);
            }
            if (this.eventBus[key].state === EventBus.OPEN) {
                this.eventBus[key].send(address, data)
            } else {
                const $this = this;
                this.eventBus[key].onopen = function () {
                    $this.eventBus[key].send(address, data)
                }
            }
        }
    
    closeEventBus(key) {
            if (typeof (this.eventBus[key]) !== 'undefined' && this.eventBus[key] && this.eventBus[key].state === EventBus.OPEN) {
                this.eventBus[key].close();
            }
            this.eventBus[key] = null;
    }
    

    在组件ngOnDestroy中调用closeEventBus关闭eventbus。

    相关文章

      网友评论

        本文标题:Angular5集成eventbus

        本文链接:https://www.haomeiwen.com/subject/tekdpftx.html