-
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)其他模块订阅接收消息推送