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

2021-01-21 19:57:57 +08:00
parent 0456d6e357
commit 4b9549dfbf
6 changed files with 92 additions and 34 deletions
--- a/web_src/package-lock.json
+++ b/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"
      }
--- a/web_src/package.json
+++ b/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",
--- a/web_src/src/components/UiHeader.vue
+++ b/web_src/src/components/UiHeader.vue
@@ -34,7 +34,8 @@ export default {
        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: '收到报警信息',
--- a/web_src/src/main.js
+++ b/web_src/src/main.js
@@ -8,10 +8,28 @@ import axios from 'axios';
 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)
+// <20><><EFBFBD><EFBFBD>ΨһID
+Fingerprint2.get(function(components) {
+  const values = components.map(function(component,index) {
+    if (index === 0) { //<2F><>΢<EFBFBD><CEA2><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>UA<55><41>wifi<66><69>4G<34><47><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>滻<EFBFBD>ɿ<EFBFBD>,<2C><>Ȼ<EFBFBD>л<EFBFBD><D0BB><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ID<49><44>һ<EFBFBD><D2BB>
+      return component.value.replace(/\bNetType\/\w+\b/, '');
+    }
+    return component.value;
+  })
+  //console.log(values)  //ʹ<>õ<EFBFBD><C3B5><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ϣnpm 
+  // <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>id
+  let port = window.location.port;
+  console.log(port);
+  const fingerPrint = Fingerprint2.x64hash128(values.join(port), 31)
+  Vue.prototype.$browserId = fingerPrint;
+  console.log("Ψһ<CEA8><D2BB>ʶ<EFBFBD>룺" + fingerPrint);
+});
+
+Vue.use(VueClipboard);
 Vue.use(ElementUI);
 Vue.use(VueCookies);
 Vue.prototype.$axios = axios;