🚀 集成SSE,解决乱码异常

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

@@ -123,8 +123,6 @@
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useDebounceFn } from '@vueuse/core';
 
-  var source = new EventSource('http://localhost:8080/sse/subscribe?id=yihuihui');
-
   /** 类型规范统一声明定义区域 */
   interface MapState {
     first: boolean;
@@ -170,7 +168,6 @@
   let courierUserMarkerCluster;
   let scanCourierUserCircleRange;
   let driving;
-
   const { t } = useI18n();
   const emit = defineEmits(['success']);
   const userStore = useUserStore();
@@ -466,6 +463,31 @@
       }));
       orgMarkerCluster?.setData(orgPoints);
 
+      // sse长轮询连接获取收样员gps位置
+      if (!!window.EventSource) {
+        // 建立连接
+        const source = new EventSource(mapDesigner.sseUrl);
+
+        source.addEventListener('open', function (e) {
+          console.info(e,'建立连接。。。');
+        }, false);
+
+        source.addEventListener('message', function (e) {
+          source.close();
+          console.info(e);
+        });
+
+        source.addEventListener('error', function (e) {
+          console.info(e);
+        }, false);
+
+      } else {
+        notification.error({
+          message: '你的浏览器不支持SSE',
+          description: '请更换浏览器,在尝试使用此功能!',
+          duration: 2
+        });
+      }
       // 加载完毕
       complete();
     }).catch(error => {

src/settings/componentSetting.ts

@@ -5,6 +5,10 @@
  * @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();
 
 export default {
   // 基本表设置
@@ -50,6 +54,8 @@ export default {
     // 默认中心点
     mapCenter: '112.919043, 28.288623',
     // 默认缩放
-    defaultZoom: 17
+    defaultZoom: 17,
+    // sse后端地址
+    sseUrl: `${apiUrl}/common_proxy/common/mapLogisticSse/subscribe?clientId=${buildUUID()}&accessToken=${getAccessToken()}`
   }
 };