Revert "add chat 1"
This reverts commit 9f635dc5f4b137fda6b6d73af0fdcb40562ac97c.
This commit is contained in:
parent
332e728ca3
commit
7ca8bd3244
@ -1,3 +0,0 @@
|
|||||||
import Chat from './src/Chat.vue'
|
|
||||||
|
|
||||||
export { Chat }
|
|
@ -1,30 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { Icon } from '@/components/Icon'
|
|
||||||
import { propTypes } from '@/utils/propTypes'
|
|
||||||
import { Dialog } from '@/components/Dialog'
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import { useDesign } from '@/hooks/web/useDesign'
|
|
||||||
|
|
||||||
const { getPrefixCls } = useDesign()
|
|
||||||
|
|
||||||
const prefixCls = getPrefixCls('screenfull')
|
|
||||||
|
|
||||||
defineProps({
|
|
||||||
color: propTypes.string.def('')
|
|
||||||
})
|
|
||||||
|
|
||||||
const dialogVisible = ref(false)
|
|
||||||
const dialogTitle = ref('聊天室')
|
|
||||||
|
|
||||||
const toggleFullscreen = () => {
|
|
||||||
dialogVisible.value = true
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div :class="prefixCls" @click="toggleFullscreen">
|
|
||||||
<Icon :size="18" icon="bi:chat-dots" :color="color" />
|
|
||||||
|
|
||||||
<Dialog v-model="dialogVisible" :title="dialogTitle" :height="650"><div></div> </Dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
@ -5,7 +5,6 @@ import { LocaleDropdown } from '@/components/LocaleDropdown'
|
|||||||
import { SizeDropdown } from '@/components/SizeDropdown'
|
import { SizeDropdown } from '@/components/SizeDropdown'
|
||||||
import { UserInfo } from '@/components/UserInfo'
|
import { UserInfo } from '@/components/UserInfo'
|
||||||
import { Screenfull } from '@/components/Screenfull'
|
import { Screenfull } from '@/components/Screenfull'
|
||||||
import { Chat } from '@/components/Chat'
|
|
||||||
import { Breadcrumb } from '@/components/Breadcrumb'
|
import { Breadcrumb } from '@/components/Breadcrumb'
|
||||||
import { useAppStore } from '@/store/modules/app'
|
import { useAppStore } from '@/store/modules/app'
|
||||||
import { useDesign } from '@/hooks/web/useDesign'
|
import { useDesign } from '@/hooks/web/useDesign'
|
||||||
@ -55,7 +54,6 @@ export default defineComponent({
|
|||||||
</div>
|
</div>
|
||||||
) : undefined}
|
) : undefined}
|
||||||
<div class="h-full flex items-center">
|
<div class="h-full flex items-center">
|
||||||
<Chat class="custom-hover" color="var(--top-header-text-color)"></Chat>
|
|
||||||
<SettingV2 class="custom-hover" color="var(--top-header-text-color)"></SettingV2>
|
<SettingV2 class="custom-hover" color="var(--top-header-text-color)"></SettingV2>
|
||||||
{screenfull.value ? (
|
{screenfull.value ? (
|
||||||
<Screenfull class="custom-hover" color="var(--top-header-text-color)"></Screenfull>
|
<Screenfull class="custom-hover" color="var(--top-header-text-color)"></Screenfull>
|
||||||
|
@ -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<WebSocket>(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)
|
|
||||||
}
|
|
Loading…
x
Reference in New Issue
Block a user