封装成一个ws实例

src/App.vue

@@ -5,6 +5,18 @@
 </template>
 
 <script setup lang="ts">
+import { handWs } from '@/utils/handWs'
+/**
+ * 手势
+*/
+const getHandWs = () => {
+  //加载手势WS
+  handWs((e: any) => {
+    // console.log("eeee", e)
+  });
+};
+
+getHandWs()
 </script>
 
 <style scoped></style>

src/utils/deviceWs.ts

@@ -1,45 +0,0 @@
-import io from 'socket.io-client';
-const address: any = import.meta.env.VITE_APP_BASE_API;
-const token: any = localStorage.getItem('token');
-let socket: any = {}; //ws实例对象
-
-export const deviceWs = (callback: any) => {
-  socket = io(address + '/', {
-    transports: ['websocket', 'polling'],
-    query: {
-      Authorization: token
-    }
-  });
-  socket.on('connect', (e: any) => {
-    callback(e);
-  });
-  socket.on('my_response', (e: any) => {
-    callback(e);
-  });
-  socket.on('fe_device_init_result', (e: any) => {
-    callback(e);
-  });
-  socket.on('disconnect', (e: any) => {
-    callback(e);
-  });
-};
-
-export const sendMessage = (type: string, data: any, callback?: () => void) => {
-  if (socket.connected) {
-    callback = callback || function () {};
-    socket.emit(type, data, callback);
-  }
-};
-
-/**
- * 开始连接
- */
-export const startDevice = (data?: any, callback?: any) => {
-  sendMessage(
-    'fe_device_init',
-    {
-      data: data
-    },
-    () => {}
-  );
-};

src/utils/handWs.ts

@@ -1,44 +1,50 @@
 import io from 'socket.io-client';
 const address: any = import.meta.env.VITE_APP_BASE_API;
 const token: any = localStorage.getItem('token');
