Browse Source

添加浏览器ID,确保SSE可同时推送到不同的前端

pull/45/head
Lawrence 4 years ago
parent
commit
4b9549dfbf
  1. 39
      src/main/java/com/genersoft/iot/vmp/gb28181/event/alarm/AlarmEventListener.java
  2. 11
      src/main/java/com/genersoft/iot/vmp/vmanager/SseController/SseController.java
  3. 49
      web_src/package-lock.json
  4. 2
      web_src/package.json
  5. 3
      web_src/src/components/UiHeader.vue
  6. 22
      web_src/src/main.js

39
src/main/java/com/genersoft/iot/vmp/gb28181/event/alarm/AlarmEventListener.java

@ -4,6 +4,10 @@ import org.springframework.context.ApplicationListener;
import org.springframework.stereotype.Component; import org.springframework.stereotype.Component;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter; import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;
import java.io.IOException; import java.io.IOException;
import java.util.Hashtable;
import java.util.Iterator;
import java.util.Map;
import org.slf4j.Logger; import org.slf4j.Logger;
import org.slf4j.LoggerFactory; import org.slf4j.LoggerFactory;
@ -18,10 +22,10 @@ public class AlarmEventListener implements ApplicationListener<AlarmEvent> {
private final static Logger logger = LoggerFactory.getLogger(AlarmEventListener.class); private final static Logger logger = LoggerFactory.getLogger(AlarmEventListener.class);
private static SseEmitter emitter = new SseEmitter(); private static Map<String, SseEmitter> sseEmitters = new Hashtable<>();
public void addSseEmitters(SseEmitter sseEmitter) { public void addSseEmitters(String browserId, SseEmitter sseEmitter) {
emitter = sseEmitter; sseEmitters.put(browserId, sseEmitter);
} }
@Override @Override
@ -30,18 +34,25 @@ public class AlarmEventListener implements ApplicationListener<AlarmEvent> {
logger.debug("设备报警事件触发,deviceId:" + event.getAlarmInfo().getDeviceId() + ", " logger.debug("设备报警事件触发,deviceId:" + event.getAlarmInfo().getDeviceId() + ", "
+ event.getAlarmInfo().getAlarmDescription()); + event.getAlarmInfo().getAlarmDescription());
} }
try { String msg = "<strong>设备编码:</strong> <i>" + event.getAlarmInfo().getDeviceId() + "</i>"
String msg = "<strong>设备编码:</strong> <i>" + event.getAlarmInfo().getDeviceId() + "</i>" + "<br><strong>报警描述:</strong> <i>" + event.getAlarmInfo().getAlarmDescription() + "</i>"
+ "<br><strong>报警描述:</strong> <i>" + event.getAlarmInfo().getAlarmDescription() + "</i>" + "<br><strong>报警时间:</strong> <i>" + event.getAlarmInfo().getAlarmTime() + "</i>"
+ "<br><strong>报警时间:</strong> <i>" + event.getAlarmInfo().getAlarmTime() + "</i>" + "<br><strong>报警位置:</strong> <i>" + event.getAlarmInfo().getLongitude() + "</i>"
+ "<br><strong>定位经度:</strong> <i>" + event.getAlarmInfo().getLongitude() + "</i>" + ", <i>" + event.getAlarmInfo().getLatitude() + "</i>";
+ "<br><strong>定位纬度:</strong> <i>" + event.getAlarmInfo().getLatitude() + "</i>";
emitter.send(msg); for (Iterator<Map.Entry<String, SseEmitter>> it = sseEmitters.entrySet().iterator(); it.hasNext();) {
} catch (IOException e) { Map.Entry<String, SseEmitter> emitter = it.next();
if (logger.isDebugEnabled()) { logger.info("推送到SSE连接,浏览器ID: " + emitter.getKey());
logger.debug("SSE 通道已关闭"); try {
emitter.getValue().send(msg);
} catch (IOException | IllegalStateException e) {
if (logger.isDebugEnabled()) {
logger.debug("SSE连接已关闭");
}
// 移除已关闭的连接
it.remove();
// e.printStackTrace();
} }
// e.printStackTrace();
} }
} }
} }

11
src/main/java/com/genersoft/iot/vmp/vmanager/SEEController/SEEController.java → src/main/java/com/genersoft/iot/vmp/vmanager/SseController/SseController.java

