工具库

1. mixSocket websocket 工具库
2. bus.js mitt通讯函数库
3. storage.js localStorage工具库
4. sessionstorage.js 工具库

二：indexedDB说明

2.1 打开或者创建数据库

import { openDB } from '@bdsoft/utils'; //

// 打开或者创建数据库
openDB('myDatabase', 'users')
  .then(db => {
    console.log('Database opened successfully');
    // 可以在这里进行其他操作，比如添加或查询数据
  })
  .catch(error => {
    console.error('Error opening database:', error);
  });

2.2 添加数据

import { openDB, addData, closeDB } from '@bdsoft/utils';

// 添加数据
const newUser = {
  id: 1,
  name: 'John Doe',
  email: '[email protected]'
};

openDB('myDatabase', 'users')
  .then(db => {
    return addData(db, 'users', newUser)
      .then(() => {
        console.log('User added successfully');
        closeDB(db); // 关闭数据库
      });
  })
  .catch(error => {
    console.error('Error adding user:', error);
  });

2.3 更新数据

import { openDB, addData, closeDB } from '@bdsoft/utils';
const updatedUser = {
  id: 1,
  name: 'John Updated',
  email: '[email protected]'
};

openDB('myDatabase', 'users')
  .then(db => {
    return updateData(db, 'users', updatedUser)
      .then(success => {
        if (success) {
          console.log('User updated successfully');
        } else {
          console.log('Failed to update user');
        }
        closeDB(db); // 关闭数据库
      });
  })
  .catch(error => {
    console.error('Error updating user:', error);
  });

2.4 查询数据

import { openDB, addData, closeDB } from '@bdsoft/utils';
const userId = 1; // 假设我们知道用户的ID

openDB('myDatabase', 'users')
  .then(db => {
    return getDataByKey(db, 'users', userId)
      .then(user => {
        if (user) {
          console.log('Found user:', user);
        } else {
          console.log('User not found');
        }
        closeDB(db); // 关闭数据库
      });
  })
  .catch(error => {
    console.error('Error getting user by key:', error);
  });

2.5 关闭数据库

import { openDB, addData, closeDB } from '@bdsoft/utils';
openDB('myDatabase', 'users')
  .then(db => {
    // 在这里执行你的数据库操作
    // ...
    closeDB(db); // 完成后关闭数据库
  })
  .catch(error => {
    console.error('Error opening or closing the database:', error);
  });

三：mixSocket 使用说明

支持多连接操作

支持心跳检测

支持连通回调及消息通信

支持断开重连

import { mixSocket,emitter as bus } from '@bdsoft/utils'

//  wsUrl是后端连通的websocket地址
// 参数2是回调函数，代表连通后调用的方法，也可以使用统一bus事件socketOpened来进行接收连通情况
const { sendCommand, initWebsocket } = mixSocket(wsUrl, null) // 发送第一次请求

// 在合适的地方初始化连接如：onMounted等,调用此方法才可走websocket连接流程
initWebsocket()

// 发送指令,参数是json对象，需与后端进行约定
sendCommand(JSON)

import { mixSocket,emitter as bus } from '@bdsoft/utils'
const { sendCommand, initWebsocket } =new mixSocket(wsUrl1, null) 
const { sendCommand:sendCommand2, initWebsocket:initWebsocket2} =new mixSocket(wsUrl2, null) 

import { ref, onMounted, onUnmounted } from 'vue'
import { mixSocket, emitter as bus, useSessionStorage } from '@bdsoft/utils'
import { getTicketAndUser, setCookieKey, getUserInfoByTicket, getUserUnit } from '@/api/newrabbit.js'
import { getUrlKey, showerror, showsuccess } from '@bdsoft/element'

/**
 * 通用的socket连接
 * @param {*} handleWsOpened 
 * @param {*} handleMsgChange 
 * @returns 
 */
export default function useLogin(handleWsOpened, handleMsgChange) {
  // 数据服务地址
  let wsUrl = $bd.wsurl
  const { setSessionStorage, getSessionStorageString, setSessionStorageString } = useSessionStorage('bdqa_2.0')
  const { sendCommand, initWebsocket } = mixSocket(wsUrl, null) // 发送第一次请求
  onMounted(() => {
    let _code = getSessionStorageString('code') || getUrlKey('code')

    if (_code) {
      getTicketAndUser()
        .then((res) => {
          // 存储ticket及用户信息
          setSessionStorageString('ticket', res.ticket)
          setSessionStorageString('code', res.code)
          setSessionStorage('user', res.user)
          setSessionStorageString('userid', res.user.id)

          if (wsUrl.indexOf('ticket') > -1) {
            let ticketIndex = wsUrl.indexOf('ticket=')
            let ticketWithPrefix = wsUrl.substring(0, ticketIndex + 7) // 7 是 'ticket=' 的长度
            wsUrl = ticketWithPrefix + res.ticket
          } else {
            wsUrl += `?ticket=${res.ticket}`
          }
          // 实例化socket

          initWebsocket(wsUrl)
        })
        .catch((err) => {
          console.info(err)
          showerror(`访问错误：${err}`)
        })
    }
    // 第一次连接成功发送问候
    bus.on('socketOpened', handleWsOpened)
    // 接收并发送socket消息 setPlugin
    bus.on('socketmsg', handleMsgChange)
    //
  })

  onUnmounted(() => {
    bus.off('socketOpened', handleWsOpened)
    bus.off('socketmsg', handleMsgChange)
  })

  return {
    sendCommand
  }
}

index.vue

<!--
* @FileDescription:  图表关系
* @Author: 李兵泉
* @Date: 2025-01-20 
* @LastEditors: 最后更新作者
* @LastEditTime: 最后更新时间
-->
<template>
  <div></div>
</template>
<script setup>
import { ref, reactive, computed, watch, onMounted } from 'vue'
import useLogin from '@/views/hooklogin.js'

// 连接成功发送消息
const handleWsOpened = () => {
  sendCommand({
    mark: 'AskGetData', //固定标识
    code: 'KnowledgeMap' //标识
  })
}
const handleMsgChange = (datas) => {
  debugger
}
// 实例化
const { sendCommand } = useLogin(handleWsOpened, handleMsgChange)
</script>

<style lang="scss" scoped></style>

水印功能说明

import { getmark } from '@bdsoft/utils'
const markName = "靶点软件"
// 水印
const { watermark } = getmark()
onMounted(() => {
  watermark(markName) //水印名
})

缓存库 session

可视化中缓存变量的读写（session级，关闭销毁）

import {useSessionStorage } from '@bdsoft/utils'

const { setSessionStorageString, getSessionStorageString } = useSessionStorage('项目名_版本号') // 这里改成自己项目的名称

// 赋值操作 ，注意value可以是任意对象，注意不要传太大 setSessionStorageString('xxx', value)

// 取值操作 ,注意取值可能会比较慢，建议使用async方法中 await取值 await getSessionStorageString('xxx')

20251029新增window-post-message-proxy包