🚀 集成SSE,解决乱码异常

package.json

@@ -33,6 +33,7 @@
     "cropperjs": "1.5.12",
     "crypto-js": "4.1.1",
     "echarts": "5.2.0",
+    "event-source-polyfill": "^1.0.31",
     "js-base64": "3.6.1",
     "lodash-es": "4.17.21",
     "nprogress": "0.2.0",

src/components/AMap/src/AMapDesigner/index.vue

@@ -122,6 +122,8 @@
   import { isArray, isString } from '/@/utils/is';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useDebounceFn } from '@vueuse/core';
+  import { EventSourcePolyfill } from 'event-source-polyfill/src/eventsource';
+  import { getAccessToken } from '/@/utils/auth';
 
   /** 类型规范统一声明定义区域 */
   interface MapState {
@@ -168,6 +170,7 @@
   let courierUserMarkerCluster;
   let scanCourierUserCircleRange;
   let driving;
+  let eventSource;
   const { t } = useI18n();
   const emit = defineEmits(['success']);
   const userStore = useUserStore();
@@ -228,7 +231,6 @@
       ]
     }
   });
-
   const AForm = Form;
   const AFormItem = Form.Item;
   const ASelect = Select;
@@ -464,30 +466,22 @@
       orgMarkerCluster?.setData(orgPoints);
 
       // sse长轮询连接获取收样员gps位置
-      if (!!window.EventSource) {
-        // 建立连接
-        const source = new EventSource(mapDesigner.sseUrl);
+      eventSource = new EventSourcePolyfill(mapDesigner.sseUrl, {
+        headers: { Authorization: `Bearer ${getAccessToken()}` }
+      });
 
-        source.addEventListener('open', function (e) {
-          console.info(e,'建立连接。。。');
-        }, false);
+      eventSource.onopen =function (ev) {
+        console.info(ev,'建立连接。。。');
+      };
 
-        source.addEventListener('message', function (e) {
-          source.close();
-          console.info(e);
-        });
+      eventSource.onmessage = function (ev) {
+        console.info(ev);
+      };
 
-        source.addEventListener('error', function (e) {
-          console.info(e);
-        }, false);
+      eventSource.onerror = function (ev) {
+        console.info(ev);
+      };
 
-      } else {
-        notification.error({
-          message: '你的浏览器不支持SSE',
-          description: '请更换浏览器,在尝试使用此功能!',
-          duration: 2
-        });
-      }
       // 加载完毕
       complete();
     }).catch(error => {
@@ -497,6 +491,7 @@
   });
 
   onUnmounted(() => {
+    eventSource.close();
     if (map) {
       // 销毁地图实例
       map.destroy() && map.clearEvents();

yarn.lock

@@ -3927,6 +3927,11 @@ etag@^1.8.1:
   resolved "https://registry.npmmirror.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
   integrity sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==
 
+event-source-polyfill@^1.0.31:
+  version "1.0.31"
+  resolved "https://registry.yarnpkg.com/event-source-polyfill/-/event-source-polyfill-1.0.31.tgz#45fb0a6fc1375b2ba597361ba4287ffec5bf2e0c"
+  integrity sha512-4IJSItgS/41IxN5UVAVuAyczwZF7ZIEsM1XAoUzIHA6A+xzusEZUutdXz2Nr+MQPLxfTiCvqE79/C8HT8fKFvA==
+
 exec-buffer@^3.0.0:
   version "3.2.0"
   resolved "https://registry.npmmirror.com/exec-buffer/-/exec-buffer-3.2.0.tgz#b1686dbd904c7cf982e652c1f5a79b1e5573082b"