Merge pull request #46 from lawrencehj/wvp-28181-2.0

648540858

2021-01-22 9d19f6b9d6b361d8b93671a553973289b40d9d33

Merge pull request #46 from lawrencehj/wvp-28181-2.0

修正SSE不能分别发送到同时浏览的前端的问题等

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

@@ -4,6 +4,10 @@
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;
import java.io.IOException;
import java.util.Hashtable;
import java.util.Iterator;
import java.util.Map;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

@@ -18,10 +22,10 @@

    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) {
        emitter = sseEmitter;
    public void addSseEmitters(String browserId, SseEmitter sseEmitter) {
        sseEmitters.put(browserId, sseEmitter);
    }

    @Override
@@ -30,18 +34,25 @@
            logger.debug("设备报警事件触发，deviceId：" + event.getAlarmInfo().getDeviceId() + ", "
                    + event.getAlarmInfo().getAlarmDescription());
        }
        try {
            String msg = "<strong>设备编码：</strong> <i>" + event.getAlarmInfo().getDeviceId() + "</i>"
                        + "<br><strong>报警描述：</strong> <i>" + event.getAlarmInfo().getAlarmDescription() + "</i>"
                        + "<br><strong>报警时间：</strong> <i>" + event.getAlarmInfo().getAlarmTime() + "</i>"
                        + "<br><strong>定位经度：</strong> <i>" + event.getAlarmInfo().getLongitude() + "</i>"
                        + "<br><strong>定位纬度：</strong> <i>" + event.getAlarmInfo().getLatitude() + "</i>";
            emitter.send(msg);
        } catch (IOException e) {
            if (logger.isDebugEnabled()) {
                logger.debug("SSE 通道已关闭");
        String msg = "<strong>设备编码：</strong> <i>" + event.getAlarmInfo().getDeviceId() + "</i>"
                    + "<br><strong>报警描述：</strong> <i>" + event.getAlarmInfo().getAlarmDescription() + "</i>"
                    + "<br><strong>报警时间：</strong> <i>" + event.getAlarmInfo().getAlarmTime() + "</i>"
                    + "<br><strong>报警位置：</strong> <i>" + event.getAlarmInfo().getLongitude() + "</i>"
                    + ", <i>" + event.getAlarmInfo().getLatitude() + "</i>";

        for (Iterator<Map.Entry<String, SseEmitter>> it = sseEmitters.entrySet().iterator(); it.hasNext();) {
            Map.Entry<String, SseEmitter> emitter = it.next();
            logger.info("推送到SSE连接，浏览器ID: " + emitter.getKey());
            try {
                emitter.getValue().send(msg);
            } catch (IOException | IllegalStateException e) {
                if (logger.isDebugEnabled()) {
                    logger.debug("SSE连接已关闭");
                }
                // 移除已关闭的连接
                it.remove();
                // e.printStackTrace();
            }
            // e.printStackTrace();
        }
    }
}

 src/main/java/com/genersoft/iot/vmp/vmanager/SseController/SseController.java

File was renamed from src/main/java/com/genersoft/iot/vmp/vmanager/SEEController/SEEController.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 org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;

