🚀 集成SSE,解决乱码异常

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

@@ -122,7 +122,7 @@
   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 { NativeEventSource, EventSourcePolyfill } from 'event-source-polyfill/src/eventsource';
   import { getAccessToken } from '/@/utils/auth';
 
   /** 类型规范统一声明定义区域 */
@@ -466,11 +466,12 @@
       orgMarkerCluster?.setData(orgPoints);
 
       // sse长轮询连接获取收样员gps位置
-      eventSource = new EventSourcePolyfill(mapDesigner.sseUrl, {
+      const EventSource = EventSourcePolyfill;
+      eventSource = new EventSource(mapDesigner.sseUrl, {
         headers: { Authorization: `Bearer ${getAccessToken()}` }
       });
 
-      eventSource.onopen =function (ev) {
+      eventSource.onopen = function (ev) {
         console.info(ev,'建立连接。。。');
       };
 
@@ -491,6 +492,7 @@
   });
 
   onUnmounted(() => {
+    console.log('结束');
     eventSource.close();
     if (map) {
       // 销毁地图实例
@@ -500,6 +502,7 @@
 
   /** 地图创建完成(动画关闭) */
   function complete () {
+    eventSource.close();
     if (map) {
       map.on('complete', () => {
         setMapDataJson(mapProps.options);

src/settings/componentSetting.ts

@@ -5,7 +5,6 @@
  * @create: 2022/4/7
  */
 import type { SorterResult } from '../components/Table';
-import { getAccessToken } from '/@/utils/auth';
 import { buildUUID } from '/@/utils/uuid';
 import { useGlobSetting } from '/@/hooks/setting';
 const { apiUrl } = useGlobSetting();
@@ -56,6 +55,6 @@ export default {
     // 默认缩放
     defaultZoom: 17,
     // sse后端地址
-    sseUrl: `${apiUrl}/common_proxy/common/mapLogisticSse/subscribe?clientId=${buildUUID()}&accessToken=${getAccessToken()}`
+    sseUrl: `${apiUrl}/common_proxy/common/mapLogisticSse/subscribe?clientId=${buildUUID()}}`
   }
 };