|
|
@@ -1,80 +1,112 @@
|
|
|
-import { defineStore } from 'pinia'
|
|
|
-import { useStorage } from '@vueuse/core'
|
|
|
-import { skipHydrate } from 'pinia'
|
|
|
-// const userInfoStore = useUserInfoStore()
|
|
|
-// const { userInfo } = storeToRefs(userInfoStore)
|
|
|
-// userInfoStore.getUserInfo()
|
|
|
export const useChatStore = defineStore('chat', () => {
|
|
|
- const startUrl = ref('wss://your-websocket-url')
|
|
|
+ const config = useRuntimeConfig()
|
|
|
+ const baseIM = config.public.baseIM
|
|
|
|
|
|
- const message = ref(null)
|
|
|
+ const isConnect = ref(false)
|
|
|
+ // 连接状态 0: 未连接 1: 连接中 2: 已连接 3: 已断开
|
|
|
+ const connectSta = ref(0)
|
|
|
|
|
|
- // WebSocket 服务的实例
|
|
|
- const wsService = ref(null)
|
|
|
+ const receive = ref([])
|
|
|
+ const receiveGetter = computed(() => receive.value)
|
|
|
+ const onNewMessage = ref(Date.now())
|
|
|
|
|
|
- // 使用 `useStorage` 来持久化 WebSocket 的连接状态
|
|
|
- const isConnected = useStorage('isConnected', false)
|
|
|
+ // 当前会话
|
|
|
+ const curConversiton = ref({})
|
|
|
|
|
|
- // 连接 WebSocket
|
|
|
- const connect = (url) => {
|
|
|
- if (wsService.value) {
|
|
|
- // 如果 WebSocket 已连接，不需要重新连接
|
|
|
- return
|
|
|
- }
|
|
|
+ // 创建webboteSocket连接
|
|
|
+ const ws = ref(null)
|
|
|
+ function createConnection(token) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ if (connectSta.value == 2) {
|
|
|
+ console.log('连接已存在,请不要重复连接')
|
|
|
+ reject('连接已存在,请不要重复连接')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ console.log('创建连接')
|
|
|
+ connectSta.value = 1
|
|
|
+ ws.value = new WebSocket(baseIM + '?token=' + token)
|
|
|
|
|
|
- wsService.value = new WebSocket(`${startUrl.value}${url}`)
|
|
|
+ ws.value.onopen = () => {
|
|
|
+ console.log('聊天连接成功')
|
|
|
+ isConnect.value = true
|
|
|
+ connectSta.value = 2
|
|
|
+ resolve()
|
|
|
+ }
|
|
|
|
|
|
- wsService.value.connect()
|
|
|
+ ws.value.onmessage = (e) => {
|
|
|
+ onNewMessage.value = Date.now() + '' + Math.random() * 10000
|
|
|
+ reqChatList()
|
|
|
+ try {
|
|
|
+ const messageBody = JSON.parse(e.data)
|
|
|
+ console.log('messageBody:', messageBody)
|
|
|
+ console.log('curConversiton:', curConversiton)
|
|
|
+ // 判断该条消息是否属于当前会话
|
|
|
+ if (messageBody.groupId == curConversiton.value.groupId) {
|
|
|
+ let isReceive = true // 判断该条消息是收到的还是发出的
|
|
|
|
|
|
- // 当连接成功时
|
|
|
- wsService.value.onopen = () => {
|
|
|
- isConnected.value = true
|
|
|
- console.log('WebSocket连接已打开')
|
|
|
- }
|
|
|
+ for (let i = 0; i < receive.value.length; i++) {
|
|
|
+ if (receive.value[i]?.object?.id == messageBody?.object?.id) {
|
|
|
+ //如果是发出的消息，则设置消息的发送成功状态
|
|
|
+ messageBody.sendSuccess = true
|
|
|
+ receive.value[i] = messageBody
|
|
|
+ isReceive = false
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- // 当连接关闭时
|
|
|
- wsService.value.onclose = () => {
|
|
|
- isConnected.value = false
|
|
|
- console.log('WebSocket连接已关闭')
|
|
|
- }
|
|
|
-
|
|
|
- // 监听错误事件
|
|
|
- wsService.value.onerror = (error) => {
|
|
|
- console.error('WebSocket错误:', error)
|
|
|
- isConnected.value = false
|
|
|
- }
|
|
|
+ // 如果是收到的消息,则将消息push到receive数组中
|
|
|
+ if (isReceive) {
|
|
|
+ receive.value.push(messageBody)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.log('消息解析出错：：', error)
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- // 监听消息
|
|
|
- wsService.value.onMessage((message) => {
|
|
|
- console.log('收到消息:', message)
|
|
|
+ ws.value.onclose = () => {
|
|
|
+ console.log('聊天连接已关闭')
|
|
|
+ isConnect.value = false
|
|
|
+ connectSta.value = 3
|
|
|
+ }
|
|
|
})
|
|
|
}
|
|
|
|
|
|
- // 发送消息
|
|
|
- const sendMessage = (message) => {
|
|
|
- if (wsService.value && wsService.value.readyState === WebSocket.OPEN) {
|
|
|
- wsService.value.sendMessage(message)
|
|
|
- } else {
|
|
|
- console.error('WebSocket未连接，无法发送消息')
|
|
|
- }
|
|
|
- }
|
|
|
+ // const curConversiton = computed(()=>conversiton.value)
|
|
|
|
|
|
- // 断开 WebSocket 连接
|
|
|
- const disconnect = () => {
|
|
|
- if (wsService.value) {
|
|
|
- wsService.value.close()
|
|
|
- wsService.value = null
|
|
|
- isConnected.value = false
|
|
|
- console.log('WebSocket已关闭')
|
|
|
+ // 会话列表
|
|
|
+ const chatList = ref([])
|
|
|
+ const conversations = computed(() => chatList.value)
|
|
|
+ // 请求聊天会话列表
|
|
|
+ async function reqChatList() {
|
|
|
+ console.log('请求聊天会话列表')
|
|
|
+ const { data } = await request('/website/tourism/fans/getTourMemberList')
|
|
|
+ const { list } = data || {}
|
|
|
+ if (Array.isArray(list)) {
|
|
|
+ chatList.value = list
|
|
|
}
|
|
|
+ console.log('会话列表：', data)
|
|
|
+ console.log('fuck:', receive.value)
|
|
|
}
|
|
|
|
|
|
- // 返回 Pinia store 中的数据和方法
|
|
|
+ const messages = ref('first message')
|
|
|
+
|
|
|
+ // 当前登录用户信息
|
|
|
+ const user = ref({})
|
|
|
+
|
|
|
return {
|
|
|
- isConnected: skipHydrate(isConnected), // 保证在服务器端渲染时不与客户端同步
|
|
|
- wsService,
|
|
|
- connect,
|
|
|
- sendMessage,
|
|
|
- disconnect
|
|
|
+ messages,
|
|
|
+ reqChatList,
|
|
|
+ createConnection,
|
|
|
+ ws,
|
|
|
+ conversations,
|
|
|
+ curConversiton,
|
|
|
+ receive,
|
|
|
+ receiveGetter,
|
|
|
+ user,
|
|
|
+ chatList,
|
|
|
+ isConnect,
|
|
|
+ connectSta,
|
|
|
+ onNewMessage
|
|
|
}
|
|
|
})
|