/**
@@ -14,16 +15,16 @@

@Controller
@RequestMapping("/api")
public class SEEController {
public class SseController {
    @Autowired 
    AlarmEventListener alarmEventListener;
    
       //设置响应
    @RequestMapping("/emit")
    public SseEmitter emit() {
        SseEmitter sseEmitter = new SseEmitter(0L);
    public SseEmitter emit(@RequestParam String browserId) {
        final SseEmitter sseEmitter = new SseEmitter(0L);
        try {
            alarmEventListener.addSseEmitters(sseEmitter);
            alarmEventListener.addSseEmitters(browserId, sseEmitter);
        }catch (Exception e){
            sseEmitter.completeWithError(e);
        }

 src/main/resources/application-dev.yml

@@ -13,12 +13,12 @@
        timeout: 10000
    # [不可用] jdbc数据库配置, 暂不支持
    datasource:
        #name: eiot
        #url: jdbc:mysql://127.0.0.1:3306/eiot?useUnicode=true&characterEncoding=UTF8&rewriteBatchedStatements=true
        #username:
        #password:
        #type: com.alibaba.druid.pool.DruidDataSource
        #driver-class-name: com.mysql.jdbc.Driver
        # name: eiot
        # url: jdbc:mysql://127.0.0.1:3306/eiot?useUnicode=true&characterEncoding=UTF8&rewriteBatchedStatements=true
        # username:
        # password:
        # type: com.alibaba.druid.pool.DruidDataSource
        # driver-class-name: com.mysql.jdbc.Driver
        name: eiot
        url: jdbc:sqlite::resource:wvp.sqlite
        username:
@@ -35,18 +35,18 @@
# 作为28181服务器的配置
sip:
    # [必须修改] 本机的IP, 必须是网卡上的IP
    ip: 192.168.1.44
    ip: 192.168.0.100
    # [可选] 28181服务监听的端口
    port: 5060
    # 根据国标6.1.2中规定，domain宜采用ID统一编码的前十位编码。国标附录D中定义前8位为中心编码（由省级、市级、区级、基层编号组成，参照GB/T 2260-2007）
    # 后两位为行业编码，定义参照附录D.3
    # 3701020049标识山东济南历下区 信息行业接入
    # [可选]
    domain: 3402000000
    domain: 4401020049
    # [可选]
    id: 34020000002000000001
    id: 44010200492000000001
    # [可选] 默认设备认证密码，后续扩展使用设备单独密码
    password: 12345678
    password: admin123

# 登陆的用户名密码
auth:
@@ -58,9 +58,9 @@
#zlm服务器配置
media:
    # [必须修改] zlm服务器的内网IP
    ip: 192.168.1.44
    ip: 192.168.0.100
    # [可选] zlm服务器的公网IP, 内网部署置空即可
    wanIp:
    wanIp: 
    # [可选] zlm服务器的hook所使用的IP, 默认使用sip.ip
    hookIp:
    # [必须修改] zlm服务器的http.port
@@ -70,12 +70,12 @@
    # [可选] zlm服务器的hook.admin_params=secret
    secret: 035c73f7-bb6b-4889-a715-d9eb2d1925cc
    # [可选] zlm服务器的general.streamNoneReaderDelayMS
    streamNoneReaderDelayMS:  600000  # 无人观看多久自动关闭流, -1表示永不自动关闭,即 关闭按需拉流
    streamNoneReaderDelayMS:  18000  # 无人观看多久自动关闭流, -1表示永不自动关闭,即 关闭按需拉流
    # [可选] 自动点播， 使用固定流地址进行播放时，如果未点播则自动进行点播, 需要rtp.enable=true
    autoApplyPlay: true
    autoApplyPlay: false
    # [可选] 部分设备需要扩展SDP，需要打开此设置
    seniorSdp: false
    # 启用udp多端口模式, 详细解释参考: https://github.com/xia-chu/ZLMediaKit/wiki/GB28181%E6%8E%A8%E6%B5%81 下的高阶使用
    # 启用udp多端口模式
    rtp:
        # [可选] 是否启用udp多端口模式, 开启后会在udpPortRange范围内选择端口用于媒体流传输
        enable: true

 web_src/.postcssrc.js

@@ -5,6 +5,10 @@
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {}
    "autoprefixer": {},
    'postcss-pxtorem': {
      rootValue: 24, 
      propList: ['font-size'] // 只转化font-size
    }
  }
}

 web_src/package-lock.json

@@ -99,7 +99,6 @@
      "version": "3.2.1",
      "resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-3.2.1.tgz",
      "integrity": "sha1-QfuyAkPlCxK+DwS43tvwdSDOhB0=",
      "dev": true,
      "requires": {
        "color-convert": "^1.9.0"
      }
@@ -1645,7 +1644,6 @@
      "version": "2.4.2",
      "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-2.4.2.tgz",
      "integrity": "sha1-zUJUFnelQzPPVBpJEIwUMrRMlCQ=",
      "dev": true,
      "requires": {
        "ansi-styles": "^3.2.1",
        "escape-string-regexp": "^1.0.5",
@@ -1847,7 +1845,6 @@
      "version": "1.9.3",
      "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-1.9.3.tgz",
      "integrity": "sha1-u3GFBpDh8TZWfeYp0tVHHe2kweg=",
      "dev": true,
      "requires": {
        "color-name": "1.1.3"
      }
@@ -1855,8 +1852,7 @@
    "color-name": {
      "version": "1.1.3",
      "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.3.tgz",
      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
      "dev": true
      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
    },
    "color-string": {
      "version": "0.3.0",
@@ -3713,8 +3709,7 @@
    "escape-string-regexp": {
      "version": "1.0.5",
      "resolved": "https://registry.npm.taobao.org/escape-string-regexp/download/escape-string-regexp-1.0.5.tgz",
      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
      "dev": true
      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
    },
    "escope": {
      "version": "3.6.0",
@@ -4150,6 +4145,11 @@
        "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": {
      "version": "1.0.3",
      "resolved": "https://registry.npm.taobao.org/flatten/download/flatten-1.0.3.tgz",
@@ -4403,8 +4403,7 @@
    "has-flag": {
      "version": "3.0.0",
      "resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-3.0.0.tgz",
      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
      "dev": true
      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
    },
    "has-symbols": {
      "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": {
      "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",
@@ -9893,8 +9920,7 @@
    "source-map": {
      "version": "0.6.1",
      "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
      "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
      "dev": true
      "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM="
    },
    "source-map-resolve": {
      "version": "0.5.3",
@@ -10290,7 +10316,6 @@
      "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",
      "integrity": "sha1-4uaaRKyHcveKHsCzW2id9lMO/I8=",
      "dev": true,
      "requires": {
        "has-flag": "^3.0.0"
      }

 web_src/package.json

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

 web_src/src/components/UiHeader.vue

@@ -33,7 +33,8 @@
        sseControl() {
            let that = this;
            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) {
                    that.$notify({
                        title: '收到报警信息',

 web_src/src/main.js

@@ -8,10 +8,28 @@
import VueCookies from 'vue-cookies';
import echarts from 'echarts';

import VueClipboard from 'vue-clipboard2'
import VueClipboard from 'vue-clipboard2';
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(VueCookies);
Vue.prototype.$axios = axios;