@ -1,9 +1,10 @@
package com.genersoft.iot.vmp.vmanager.SEEController; package com.genersoft.iot.vmp.vmanager.SseController;
import com.genersoft.iot.vmp.gb28181.event.alarm.AlarmEventListener; import com.genersoft.iot.vmp.gb28181.event.alarm.AlarmEventListener;
import org.springframework.beans.factory.annotation.Autowired; import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller; import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter; import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;
/** /**
@ -14,16 +15,16 @@ import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;
@Controller @Controller
@RequestMapping("/api") @RequestMapping("/api")
public class SEEController { public class SseController {
@Autowired @Autowired
AlarmEventListener alarmEventListener; AlarmEventListener alarmEventListener;
//设置响应 //设置响应
@RequestMapping("/emit") @RequestMapping("/emit")
public SseEmitter emit() { public SseEmitter emit(@RequestParam String browserId) {
SseEmitter sseEmitter = new SseEmitter(0L); final SseEmitter sseEmitter = new SseEmitter(0L);
try { try {
alarmEventListener.addSseEmitters(sseEmitter); alarmEventListener.addSseEmitters(browserId, sseEmitter);
}catch (Exception e){ }catch (Exception e){
sseEmitter.completeWithError(e); sseEmitter.completeWithError(e);
} }

49
web_src/package-lock.json

@ -99,7 +99,6 @@
"version": "3.2.1", "version": "3.2.1",
"resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-3.2.1.tgz", "resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-3.2.1.tgz",
"integrity": "sha1-QfuyAkPlCxK+DwS43tvwdSDOhB0=", "integrity": "sha1-QfuyAkPlCxK+DwS43tvwdSDOhB0=",
"dev": true,
"requires": { "requires": {
"color-convert": "^1.9.0" "color-convert": "^1.9.0"
} }
@ -1645,7 +1644,6 @@
"version": "2.4.2", "version": "2.4.2",
"resolved": "https://registry.npm.taobao.org/chalk/download/chalk-2.4.2.tgz", "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-2.4.2.tgz",
"integrity": "sha1-zUJUFnelQzPPVBpJEIwUMrRMlCQ=", "integrity": "sha1-zUJUFnelQzPPVBpJEIwUMrRMlCQ=",
"dev": true,
"requires": { "requires": {
"ansi-styles": "^3.2.1", "ansi-styles": "^3.2.1",
"escape-string-regexp": "^1.0.5", "escape-string-regexp": "^1.0.5",
@ -1847,7 +1845,6 @@
"version": "1.9.3", "version": "1.9.3",
"resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-1.9.3.tgz", "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-1.9.3.tgz",
"integrity": "sha1-u3GFBpDh8TZWfeYp0tVHHe2kweg=", "integrity": "sha1-u3GFBpDh8TZWfeYp0tVHHe2kweg=",
"dev": true,
"requires": { "requires": {
"color-name": "1.1.3" "color-name": "1.1.3"
} }
@ -1855,8 +1852,7 @@
"color-name": { "color-name": {
"version": "1.1.3", "version": "1.1.3",
"resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.3.tgz", "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.3.tgz",
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
"dev": true
}, },
"color-string": { "color-string": {
"version": "0.3.0", "version": "0.3.0",
@ -3713,8 +3709,7 @@
"escape-string-regexp": { "escape-string-regexp": {
"version": "1.0.5", "version": "1.0.5",
"resolved": "https://registry.npm.taobao.org/escape-string-regexp/download/escape-string-regexp-1.0.5.tgz", "resolved": "https://registry.npm.taobao.org/escape-string-regexp/download/escape-string-regexp-1.0.5.tgz",
"integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
"dev": true
}, },
"escope": { "escope": {
"version": "3.6.0", "version": "3.6.0",
@ -4150,6 +4145,11 @@
"locate-path": "^2.0.0" "locate-path": "^2.0.0"
} }
}, },
"fingerprintjs2": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/fingerprintjs2/-/fingerprintjs2-2.1.2.tgz",
"integrity": "sha512-ZPsLgjziFRbUb5tXWpEMtWp4XFnzSah8SiNfl3aoURDZ+2zi2tuIOYUULqDBV+Cb6paN+raWT+Q2qpOaCbX/Yw=="
},
"flatten": { "flatten": {
"version": "1.0.3", "version": "1.0.3",
"resolved": "https://registry.npm.taobao.org/flatten/download/flatten-1.0.3.tgz", "resolved": "https://registry.npm.taobao.org/flatten/download/flatten-1.0.3.tgz",
@ -4403,8 +4403,7 @@
"has-flag": { "has-flag": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-3.0.0.tgz", "resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-3.0.0.tgz",
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
"dev": true
}, },
"has-symbols": { "has-symbols": {
"version": "1.0.1", "version": "1.0.1",
@ -8437,6 +8436,34 @@
} }
} }
}, },
"postcss-pxtorem": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/postcss-pxtorem/-/postcss-pxtorem-5.1.1.tgz",
"integrity": "sha512-uvgIujL/pn0GbZ+rczESD2orHsbXrrCqi+q9wJO8PCk3ZGCoVVtu5hZTbtk+tbZHZP5UkTfCvqOrTZs9Ncqfsg==",
"requires": {
"postcss": "^7.0.27"
},
"dependencies": {
"postcss": {
"version": "7.0.35",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
"integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
"requires": {
"chalk": "^2.4.2",
"source-map": "^0.6.1",
"supports-color": "^6.1.0"
}
},
"supports-color": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
"integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
"requires": {
"has-flag": "^3.0.0"
}
}
}
},
"postcss-reduce-idents": { "postcss-reduce-idents": {
"version": "2.4.0", "version": "2.4.0",
"resolved": "https://registry.npm.taobao.org/postcss-reduce-idents/download/postcss-reduce-idents-2.4.0.tgz?cache=0&sync_timestamp=1599672339373&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-reduce-idents%2Fdownload%2Fpostcss-reduce-idents-2.4.0.tgz", "resolved": "https://registry.npm.taobao.org/postcss-reduce-idents/download/postcss-reduce-idents-2.4.0.tgz?cache=0&sync_timestamp=1599672339373&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-reduce-idents%2Fdownload%2Fpostcss-reduce-idents-2.4.0.tgz",
@ -9893,8 +9920,7 @@
"source-map": { "source-map": {
"version": "0.6.1", "version": "0.6.1",
"resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz", "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
"integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=", "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM="
"dev": true
}, },
"source-map-resolve": { "source-map-resolve": {
"version": "0.5.3", "version": "0.5.3",
@ -10290,7 +10316,6 @@
"version": "5.5.0", "version": "5.5.0",
"resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-5.5.0.tgz?cache=0&sync_timestamp=1598611719015&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-5.5.0.tgz", "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-5.5.0.tgz?cache=0&sync_timestamp=1598611719015&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-5.5.0.tgz",
"integrity": "sha1-4uaaRKyHcveKHsCzW2id9lMO/I8=", "integrity": "sha1-4uaaRKyHcveKHsCzW2id9lMO/I8=",
"dev": true,
"requires": { "requires": {
"has-flag": "^3.0.0" "has-flag": "^3.0.0"
} }

2
web_src/package.json

@ -15,7 +15,9 @@
"core-js": "^2.6.5", "core-js": "^2.6.5",
"echarts": "^4.7.0", "echarts": "^4.7.0",
"element-ui": "2.10.1", "element-ui": "2.10.1",
"fingerprintjs2": "^2.1.2",
"moment": "^2.29.1", "moment": "^2.29.1",
"postcss-pxtorem": "^5.1.1",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-clipboard2": "^0.3.1", "vue-clipboard2": "^0.3.1",
"vue-cookies": "^1.7.4", "vue-cookies": "^1.7.4",

3
web_src/src/components/UiHeader.vue

@ -34,7 +34,8 @@ export default {
sseControl() { sseControl() {
let that = this; let that = this;
if (this.alarmNotify) { if (this.alarmNotify) {
this.sseSource = new EventSource('/api/emit'); console.log("申请SSE推送API调用,浏览器ID: " + this.$browserId);
this.sseSource = new EventSource('/api/emit?browserId=' + this.$browserId);
this.sseSource.addEventListener('message', function(evt) { this.sseSource.addEventListener('message', function(evt) {
that.$notify({ that.$notify({
title: '收到报警信息', title: '收到报警信息',

22
web_src/src/main.js

@ -8,10 +8,28 @@ import axios from 'axios';
import VueCookies from 'vue-cookies'; import VueCookies from 'vue-cookies';
import echarts from 'echarts'; import echarts from 'echarts';
import VueClipboard from 'vue-clipboard2' import VueClipboard from 'vue-clipboard2';
import { Notification } from 'element-ui'; import { Notification } from 'element-ui';
import Fingerprint2 from 'fingerprintjs2';
Vue.use(VueClipboard) // 生成唯一ID
Fingerprint2.get(function(components) {
const values = components.map(function(component,index) {
if (index === 0) { //把微信浏览器里UA的wifi或4G等网络替换成空,不然切换网络会ID不一样
return component.value.replace(/\bNetType\/\w+\b/, '');
}
return component.value;
})
//console.log(values) //使用的浏览器信息npm
// 生成最终id
let port = window.location.port;
console.log(port);
const fingerPrint = Fingerprint2.x64hash128(values.join(port), 31)
Vue.prototype.$browserId = fingerPrint;
console.log("唯一标识码:" + fingerPrint);
});
Vue.use(VueClipboard);
Vue.use(ElementUI); Vue.use(ElementUI);
Vue.use(VueCookies); Vue.use(VueCookies);
Vue.prototype.$axios = axios; Vue.prototype.$axios = axios;

Loading…
Cancel
Save