PC端ng-alain+sockjs+stomp.js实现消息推送

• 1、插件下载

npm install sockjs
npm install stompjs

• 2、导入到模块

1）在typings.d.ts文件种定义对象

declare var Stomp: any;
declare var SockJS: any;

2）在angular.json中将js导入

"scripts": [
             
              "./src/assets/sockjs-1.0.0.min.js",
              "node_modules/stompjs/lib/stomp.js"
            ]

• 3、联调

1）将后台推送信息封装成服务

编码参考文档:

https://github.com/sockjs/sockjs-client

http://jmesnil.net/stomp-websocket/doc/

https://www.jianshu.com/p/4ef5004a1c8

import {Inject, Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { TokenService, DA_SERVICE_TOKEN } from '@delon/auth';

@Injectable()
export class WebsocketService {

  constructor(
    @Inject(DA_SERVICE_TOKEN) private tokenService: TokenService,
  ) {
    this.registerWebSocket();
  }
  private Source = new Subject<any>();
  Status$ = this.Source.asObservable();
  private extranet = 'http://39.105.37.111:82/api/websocket';
  private inner = 'http://192.168.1.113:8889/api/websocket';
  // 配置内网和外网的websocket地址
  private getUrl() {
    // return this.inner;
    return this.extranet;
  }
  /**
   * @函数名称：registerWebSocket
   * @param
   * @作用：连接websocket
   * @return：obj
   * @date 2018/7/30
   */
  registerWebSocket() {
    const url = this.getUrl();
    const socket = new SockJS(url);
    const client = Stomp.over(socket);
    const token = this.tokenService.get();
    const me = this;
    client.debug = null;
    client.connect(
      token.name,
      token.token,
      successMsg => {
        console.log('注册完成')
        // 连接成功后注册消息
        client.subscribe('/topic/subscribe', function(data) {
          me.receivePushInfo(data);
        });
      },
      errorMsg => {
        console.log(errorMsg);
      },
    );
  }

  /**
   * @函数名称：receivePushInfo
   * @param data
   * @作用：接收后台推送信息 并发送给订阅模块
   * @return：obj
   * @date 2018/7/30
   */
  private receivePushInfo(data){
    const msg = JSON.parse(data.body);
    this.Source.next(msg);
  };
}

2）告警模块订阅接受消息推送

在constructor中订阅消息推送

this.client = websocketService.Status$.subscribe(message => {
  this.loadData(message);
});

import { Component, OnDestroy } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd';
import { NoticeItem } from '@delon/abc';
import { AppUtil } from '@core/util/util.service';
import { Router } from '@angular/router';
import { WebsocketService } from "@core/websocket/websocket.service";
/**
 * 菜单通知
 */
@Component({
  selector: 'header-notify',
  template: `
  <notice-icon
    [data]="data"
    [count]="count"
    [loading]="loading"
    (select)="select($event)"
    (popoverVisibleChange)="beforLoadData()"
    (clear)="clearMsg($event)">
  </notice-icon>
  `,
  styles: [
    `
      .ant-list-item-meta-description {
        color: black;
      }
    `,
  ],
})
export class HeaderNotifyComponent implements OnDestroy {
  // private subscription: any;
  data: NoticeItem[] = [
    {
      title: '告警',
      list: [],
      emptyText: '你已查看所有告警',
      emptyImage:
        'https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg',
      clearText: '忽略告警',
    },
    // {
    //   title: '待办',
    //   list: [],
    //   emptyText: '你已完成所有待办',
    //   emptyImage:
    //     'https://gw.alipayobjects.com/zos/rmsportal/HsIsxMZiWKrNUavQUXqx.svg',
    //   clearText: '待办',
    // },
  ];
  count = 0;
  loading = false;
  public client: any;
  constructor(
    public util: AppUtil,
    private msg: NzMessageService,
    private router: Router,
    public websocketService: WebsocketService
  ) {
    this.client = websocketService.Status$.subscribe(message => {
      this.loadData(message);
    });
  }
  /**
   * @函数名称：ngOnDestroy
   * @param
   * @作用：销毁订阅的信息
   * @return：obj
   * @date 2018/7/30
   */
  ngOnDestroy() {
    this.client.unsubscribe();
  }

  /**
   * @函数名称：clearMsg
   * @param
   * @作用：将告警信息清除
   * @date 2018/7/30
   */
  clearMsg(type) {
    this.count = 0;
    this.data[0].list = [];
    this.msg.success(`清空了 ${type}`);
  }

  /**
   * @函数名称：beforLoadData
   * @param
   * @作用：预留接口 处理显示和隐藏时的逻辑 目前暂无用到
   * @return：obj
   * @date 2018/7/30
   */
  beforLoadData() {

  }

  /**
   * @函数名称：loadData
   * @param data
   * @作用：根据推送信息封装数据 然后load
   * @return：obj
   * @date 2018/7/30
   */
  loadData(row) {
    const singleItem = this.encapsulatedDataBySingleItem(row);
    this.data[0].list.unshift(singleItem);
    this.count = this.data[0].list.length;
  }

  /**
   * @函数名称：encapsulatedDataBySingleItem
   * @param row
   * @returns {any}  返回封装好的数据 直接用于push到list里面
   * @作用：封装单条数据
   * @date 2018/7/30
   */
  encapsulatedDataBySingleItem(row) {
    return {
      id: row.uuid,
      avatar: 'assets/img/alarm/high.png',
      title: this.util.getLabelStringByRows(row),
      datetime: this.util.timestampToTime(row.time_norm, null),
      type: '告警',
      data: row
    };
  }

  /**
   * @函数名称：select
   * @param res
   * @作用：点击一行告警触发的业务逻辑
   * @return：obj
   * @date 2018/7/30
   */
  select(res: any) {
    const item = res.item.data;
    this.router.navigate(['video/event/detail', item]);
  }
}

3）其他模块订阅接收消息推送