From 9f635dc5f4b137fda6b6d73af0fdcb40562ac97c Mon Sep 17 00:00:00 2001 From: ktianc <2445667550@qq.com> Date: Wed, 13 Mar 2024 18:57:53 +0800 Subject: [PATCH 1/7] add chat 1 --- kinit-admin/src/components/Chat/index.ts | 3 + kinit-admin/src/components/Chat/src/Chat.vue | 30 ++++++ .../src/layout/components/ToolHeader.vue | 2 + kinit-admin/src/store/modules/chat.ts | 100 ++++++++++++++++++ 4 files changed, 135 insertions(+) create mode 100644 kinit-admin/src/components/Chat/index.ts create mode 100644 kinit-admin/src/components/Chat/src/Chat.vue create mode 100644 kinit-admin/src/store/modules/chat.ts diff --git a/kinit-admin/src/components/Chat/index.ts b/kinit-admin/src/components/Chat/index.ts new file mode 100644 index 0000000..68e1d60 --- /dev/null +++ b/kinit-admin/src/components/Chat/index.ts @@ -0,0 +1,3 @@ +import Chat from './src/Chat.vue' + +export { Chat } diff --git a/kinit-admin/src/components/Chat/src/Chat.vue b/kinit-admin/src/components/Chat/src/Chat.vue new file mode 100644 index 0000000..d29df3b --- /dev/null +++ b/kinit-admin/src/components/Chat/src/Chat.vue @@ -0,0 +1,30 @@ + + + diff --git a/kinit-admin/src/layout/components/ToolHeader.vue b/kinit-admin/src/layout/components/ToolHeader.vue index 6b2479c..8bd05d5 100644 --- a/kinit-admin/src/layout/components/ToolHeader.vue +++ b/kinit-admin/src/layout/components/ToolHeader.vue @@ -5,6 +5,7 @@ import { LocaleDropdown } from '@/components/LocaleDropdown' import { SizeDropdown } from '@/components/SizeDropdown' import { UserInfo } from '@/components/UserInfo' import { Screenfull } from '@/components/Screenfull' +import { Chat } from '@/components/Chat' import { Breadcrumb } from '@/components/Breadcrumb' import { useAppStore } from '@/store/modules/app' import { useDesign } from '@/hooks/web/useDesign' @@ -54,6 +55,7 @@ export default defineComponent({ ) : undefined}
+ {screenfull.value ? ( diff --git a/kinit-admin/src/store/modules/chat.ts b/kinit-admin/src/store/modules/chat.ts new file mode 100644 index 0000000..b98cd3b --- /dev/null +++ b/kinit-admin/src/store/modules/chat.ts @@ -0,0 +1,100 @@ +import { defineStore } from 'pinia' +import { store } from '../index' +import { ref } from 'vue' +import { ElMessage } from 'element-plus' + +interface ChatState { + socket: any + messageQueue: string[] + socketMessage: string +} + +export const useChatStore = defineStore('chat', { + state: (): ChatState => { + return { + socket: null, + messageQueue: [], + socketMessage: '1' + } + }, + getters: {}, + actions: { + SET_SOCKET(socket: any) { + this.socket = socket + }, + SET_SOCKET_MESSAGE(socketMessage: any) { + this.socketMessage = socketMessage + }, + connectWebSocket() { + if (typeof WebSocket === 'undefined') { + ElMessage.error('您的浏览器不支持Websocket通信协议，请使用Chrome或者其他高版本的浏览器！') + return + } + if (this.socket != null && this.socket.readyState === WebSocket.OPEN) { + return this.socket + } + + const HOST_ADDRESS = 'ws://127.0.0.1:8000/api/v1/ws/chat/' + const PING_INTERVAL = 5000 // 心跳间隔，单位为毫秒 + const heartbeatMessage = { type: 0, msg: 'ping' } // 心跳消息 + const heartbeatMessage2 = { type: 0, msg: 'pong', data: ['在线设备'] } // 发送消息 + + const socket = ref(new WebSocket(HOST_ADDRESS)) + let checkTask: any = null + // 监听连接事件 + socket.value.onopen = () => { + // 启动心跳检测 确保连接存活 客户端每隔5秒向服务端发送一次心跳消息 + checkTask = setInterval(() => { + socket.value.send(JSON.stringify(heartbeatMessage)) + }, PING_INTERVAL) + } + + // 当WebSocket接收到服务器发送的消息时，这个函数将被调用。 + socket.value.onmessage = (event) => { + console.log('接收到服务端发送过来的消息', event.data) + const message = JSON.parse(event.data) + console.log(message.type) + if (message.type == WebSocket.CONNECTING) { + socket.value.send(JSON.stringify(heartbeatMessage2)) + return + } else { + if (this.messageQueue.length > 2 << 16) { + this.messageQueue = [] + } + console.log('WebSocket消息: ', message) + this.SET_SOCKET_MESSAGE(message) + } + } + + // 监听关闭事件 断线重连 + socket.value.onclose = () => { + if (this.socket.readyState === WebSocket.CLOSED) { + this.messageQueue.forEach((message) => { + this.sendMessage(message) + }) + this.messageQueue = [] + } + // 清除心跳计时器 + checkTask && clearInterval(checkTask) + // 断线重连 + setTimeout(() => { + this.connectWebSocket() + }, 3000) + } + + // 连接错误 + socket.value.onerror = (event) => { + console.log('WebSocket error:', event) + } + }, + // 发送消息方法 + sendMessage(message: string) { + this.socket.send(message) + } + }, + persist: true +}) + +export const useChatStoreWithOut = () => { + return useChatStore(store) +} From 53a694be367e0b30a1070e9a72476cf01be8db90 Mon Sep 17 00:00:00 2001 From: ktianc <2445667550@qq.com> Date: Fri, 15 Mar 2024 17:39:17 +0800 Subject: [PATCH 2/7] =?UTF-8?q?=E6=9B=B4=E6=96=B01?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- kinit-admin/src/components/Chat/src/Chat.vue | 34 ++++++++++++++++++-- 1 file changed, 31 insertions(+), 3 deletions(-) diff --git a/kinit-admin/src/components/Chat/src/Chat.vue b/kinit-admin/src/components/Chat/src/Chat.vue index d29df3b..7229bf5 100644 --- a/kinit-admin/src/components/Chat/src/Chat.vue +++ b/kinit-admin/src/components/Chat/src/Chat.vue @@ -1,7 +1,7 @@ - - diff --git a/kinit-admin/src/layout/components/ToolHeader.vue b/kinit-admin/src/layout/components/ToolHeader.vue index 8bd05d5..6b2479c 100644 --- a/kinit-admin/src/layout/components/ToolHeader.vue +++ b/kinit-admin/src/layout/components/ToolHeader.vue @@ -5,7 +5,6 @@ import { LocaleDropdown } from '@/components/LocaleDropdown' import { SizeDropdown } from '@/components/SizeDropdown' import { UserInfo } from '@/components/UserInfo' import { Screenfull } from '@/components/Screenfull' -import { Chat } from '@/components/Chat' import { Breadcrumb } from '@/components/Breadcrumb' import { useAppStore } from '@/store/modules/app' import { useDesign } from '@/hooks/web/useDesign' @@ -55,7 +54,6 @@ export default defineComponent({
) : undefined}
- {screenfull.value ? ( diff --git a/kinit-admin/src/store/modules/chat.ts b/kinit-admin/src/store/modules/chat.ts deleted file mode 100644 index b98cd3b..0000000 --- a/kinit-admin/src/store/modules/chat.ts +++ /dev/null @@ -1,100 +0,0 @@ -import { defineStore } from 'pinia' -import { store } from '../index' -import { ref } from 'vue' -import { ElMessage } from 'element-plus' - -interface ChatState { - socket: any - messageQueue: string[] - socketMessage: string -} - -export const useChatStore = defineStore('chat', { - state: (): ChatState => { - return { - socket: null, - messageQueue: [], - socketMessage: '1' - } - }, - getters: {}, - actions: { - SET_SOCKET(socket: any) { - this.socket = socket - }, - SET_SOCKET_MESSAGE(socketMessage: any) { - this.socketMessage = socketMessage - }, - connectWebSocket() { - if (typeof WebSocket === 'undefined') { - ElMessage.error('您的浏览器不支持Websocket通信协议，请使用Chrome或者其他高版本的浏览器！') - return - } - if (this.socket != null && this.socket.readyState === WebSocket.OPEN) { - return this.socket - } - - const HOST_ADDRESS = 'ws://127.0.0.1:8000/api/v1/ws/chat/' - const PING_INTERVAL = 5000 // 心跳间隔，单位为毫秒 - const heartbeatMessage = { type: 0, msg: 'ping' } // 心跳消息 - const heartbeatMessage2 = { type: 0, msg: 'pong', data: ['在线设备'] } // 发送消息 - - const socket = ref(new WebSocket(HOST_ADDRESS)) - let checkTask: any = null - // 监听连接事件 - socket.value.onopen = () => { - // 启动心跳检测 确保连接存活 客户端每隔5秒向服务端发送一次心跳消息 - checkTask = setInterval(() => { - socket.value.send(JSON.stringify(heartbeatMessage)) - }, PING_INTERVAL) - } - - // 当WebSocket接收到服务器发送的消息时，这个函数将被调用。 - socket.value.onmessage = (event) => { - console.log('接收到服务端发送过来的消息', event.data) - const message = JSON.parse(event.data) - console.log(message.type) - if (message.type == WebSocket.CONNECTING) { - socket.value.send(JSON.stringify(heartbeatMessage2)) - return - } else { - if (this.messageQueue.length > 2 << 16) { - this.messageQueue = [] - } - console.log('WebSocket消息: ', message) - this.SET_SOCKET_MESSAGE(message) - } - } - - // 监听关闭事件 断线重连 - socket.value.onclose = () => { - if (this.socket.readyState === WebSocket.CLOSED) { - this.messageQueue.forEach((message) => { - this.sendMessage(message) - }) - this.messageQueue = [] - } - // 清除心跳计时器 - checkTask && clearInterval(checkTask) - // 断线重连 - setTimeout(() => { - this.connectWebSocket() - }, 3000) - } - - // 连接错误 - socket.value.onerror = (event) => { - console.log('WebSocket error:', event) - } - }, - // 发送消息方法 - sendMessage(message: string) { - this.socket.send(message) - } - }, - persist: true -}) - -export const useChatStoreWithOut = () => { - return useChatStore(store) -}