ws同一可行

src/views/web/list/index.vue

@@ -1,4 +1,5 @@
 <template>
+<!--  <el-button @click="state.worker.port.postMessage(JSON.stringify({type: 'send', data: {type: 'return', pp: 123123}}))">调用ws</el-button>-->
   <div class="list">
     <HeadMenu class="list-head">
       <div class="list-head-search">
@@ -228,7 +229,7 @@ import {useAppStore, useDictionaryStore, useThemeStore, useWebStore, useIndexDBS
 import {ElLoading, ElMessage} from "element-plus";
 import {frontGetIndexAndFieldInfo, searchLogsSaveSearchLog} from "@/api/modules/web/list";
 import DetailCom from './detail.vue'
-// import WorkerWebsocket from "@/worker/worker-websocket?sharedworker";
+import WorkerWebsocket from "@/worker/worker-websocket?sharedworker";
 
 const {proxy} = getCurrentInstance()
 const AppStore = useAppStore()
@@ -283,7 +284,8 @@ const state: any = reactive({
   detail: {
     transfer: {},
     show: false
-  }
+  },
+  worker: null
 })
 const ref_area = ref()
 const isSelectAllCpt = computed(() => {
@@ -454,21 +456,259 @@ watch(() => state.resultParams.activeIndex, (n) => {
   }
 })
 const initWS = () => {
-  // const worker = new WorkerWebsocket()
-  // worker.port.onmessage = (e) => {
-  //   const data = JSON.parse(e.data)
-  //   switch (data.type) {
-  //     case 'load': {
-  //       console.log(111)
-  //       worker.port.postMessage(JSON.stringify({type: 'init'}))
-  //     } break
-  //     case 'message': {
-  //       console.log(data.data)
-  //     } break
-  //   }
-  //   console.log(222)
-  //   console.log(e)
-  // }
+  const loading = ElLoading.service({
+    lock: true,
+    text: '搜索服务连接中……',
+    background: ThemeStore.loadingBg
+  })
+  const ws: any = new WebSocket(`ws://${location.host}/ws-api/smart-ws?userId=${AppStore.userInfo.id}`)
+  let sessionId = ''
+  let lastCountParams = ''
+  let lastCountStep = 0
+  let lastCountStep_ = 0
+  let countLoading: any = null
+  let lastListParams = ''
+  let lastDetailParams = ''
+  ws.onopen = (e) => {
+    loading.close()
+    state.ws.loading?.close()
+    state.ws.loading = null
+    state.ws.count = () => {
+      state.ws.countPercent = 0
+      // 如果有的话，终止上一次请求
+      if (lastCountParams) {
+        const p = JSON.parse(lastCountParams)
+        p.flag = 'stop'
+        ws.send(JSON.stringify(p))
+        countLoading?.close()
+        countLoading = null
+      }
+      // 如果有的话，终止上一次请求
+      if (lastListParams) {
+        const p = JSON.parse(lastListParams)
+        p.flag = 'stop'
+        ws.send(JSON.stringify(p))
+        lastListParams = ''
+      }
+      // 执行新的请求
+      let step = 0
+      const builder = state.resultParams.tree.map(tag => ({
+        tagCode: tag.treeId,
+        datas: tag.children.map(type => {
+          step++
+          return {
+            typeCode: type.treeId,
+            datas: type.children.map(index => ({
+              indexCode: index.treeId,
+            }))
+          }
+        })
+      }))
+      lastCountStep = step
+      lastCountStep_ = step
+      const params = {
+        builder: builder,
+        keyData: state.searchParams.text,
+        type: 'count',
+        sessionId: sessionId,
+        timestamp: new Date().getTime(),
+        flag: 'run',
+        orderBy: {}
+      }
+      lastCountParams = JSON.stringify(params)
+      countLoading = ElLoading.service({
+        lock: true,
+        text: '数据查询中',
+        background: useThemeStore().loadingBg,
+      })
+      ws.send(lastCountParams)
+    }
+    state.ws.list = (init = true) => {
+      // 如果有的话，终止上一次请求
+      if (lastListParams) {
+        const p = JSON.parse(lastListParams)
+        p.flag = 'stop'
+        ws.send(JSON.stringify(p))
+        lastListParams = ''
+      }
+      if (init) {
+        state.tableParams = {
+          model: state.tableParams.model,
+          pageNum: 1,
+          pageSize: 10,
+          total: 0,
+          data: [],
+          loading: true
+        }
+      }
+      const params = {
+        keyData: state.searchParams.text,
+        pageNumber: state.tableParams.pageNum,
+        pageSize: state.tableParams.pageSize,
+        indexCode: state.resultParams.activeIndex,
+        type: 'list',
+        sessionId: sessionId,
+        timestamp: new Date().getTime(),
+        flag: 'run',
+        orderBy: {}
+      }
+      lastListParams = JSON.stringify(params)
+      state.tableParams.loading = true
+      ws.send(lastListParams)
+      searchLogsSaveSearchLog({keyword: params.keyData})
+    }
+    state.ws.detail = (esId) => {
+      const params = {
+        indexCode: state.resultParams.activeIndex,
+        id: esId,
+        type: 'detail',
+        sessionId: sessionId,
+        timestamp: new Date().getTime(),
+        flag: 'run',
+        orderBy: {}
+      }
+      lastDetailParams = JSON.stringify(params)
+      ws.send(lastDetailParams)
+      state.ws.loading = ElLoading.service({
+        lock: true,
+        text: '详情信息获取中……',
+        background: ThemeStore.loadingBg,
+      })
+      if (state.ws.loadingTimer) {
+        clearTimeout(state.ws.loadingTimer)
+      }
+      state.ws.loadingTimer = setTimeout(() => {
+        const errorParams = JSON.parse(JSON.stringify(lastDetailParams))
+        errorParams.flag = 'stop'
+        ws.send(errorParams)
+        lastDetailParams = ''
+        ElMessage.error('详情信息获取失败！')
+        state.ws.loading?.close()
+        state.ws.loadingTimer = null
+      }, 10000)
+    }
+  }
+  ws.onmessage = (e) => {
+    try {
+      const json = JSON.parse(e.data)
+      if (json.type === 'session') {
+        sessionId = json.sessionId
+        if (state.cascaderParams.options.length === 0) {
+          initArea()
+        }
+      } else {
+        switch (json.type) {
+          case 'count': {
+            const p = JSON.parse(lastCountParams)
+            // 返回为最新批次的
+            if (json.timestamp == p.timestamp) {
+              countLoading?.close()
+              countLoading = null
+              const resTag = json.datas
+              const resType = resTag.datas[0]
+              state.resultParams.tree.forEach(tag => {
+                if (tag.treeId == resTag.tagCode) {
+                  tag.children.forEach(type => {
+                    if (type.treeId == resType.typeCode) {
+                      resType.datas.forEach((index, indexI) => {
+                        type.children.forEach(v => {
+                          if (v.treeId == index.indexCode) {
+                            v.__count = index.data
+                            type.__count = type.__count ? (type.__count + index.data) : index.data
+                            tag.__count = tag.__count ? (tag.__count + index.data) : index.data
+                          }
+                        })
+                      })
+                      type.children.sort((a, b) => b.__count - a.__count)
+                    }
+                  })
+                }
+              })
+              for (let tagI = 0; tagI < state.resultParams.tree.length; tagI++) {
+                const tag = state.resultParams.tree[tagI]
+                if (tag.__count > 0 && !state.resultParams.activeTab) {
+                  state.resultParams.activeTab = tag.treeId
+                  for (let typeI = 0; typeI < tag.children.length; typeI++) {
+                    const type = tag.children[typeI]
+                    if (type.__count > 0) {
+                      type.__expend = true
+                      for (let indexI = 0; indexI < type.children.length; indexI++) {
+                        const index = type.children[indexI]
+                        if (index.__count > 0 && !state.resultParams.activeIndex) {
+                          state.resultParams.activeIndex = index.treeId
+                          state.resultParams.activeKey = index.__id
+                          break
+                        }
+                      }
+                      break
+                    }
+                  }
+                  break
+                }
+              }
+              lastCountStep--
+              state.ws.countPercent = ((lastCountStep_ - lastCountStep) / lastCountStep_ * 100).toFixed(0)
+              if (lastCountStep === 0) {
+                lastCountParams = ''
+              }
+            }
+          } break
+          case 'list': {
+            const p = JSON.parse(lastListParams)
+            // 返回为最新批次的
+            if (json.timestamp == p.timestamp) {
+              state.tableParams.total = json.records
+              state.tableParams.data = json.datas
+              state.tableParams.loading = false
+              lastListParams = ''
+            }
+          } break
+          case 'detail': {
+            const p = JSON.parse(lastDetailParams)
+            // 返回为最新批次的
+            if (json.timestamp == p.timestamp) {
+              clearTimeout(state.ws.loadingTimer)
+              state.ws.loadingTimer = null
+              state.ws.loading?.close()
+              lastDetailParams = ''
+              state.detail.transfer = {
+                indexName: currentIndexCpt.value.treeName,
+                row: json.datas?.[0],
+                config: tableConfigCpt.value.detailConfig
+              }
+              state.detail.show = true
+            }
+          } break
+        }
+      }
+    } catch (e) {
+
+    }
+  }
+  ws.onclose = function (){
+    state.ws.loading = ElLoading.service({
+      lock: true,
+      text: '智搜服务重新连接中……',
+      background: ThemeStore.loadingBg,
+    })
+    setTimeout(initWS, 5000);
+  }
+  state.ws.instance = ws
+}
+const initWorker = () => {
+  const worker = new WorkerWebsocket()
+  worker.port.onmessage = (e) => {
+    const data = JSON.parse(e.data)
+    switch (data.type) {
+      case 'load': {
+        worker.port.postMessage(JSON.stringify({type: 'init'}))
+      } break
+      case 'message': {
+        console.log(data)
+      } break
+    }
+  }
+  state.worker = worker
   const loading = ElLoading.service({
     lock: true,
     text: '搜索服务连接中……',

src/worker/worker-websocket.js

@@ -8,25 +8,31 @@ self.onconnect = (event) => {
   console.log('哈哈哈')
   const port = event.ports[0]
   ports.push(port)
-  let ws = null
+  console.log(ports)
   port.postMessage(JSON.stringify({type: 'load'}))
   port.onmessage = (e) => {
     const data = JSON.parse(e.data)
     switch (data.type) {
       case 'init': {
-        if (ws) {
+        if (ports[0]?.ws) {
           port.postMessage(JSON.stringify({type: 'ready'}))
+          port.ws = ports[0].ws
         } else {
-          ws = new WebSocket('ws://localhost:18375')
-          ws.onopen = (e) => {
+          port.ws = new WebSocket('ws://localhost:18375')
+          port.ws.onopen = (e) => {
             console.log(4444)
             port.postMessage(JSON.stringify({type: 'ready'}))
           }
-          ws.onmessage = (e) => {
+          port.ws.onmessage = (e) => {
+            console.log(555)
+            console.log(e)
             ports.forEach((p) => p.postMessage(JSON.stringify({type: 'message', data: e.data})))
           }
         }
       } break
+      case 'send': {
+        port.ws?.send(typeof data.data === 'string' ? data.data : JSON.stringify(data.data))
+      } break
     }
   }
 };

src/worker/worker-websocket_demo.js

@@ -0,0 +1,38 @@
+self.window = self;
+window = self;
+
+const ws = null
+const ports = []
+
+self.onconnect = (event) => {
+  console.log('哈哈哈')
+  const port = event.ports[0]
+  ports.push(port)
+  console.log(ports)
+  port.postMessage(JSON.stringify({type: 'load'}))
+  port.onmessage = (e) => {
+    const data = JSON.parse(e.data)
+    switch (data.type) {
+      case 'init': {
+        if (ports[0]?.ws) {
+          port.postMessage(JSON.stringify({type: 'ready'}))
+          port.ws = ports[0].ws
+        } else {
+          port.ws = new WebSocket('ws://localhost:18375')
+          port.ws.onopen = (e) => {
+            console.log(4444)
+            port.postMessage(JSON.stringify({type: 'ready'}))
+          }
+          port.ws.onmessage = (e) => {
+            console.log(555)
+            console.log(e)
+            ports.forEach((p) => p.postMessage(JSON.stringify({type: 'message', data: e.data})))
+          }
+        }
+      } break
+      case 'send': {
+        port.ws?.send(typeof data.data === 'string' ? data.data : JSON.stringify(data.data))
+      } break
+    }
+  }
+};