websocket连接

.env.development

@@ -16,4 +16,5 @@ VITE_ENABLE_ERUDA = "false"
 # 线上环境平台打包路径
 VITE_PUBLIC_PATH = /yjxp/
 
-VITE_APP_PORT = 8086
+VITE_APP_PORT = 8086
+VITE_APP_BASE_WEBSOCKET= 'ws://10.181.7.236:9988'

.env.production

@@ -15,4 +15,5 @@ VITE_PUBLIC_PATH = "/yjxp/"
 # 生产环境是否启用 cdn
 VITE_CDN_DEPS = "false"
 
-VITE_APP_PORT = 8086
+VITE_APP_PORT = 8086
+VITE_APP_BASE_WEBSOCKET= 'ws://10.181.7.236:9988'

src/api/globalMap/onlinePlotting.ts

@@ -32,7 +32,7 @@ export const updatePatternInfo = (data) => {
   });
 };
 
-// 预案更新
+// 创建预案
 export const createPattern = (data) => {
   return request({
     url: '/api/pattern/create',
@@ -40,3 +40,21 @@ export const createPattern = (data) => {
     data: data
   });
 };
+
+// 创建预案
+export const getPatternList2 = (params) => {
+  return request({
+    url: '/api/pattern/ws/list',
+    method: 'get',
+    params: params
+  });
+};
+
+// 创建预案
+export const startCollaboration = (data) => {
+  return request({
+    url: '/api/pattern/ws/add_user',
+    method: 'post',
+    data: data
+  });
+};

src/utils/websocket.ts

@@ -0,0 +1,144 @@
+import { getToken } from '@/utils/auth';
+
+let webSock = null;
+let connectState = false; // 标记 WebSocket 连接状态
+let rec; //断线重连后，延迟5秒重新创建WebSocket连接  rec用来存储延迟请求的代码
+let closeFlag = false; // 是否关闭socket
+let global_callback = null;
+
+const wsUrl = `${import.meta.env.VITE_APP_BASE_WEBSOCKET}/api/pattern/`;
+function createWebSocket(id, callback) {
+  if (webSock != null) {
+    return;
+  }
+  debugger
+  webSock = new WebSocket(wsUrl + id + '/ws');
+
+  global_callback = callback;
+
+  webSock.onopen = function () {
+    // 连接打开时的处理
+    websocketOpen();
+  };
+
+  webSock.onmessage = function (e) {
+    // 接收消息时的处理
+    websocketOnMessage(e);
+  };
+  webSock.onclose = function (e) {
+    // 连接关闭时的处理
+    websocketClose(e);
+  };
+
+  // 连接发生错误的回调方法
+  webSock.onerror = function () {
+    websocketError();
+  };
+
+  return webSock;
+}
+
+//心跳设置
+const heartCheck = {
+  timeout: 30000, //每段时间发送一次心跳包 这里设置为20s
+  timeoutObj: null, //延时发送消息对象（启动心跳新建这个对象，收到消息后重置对象）
+
+  start: function () {
+    this.timeoutObj = setInterval(function () {
+      if (connectState) webSock.send(JSON.stringify({ type: 0 }));
+    }, this.timeout);
+  },
+
+  reset: function () {
+    clearTimeout(this.timeoutObj);
+    this.start();
+  }
+};
+
+//定义重连函数
+const reConnect = () => {
+  console.log('尝试重新连接');
+  if (connectState) return; //如果已经连上就不在重连了
+  rec && clearTimeout(rec);
+  rec = setTimeout(function () {
+    // 延迟5秒重连  避免过多次过频繁请求重连
+    if (!connectState) {
+      createWebSocket();
+    }
+  }, 5000);
+};
+
+// 实际调用的方法
+function sendSock(agentData) {
+  if (webSock.readyState === webSock.OPEN) {
+    // 若是ws开启状态
+    webSock.send(agentData);
+  } else if (webSock.readyState === webSock.CONNECTING) {
+    // 若是 正在开启状态，则等待1s后重新调用
+    setTimeout(function () {
+      sendSock(agentData);
+    }, 1000);
+  } else {
+    // 若未开启 ，则等待1s后重新调用
+    setTimeout(function () {
+      sendSock(agentData);
+    }, 1000);
+  }
+}
+
+function websocketClose() {
+  connectState = false;
+  webSock = null;
+  global_callback = null;
+  closeFlag = false;
+  heartCheck.timeoutObj && clearTimeout(heartCheck.timeoutObj);
+  // 清除重连定时器
+  rec && clearTimeout(rec);
+}
+
+// 数据接收
+function websocketOnMessage(msg) {
+  if (!msg || !msg.data) {
+    // 可能得情况 - 心跳机制、无关信息接收
+    console.log('收到数据：空消息');
+    return;
+  }
+  console.log(msg);
+  // 收到信息为Blob类型时
+  const result = JSON.parse(msg.data);
+  if (result.type === 0 || result.type === '0') {
+    //自己的业务
+  } else {
+    global_callback(result);
+  }
+}
+
+function closeSock({ activeClose = false }) {
+  closeFlag = activeClose;
+  // 清除心跳定时器
+  heartCheck.timeoutObj && clearTimeout(heartCheck.timeoutObj);
+  // 清除重连定时器
+  rec && clearTimeout(rec);
+  if (closeFlag) {
+    // 关闭socket
+    webSock.close();
+  }
+  // 初始化相关变量
+  webSock = null;
+  connectState = false;
+}
+
+const websocketError = () => {
+  closeSock({ activeClose: true });
+  // 执行重连
+  reConnect();
+};
+
+function websocketOpen() {
+  debugger
+  webSock.send('Authorization: Bearer ' + getToken());
+  connectState = true;
+  heartCheck.start(); //发送心跳 看个人项目需求
+}
+
+export { sendSock, createWebSocket, closeSock };

src/views/mobileControl/index.vue

@@ -126,6 +126,7 @@
     <van-popup v-model:show="showOnlinePlotting" round position="bottom">
       <van-picker
           :columns="columns"
+          :columns-field-names="{text: 'pattern_name', value: 'pattern_id'}"
           title="请选择协同标绘的预案"
           @cancel="onCancel"
           @confirm="onConfirm"
@@ -150,6 +151,8 @@ import { closeEvent, getEventDetail } from "@/api/event";
 import LayerBox from "./LayerBox.vue";
 import OnlinePlotting from "./OnlinePlotting/index.vue";
 import MaterialManage from "@/views/mobileControl/MaterialManage.vue";
+import {getPatternList2, startCollaboration} from "@/api/globalMap/onlinePlotting";
+import {createWebSocket} from "@/utils/websocket";
 
 const router = useRouter();
 const route = useRoute();
@@ -308,17 +311,19 @@ const closeOnlinePlotting = () => {
   onlinePlottingId.value = '';
 }
 const getOnlinePlotting = () => {
-  columns.value = [
-    { text: '演练1', value: '1' },
-    { text: '演练2', value: '2' },
-    { text: '演练3', value: '3' },
-  ]
+  getPatternList2({ page: 1, pageSize: 1000 }).then((res) => {
+    columns.value = res.data;
+  })
 }
 const onCancel = () => {
   showOnlinePlotting.value = false;
 }
+const getWebSocketData = (data) => {
+  console.log('接收数据', data);
+};
 const onConfirm = (data) => {
   onlinePlottingId.value = data.selectedValues[0]
+  createWebSocket(onlinePlottingId.value, getWebSocketData);
   showOnlinePlotting.value = false;
   showOnlinePlotting2.value = true;
 }