简柏林 / thingskit-view · Commits

Commit 7a809d5ef6b746793d75e5de3126e2937510842f

Authored by ww
1 parent 1ad0acbe

perf: 实现组件订阅socket消息

Inline Side-by-side
Showing 4 changed files with 29 additions and 17 deletions
@@ -66,8 +66,7 @@ export const useChartDataSocket = () => { @@ -66,8 +66,7 @@ export const useChartDataSocket = () => {
66 66
67 const socketStore = useSocketStore() 67 const socketStore = useSocketStore()
68 68
69 - const initial = (targetComponent: CreateComponentType, useChartEditStore: ChartEditStoreType, updateCallback?: (...args: any) => any) => {  
70 - 69 + const initial = (targetComponent: CreateComponentType, useChartEditStore: ChartEditStoreType, updateCallback?: Fn) => {
71 const { request } = targetComponent 70 const { request } = targetComponent
72 const { requestUrl, requestContentType } = request 71 const { requestUrl, requestContentType } = request
73 72
@@ -75,7 +74,7 @@ export const useChartDataSocket = () => { @@ -75,7 +74,7 @@ export const useChartDataSocket = () => {
75 const { send } = getSocketInstance(request!) 74 const { send } = getSocketInstance(request!)
76 75
77 onMounted(() => { 76 onMounted(() => {
78 - const message = socketStore.subscribe(targetComponent) 77 + const message = socketStore.subscribe(targetComponent, updateCallback)
79 if (!message) return 78 if (!message) return
80 const { subscribeMessage } = message 79 const { subscribeMessage } = message
81 send(JSON.stringify(subscribeMessage)) 80 send(JSON.stringify(subscribeMessage))
@@ -4,7 +4,8 @@ export enum SocketStoreEnum { @@ -4,7 +4,8 @@ export enum SocketStoreEnum {
4 SUBSCRIBE_POOL = 'subscribePool', 4 SUBSCRIBE_POOL = 'subscribePool',
5 CACHE_MESSAGE = 'cacheMessage', 5 CACHE_MESSAGE = 'cacheMessage',
6 CURRENT_SUBSCRIBE_ID = 'currentSubscribeId', 6 CURRENT_SUBSCRIBE_ID = 'currentSubscribeId',
7 - UNSUBSCRIBE_POOL = 'unsubscribePool' 7 + UNSUBSCRIBE_POOL = 'unsubscribePool',
  8 + COMPONENT_UPDATE_FN_POOL = 'componentUpdateFnPool'
8 } 9 }
9 10
10 export interface KeyBoundComponentList { 11 export interface KeyBoundComponentList {
@@ -61,10 +62,15 @@ export interface UnsubscribePoolType { @@ -61,10 +62,15 @@ export interface UnsubscribePoolType {
61 message: SocketSendMessageType 62 message: SocketSendMessageType
62 } 63 }
63 64
  65 +export interface ComponentUpdateFnPoolType {
  66 + [key: string]: Fn
  67 +}
  68 +
64 export interface SocketStoreType { 69 export interface SocketStoreType {
65 [SocketStoreEnum.CONNECTION_POOL]: SocketConnectionPoolType, 70 [SocketStoreEnum.CONNECTION_POOL]: SocketConnectionPoolType,
66 [SocketStoreEnum.SUBSCRIBE_POOL]: SubscribePoolType[], 71 [SocketStoreEnum.SUBSCRIBE_POOL]: SubscribePoolType[],
67 [SocketStoreEnum.CACHE_MESSAGE]: CacheMessageType, 72 [SocketStoreEnum.CACHE_MESSAGE]: CacheMessageType,
68 [SocketStoreEnum.CURRENT_SUBSCRIBE_ID]: number, 73 [SocketStoreEnum.CURRENT_SUBSCRIBE_ID]: number,
69 [SocketStoreEnum.UNSUBSCRIBE_POOL]: UnsubscribePoolType[] 74 [SocketStoreEnum.UNSUBSCRIBE_POOL]: UnsubscribePoolType[]
  75 + [SocketStoreEnum.COMPONENT_UPDATE_FN_POOL]: ComponentUpdateFnPoolType
70 } 76 }
@@ -17,7 +17,8 @@ export const useSocketStore = defineStore({ @@ -17,7 +17,8 @@ export const useSocketStore = defineStore({
17 subscribePool: [], 17 subscribePool: [],
18 cacheMessage: {}, 18 cacheMessage: {},
19 currentSubscribeId: 0, 19 currentSubscribeId: 0,
20 - unsubscribePool: [] 20 + unsubscribePool: [],
  21 + componentUpdateFnPool: {}
21 }), 22 }),
22 getters: { 23 getters: {
23 /** 24 /**
@@ -74,8 +75,8 @@ export const useSocketStore = defineStore({ @@ -74,8 +75,8 @@ export const useSocketStore = defineStore({
74 * 源代码 keys.forEach 75 * 源代码 keys.forEach
75 * 修改代码 const overrideKeys = typeof keys==="string"?[keys]: keys overrideKeys.forEach 76 * 修改代码 const overrideKeys = typeof keys==="string"?[keys]: keys overrideKeys.forEach
76 */ 77 */
77 - const overrideKeys = typeof keys==="string"?[keys]: keys  
78 - 78 + const overrideKeys = typeof keys === "string" ? [keys] : keys
  79 +
79 overrideKeys.forEach(key => { 80 overrideKeys.forEach(key => {
80 Reflect.set(keysRecord, key, [{ componentId }]) 81 Reflect.set(keysRecord, key, [{ componentId }])
81 }) 82 })
@@ -151,12 +152,13 @@ export const useSocketStore = defineStore({ @@ -151,12 +152,13 @@ export const useSocketStore = defineStore({
151 * @description 订阅 152 * @description 订阅
152 * @param targetComponent 153 * @param targetComponent
153 */ 154 */
154 - subscribe(targetComponent: CreateComponentType) { 155 + subscribe(targetComponent: CreateComponentType, updateCallback?: Fn) {
155 const { id: componentId, request } = targetComponent 156 const { id: componentId, request } = targetComponent
156 const { requestContentType, requestParams } = request 157 const { requestContentType, requestParams } = request
157 if ((requestContentType as RequestContentTypeEnum) === RequestContentTypeEnum.WEB_SOCKET) { 158 if ((requestContentType as RequestContentTypeEnum) === RequestContentTypeEnum.WEB_SOCKET) {
158 const { Params } = requestParams 159 const { Params } = requestParams
159 const { entityId = '', keys = [] } = Params 160 const { entityId = '', keys = [] } = Params
  161 + updateCallback && (this.componentUpdateFnPool[componentId] = updateCallback)
160 return this.updateConnectionPool(entityId, keys as string[], componentId) 162 return this.updateConnectionPool(entityId, keys as string[], componentId)
161 } 163 }
162 }, 164 },
@@ -184,17 +186,17 @@ export const useSocketStore = defineStore({ @@ -184,17 +186,17 @@ export const useSocketStore = defineStore({
184 */ 186 */
185 getNeedUpdateComponentsIdBySubscribeId(subscribeId: number, keys: string[]) { 187 getNeedUpdateComponentsIdBySubscribeId(subscribeId: number, keys: string[]) {
186 const entityId = this.subscribePool.find(item => item.subscribeId === subscribeId)?.entityId 188 const entityId = this.subscribePool.find(item => item.subscribeId === subscribeId)?.entityId
187 - /**这里修改自定义tab切换传的单个属性问题  
188 - * ft  
189 - * 源代码 keys.map(key => keysRecord[key])  
190 - * 修改代码 const overrideKeys = typeof keys==="string"?[keys]: keys overrideKeys.map(key => keysRecord[key])  
191 - */  
192 - const overrideKeys = typeof keys==="string"?[keys]: keys 189 + /**这里修改自定义tab切换传的单个属性问题
  190 + * ft
  191 + * 源代码 keys.map(key => keysRecord[key])
  192 + * 修改代码 const overrideKeys = typeof keys==="string"?[keys]: keys overrideKeys.map(key => keysRecord[key])
  193 + */
  194 + const overrideKeys = typeof keys === "string" ? [keys] : keys
193 195
194 if (entityId) { 196 if (entityId) {
195 const keysRecord = Reflect.get(this.connectionPool, entityId) 197 const keysRecord = Reflect.get(this.connectionPool, entityId)
196 const needUpdateComponents = overrideKeys.map(key => keysRecord[key]) 198 const needUpdateComponents = overrideKeys.map(key => keysRecord[key])
197 - const ids = needUpdateComponents 199 + const ids: string[] = needUpdateComponents
198 .reduce((prev, next) => [...prev, ...next], []) 200 .reduce((prev, next) => [...prev, ...next], [])
199 .map((item: KeyBoundComponentList) => item.componentId) 201 .map((item: KeyBoundComponentList) => item.componentId)
200 return [...new Set(ids)] 202 return [...new Set(ids)]
@@ -217,7 +219,7 @@ export const useSocketStore = defineStore({ @@ -217,7 +219,7 @@ export const useSocketStore = defineStore({
217 * 源代码 keys as unknown as string[] 219 * 源代码 keys as unknown as string[]
218 * 修改代码 const overrideKeys = typeof keys==="string"?[keys]: keys overrideKeys as unknown as string[] 220 * 修改代码 const overrideKeys = typeof keys==="string"?[keys]: keys overrideKeys as unknown as string[]
219 */ 221 */
220 - const overrideKeys = typeof keys==="string"?[keys]: keys 222 + const overrideKeys = typeof keys === "string" ? [keys] : keys
221 223
222 const targetComponentBindKeys = overrideKeys as unknown as string[] 224 const targetComponentBindKeys = overrideKeys as unknown as string[]
223 //ft 225 //ft
@@ -261,6 +263,12 @@ export const useSocketStore = defineStore({ @@ -261,6 +263,12 @@ export const useSocketStore = defineStore({
261 const keys = Object.keys(data) 263 const keys = Object.keys(data)
262 const componentIds = this.getNeedUpdateComponentsIdBySubscribeId(subscriptionId, keys) 264 const componentIds = this.getNeedUpdateComponentsIdBySubscribeId(subscriptionId, keys)
263 componentIds?.forEach((targetComponentId) => { 265 componentIds?.forEach((targetComponentId) => {
  266 + const fn = this.componentUpdateFnPool[targetComponentId]
  267 + try {
  268 + fn?.(value)
  269 + } catch (error) {
  270 + throw `componentIds: ${componentIds} call update function happend error!`
  271 + }
264 this.updateComponentById(targetComponentId as string, value) 272 this.updateComponentById(targetComponentId as string, value)
265 }) 273 })
266 }, 274 },
@@ -115,7 +115,6 @@ watch( @@ -115,7 +115,6 @@ watch(
115 } 115 }
116 setSelectOptions(packages.categorys) 116 setSelectOptions(packages.categorys)
117 byKeyhideAside(hideAsideComponentsObj, packages.categorys) 117 byKeyhideAside(hideAsideComponentsObj, packages.categorys)
118 - console.log(packages.categorys)  
119 // 默认选中处理 118 // 默认选中处理
120 selectValue.value = packages.menuOptions[0]['key'] 119 selectValue.value = packages.menuOptions[0]['key']
121 }, 120 },