-let socket: any = {}; //ws实例对象
-
+const deviceid: any = localStorage.getItem('deviceid');
+let socketHand: any = {}; //ws实例对象
+let testConnect: any = {}; //接入成功
+socketHand = io(address + '/', {
+  transports: ['websocket', 'polling'],
+  query: {
+    Authorization: token
+  }
+});
 export const handWs = (callback: any) => {
-  socket = io(address + '/', {
-    transports: ['websocket', 'polling'],
-    query: {
-      Authorization: token
-    }
+  callback(testConnect);
+  socketHand.on('connect', (e: any) => {
+    callback(e);
   });
-  socket.on('connect', (e: any) => {
+  socketHand.on('my_response', (e: any) => {
+    testConnect = e;
     callback(e);
   });
-  socket.on('my_response', (e: any) => {
+  socketHand.on('handcontroller_ack', (e: any) => {
     callback(e);
   });
-  socket.on('handcontroller_ack', (e: any) => {
+  socketHand.on('handcontroller_result', (e: any) => {
     callback(e);
   });
-  socket.on('handcontroller_result', (e: any) => {
+  socketHand.on('device_login_result', (e: any) => {
     callback(e);
   });
-  socket.on('device_login_result', (e: any) => {
+  socketHand.on('fe_device_init_result', (e: any) => {
     callback(e);
   });
-  socket.on('disconnect', (e: any) => {
+  socketHand.on('disconnect', (e: any) => {
     callback(e);
   });
 };
 
 export const sendMessage = (type: string, data: any, callback?: () => void) => {
-  if (socket.connected) {
+  if (socketHand.connected) {
     callback = callback || function () {};
-    socket.emit(type, data, callback);
+    socketHand.emit(type, data, callback);
   }
 };
 
 /**
- * 开始连接
+ * 开始连接手势
  */
 export const startHand = (data?: any, callback?: any) => {
   sendMessage(
@@ -52,7 +58,7 @@ export const startHand = (data?: any, callback?: any) => {
 };
 
 /**
- * 关闭连接
+ * 关闭连接手势
  */
 export const closeHand = (data?: any, callback?: any) => {
   sendMessage(
@@ -66,13 +72,26 @@ export const closeHand = (data?: any, callback?: any) => {
 };
 
 /**
- * 开始连接
+ * 开始连接登录
  */
 export const startLogin = (data?: any, callback?: any) => {
   sendMessage(
     'fe_get_qrlogin',
     {
-      deviceid: ''
+      deviceid: deviceid ? deviceid : ''
+    },
+    () => {}
+  );
+};
+
+/**
+ * 开始连接设备信息
+ */
+export const startDevice = (data?: any, callback?: any) => {
+  sendMessage(
+    'fe_device_init',
+    {
+      data: data
     },
     () => {}
   );

src/utils/ws.ts

@@ -13,7 +13,13 @@ let version: string = ''; //ws接口版本v2表示单ws多项目
 let examStateList: any = []; //当前状态码
 let testList: any = []; //区列表
 let wkList: any = []; //工作站列表
-
+socket = io(address + '/midexam', {
+  transports: ['websocket', 'polling'],
+  query: {
+    Authorization: token,
+    sysuuid: token
+  }
+});
 export const initWs = (data: any, callback: any) => {
   examStateList = []; //当前状态码
   testList = []; //区列表
@@ -32,13 +38,6 @@ export const initWs = (data: any, callback: any) => {
     };
     return obj;
   });
-  socket = io(address + '/midexam', {
-    transports: ['websocket', 'polling'],
-    query: {
-      Authorization: token,
-      sysuuid: token
-    }
-  });
   let loadingTime = setTimeout(() => {
     //30秒还在0状态就算超时
     let list = examStateList.filter((item: any) => {

src/views/course/index.vue

@@ -134,6 +134,7 @@ $waiPadding: 6.51rem;
 
 
   .box {
+    width: 100%;
     background: linear-gradient(64deg, #092941 -85%, #2A484B 96%);
     box-shadow: inset 0px 1px 0px 1px rgba(255, 255, 255, 0.3);
     padding: 20px;

src/views/gesture/index.vue

@@ -26,8 +26,7 @@
 </template>
 
 <script setup name="Gesture" lang="ts">
-import { handWs, startHand, closeHand } from '@/utils/handWs'
-import { deviceWs, startDevice } from '@/utils/deviceWs'
+import { handWs, startHand, closeHand, startDevice } from '@/utils/handWs'
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import { Navigation } from 'swiper/modules';
 import 'swiper/css';
@@ -154,37 +153,6 @@ const confirm = (myProject?: any) => {
 
 };
 
-/**
- * 手势
-*/
-const getHandWs = () => {
-  //加载手势WS
-  handWs((e: any) => {
-    //发送设备
-    if (e?.wksid) {
-      console.log("e.wksid", e.wksid)
-      let handcontroller_id = device_info.value.handcontroller_id;
-      if (handcontroller_id) {
-        startHand(handcontroller_id)
-      } else {
-        proxy?.$modal.msgError("请配置手势ID");
-      }
-    }
-    //左滑动
-    if (e?.data?.result == "next_item") {
-      slideNext();
-    }
-    //举左手
-    if (e?.data?.result == "left_hand") {
-      confirm();
-    }
-    //退出
-    if (e?.data?.result == "exit") {
-
-    }
-  });
-};
-
 /**
  * 模拟发送手势
 */
@@ -227,24 +195,30 @@ const getLogout = () => {
 
 onBeforeMount(() => {
   //加载设备WS
-  deviceWs((e: any) => {
+  handWs((e: any) => {
     //发送设备
     if (e?.wksid) {
-      console.log("e.wksid", e.wksid)
       let deviceid = localStorage.getItem("deviceid");
       startDevice({ deviceid: deviceid })
     }
-    //接收百度语音token
-    if (e?.bdapi_token) {
-      console.log("e.bdapi_token", e.bdapi_token)
-      let tok = e.bdapi_token;
-      localStorage.setItem('tok', tok);
-    }
     //接收参数
     if (e?.device_info) {
       console.log("e.device_info", e.device_info)
       device_info.value = e.device_info
-      getHandWs();
+      let handcontroller_id = device_info.value.handcontroller_id;
+      startHand(handcontroller_id)
+    }
+    //左滑动
+    if (e?.data?.result == "next_item") {
+      slideNext();
+    }
+    //举左手
+    if (e?.data?.result == "left_hand") {
+      confirm();
+    }
+    //退出
+    if (e?.data?.result == "exit") {
+
     }
   });
 })

src/views/login/mobile.vue

@@ -32,9 +32,9 @@ const route = useRoute();
 
 const data = reactive<any>({
   loginForm: {
-    deviceid: '',
-    username: '',
-    password: ''
+    deviceid: '38715692',
+    username: 'manage1',
+    password: 'trops@2022'
   }
 });
 

src/views/login/qrcode.vue

@@ -59,6 +59,12 @@ const getHandWs = () => {
       router.push({ path: '/gesture' });
       getUserInfo();
     }
+    //接收百度语音token
+    if (e?.bdapi_token) {
+      console.log("e.bdapi_token", e.bdapi_token)
+      let tok = e.bdapi_token;
+      localStorage.setItem('tok', tok);
+    }
   });
 };