工具库

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: 'john.doe@example.com'
};

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: 'john.updated@example.com'
};

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)
`

` 通用hook示例，放到项目中进行使用 hooklogin.js+index.vue
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








`

水印功能说明

`
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包