修改:接收 websocket 连接和获取消息列表
This commit is contained in:
parent
ba23309f14
commit
294fb80b05
@ -1,7 +1,12 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Dialog } from '@/components/Dialog'
|
import { Dialog } from '@/components/Dialog'
|
||||||
import { shallowRef, defineAsyncComponent, DefineComponent } from 'vue'
|
import { shallowRef, defineAsyncComponent, DefineComponent } from 'vue'
|
||||||
import { webSocketStore } from '@/store/modules/webSocketStore'
|
import { getAccessToken } from '@/utils/auth'
|
||||||
|
import { useWebSocket } from '@vueuse/core'
|
||||||
|
import { imMessageStore, ImMessageWebSocket } from '@/store/modules/imMessageStore'
|
||||||
|
|
||||||
|
// 从 imMessageStore 中导入 addMessage 方法
|
||||||
|
const { addMessage } = imMessageStore()
|
||||||
|
|
||||||
// 异步加载可能的对话框内容组件
|
// 异步加载可能的对话框内容组件
|
||||||
const IMComponent = defineAsyncComponent(() => import('@/views/im/index.vue'))
|
const IMComponent = defineAsyncComponent(() => import('@/views/im/index.vue'))
|
||||||
@ -14,11 +19,61 @@ function openDialog() {
|
|||||||
dialogVisible.value = true
|
dialogVisible.value = true
|
||||||
currentComponent.value = IMComponent // 加载 IM 组件
|
currentComponent.value = IMComponent // 加载 IM 组件
|
||||||
}
|
}
|
||||||
// 登录成功后初始化 WebSocket 连接
|
|
||||||
const { status, data, initWebSocket } = webSocketStore()
|
|
||||||
|
|
||||||
/** 监听接收到的数据 */
|
// 初始化 WebSocket 连接
|
||||||
const messageList = ref([] as { time: number; text: string }[]) // 消息列表
|
function initWebSocket() {
|
||||||
|
const server =
|
||||||
|
(import.meta.env.VITE_BASE_URL + '/infra/ws').replace('http', 'ws') +
|
||||||
|
'?token=' +
|
||||||
|
getAccessToken()
|
||||||
|
const { data } = useWebSocket(server, {
|
||||||
|
autoReconnect: true,
|
||||||
|
heartbeat: true,
|
||||||
|
onMessage(ws, event) {
|
||||||
|
// ws 状态不是 open 时不处理
|
||||||
|
if (ws.readyState !== WebSocket.OPEN) return
|
||||||
|
try {
|
||||||
|
// 1. 收到心跳
|
||||||
|
if (data.value === 'pong') {
|
||||||
|
console.log('websocket 收到心跳包')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
console.log('websocket 收到消息', event.data)
|
||||||
|
// 2.1 解析 type 消息类型
|
||||||
|
const jsonMessage = JSON.parse(data.value)
|
||||||
|
const type = jsonMessage.type
|
||||||
|
const content = JSON.parse(jsonMessage.content)
|
||||||
|
if (!type) {
|
||||||
|
// message.error('未知的消息类型:' + data.value)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// 2.2 消息类型:demo-message-receive
|
||||||
|
if (type === 'im-message-receive') {
|
||||||
|
const message: ImMessageWebSocket = {
|
||||||
|
id: content.id,
|
||||||
|
conversationType: content.conversationType,
|
||||||
|
senderId: content.senderId,
|
||||||
|
senderNickname: content.senderNickname,
|
||||||
|
senderAvatar: content.senderAvatar,
|
||||||
|
receiverId: content.receiverId,
|
||||||
|
contentType: content.contentType,
|
||||||
|
content: content.content,
|
||||||
|
sendTime: content.sendTime,
|
||||||
|
sequence: content.sequence
|
||||||
|
}
|
||||||
|
|
||||||
|
// 保存到 pina imMessageStore
|
||||||
|
addMessage(message)
|
||||||
|
|
||||||
|
return
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
console.log('websocket 初始化成功')
|
||||||
|
}
|
||||||
|
|
||||||
// ========== 初始化 =========
|
// ========== 初始化 =========
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
@ -18,9 +18,18 @@ export const imMessageStore = defineStore({
|
|||||||
state: () => ({
|
state: () => ({
|
||||||
messages: [] as ImMessageWebSocket[]
|
messages: [] as ImMessageWebSocket[]
|
||||||
}),
|
}),
|
||||||
|
getters: {
|
||||||
|
getMessages(): ImMessageWebSocket[] {
|
||||||
|
return this.messages
|
||||||
|
}
|
||||||
|
},
|
||||||
actions: {
|
actions: {
|
||||||
addMessage(message: ImMessageWebSocket) {
|
addMessage(message: ImMessageWebSocket) {
|
||||||
this.messages.push(message)
|
this.messages.push(message)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
export function useImMessageStore() {
|
||||||
|
return imMessageStore()
|
||||||
|
}
|
||||||
|
@ -1,81 +0,0 @@
|
|||||||
import { defineStore } from 'pinia'
|
|
||||||
import { useWebSocket, WebSocketStatus } from '@vueuse/core'
|
|
||||||
import { getAccessToken } from '@/utils/auth'
|
|
||||||
import { imMessageStore, ImMessageWebSocket } from './imMessageStore'
|
|
||||||
|
|
||||||
// 从 imMessageStore 中导入 addMessage 方法
|
|
||||||
const { addMessage } = imMessageStore()
|
|
||||||
export const webSocketStore = defineStore({
|
|
||||||
id: 'websocket',
|
|
||||||
state: () => ({
|
|
||||||
data: ref(null) as any,
|
|
||||||
status: ref<WebSocketStatus> as any,
|
|
||||||
close: null as ((code?: number | undefined, reason?: string | undefined) => void) | null,
|
|
||||||
open: null as (() => void) | null,
|
|
||||||
send: null as
|
|
||||||
| ((data: string | ArrayBuffer | Blob, useBuffer?: boolean | undefined) => boolean)
|
|
||||||
| null,
|
|
||||||
pingInterval: null as NodeJS.Timeout | null
|
|
||||||
}),
|
|
||||||
actions: {
|
|
||||||
initWebSocket() {
|
|
||||||
const server =
|
|
||||||
(import.meta.env.VITE_BASE_URL + '/infra/ws').replace('http', 'ws') +
|
|
||||||
'?token=' +
|
|
||||||
getAccessToken(),
|
|
||||||
{ data, status, close, open, send } = useWebSocket(server, {
|
|
||||||
autoReconnect: true,
|
|
||||||
heartbeat: true,
|
|
||||||
onMessage(ws, event) {
|
|
||||||
// ws 状态不是 open 时不处理
|
|
||||||
if (ws.readyState !== WebSocket.OPEN) return
|
|
||||||
try {
|
|
||||||
// 1. 收到心跳
|
|
||||||
if (data.value === 'pong') {
|
|
||||||
console.log('websocket 收到心跳包')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
console.log('websocket 收到消息', event.data)
|
|
||||||
// 2.1 解析 type 消息类型
|
|
||||||
const jsonMessage = JSON.parse(data.value)
|
|
||||||
const type = jsonMessage.type
|
|
||||||
const content = JSON.parse(jsonMessage.content)
|
|
||||||
if (!type) {
|
|
||||||
// message.error('未知的消息类型:' + data.value)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// 2.2 消息类型:demo-message-receive
|
|
||||||
if (type === 'im-message-receive') {
|
|
||||||
const message: ImMessageWebSocket = {
|
|
||||||
id: content.id,
|
|
||||||
conversationType: content.conversationType,
|
|
||||||
senderId: content.senderId,
|
|
||||||
senderNickname: content.senderNickname,
|
|
||||||
senderAvatar: content.senderAvatar,
|
|
||||||
receiverId: content.receiverId,
|
|
||||||
contentType: content.contentType,
|
|
||||||
content: content.content,
|
|
||||||
sendTime: content.sendTime,
|
|
||||||
sequence: content.sequence
|
|
||||||
}
|
|
||||||
|
|
||||||
// 保存到 pina imMessageStore
|
|
||||||
addMessage(message)
|
|
||||||
|
|
||||||
return
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error(error)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
this.status = status
|
|
||||||
this.data = data
|
|
||||||
this.send = send
|
|
||||||
this.close = close
|
|
||||||
this.open = open
|
|
||||||
|
|
||||||
console.log('websocket 初始化成功')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
@ -5,7 +5,7 @@ import { messageType } from '@/constant/im'
|
|||||||
import MessageList from './components/messageList/index.vue'
|
import MessageList from './components/messageList/index.vue'
|
||||||
import InputBox from './components/inputBox/index.vue'
|
import InputBox from './components/inputBox/index.vue'
|
||||||
import * as MessageApi from '@/api/im/message'
|
import * as MessageApi from '@/api/im/message'
|
||||||
import { ImMessageRespVO } from '@/api/im/message'
|
import { imMessageStore } from '@/store/modules/imMessageStore'
|
||||||
|
|
||||||
const { query } = useRoute() // 查询参数
|
const { query } = useRoute() // 查询参数
|
||||||
|
|
||||||
@ -45,11 +45,17 @@ const groupDetail = computed(() => {
|
|||||||
})
|
})
|
||||||
//获取对应的消息内容
|
//获取对应的消息内容
|
||||||
const pullParams = reactive({
|
const pullParams = reactive({
|
||||||
sequence: 0,
|
sequence: null, // 消息序列号 默认为null
|
||||||
size: 100
|
size: 10
|
||||||
})
|
})
|
||||||
const messageData = ref([])
|
const messageData = ref([])
|
||||||
const getMessageData = async () => {
|
const getMessageData = async () => {
|
||||||
|
// 获取消息列表
|
||||||
|
const imMessages = imMessageStore().getMessages
|
||||||
|
if (imMessages) {
|
||||||
|
console.log('imMessages:' + imMessages)
|
||||||
|
console.log('imMessages:' + imMessages.length)
|
||||||
|
}
|
||||||
messageData.value = await MessageApi.pullMessageList(pullParams)
|
messageData.value = await MessageApi.pullMessageList(pullParams)
|
||||||
}
|
}
|
||||||
console.log(messageData)
|
console.log(messageData)
|
||||||
@ -63,10 +69,12 @@ const fechHistoryMessage = (loadType) => {
|
|||||||
console.log(loadType)
|
console.log(loadType)
|
||||||
console.log('加载更多')
|
console.log('加载更多')
|
||||||
loadingHistoryMsg.value = true
|
loadingHistoryMsg.value = true
|
||||||
|
// 如果 messageData 不为空 ,获取第一条数据的 sequence
|
||||||
|
if (messageData.value.length) {
|
||||||
|
pullParams.sequence = messageData.value[0].sequence
|
||||||
|
}
|
||||||
getMessageData()
|
getMessageData()
|
||||||
setTimeout(() => {
|
|
||||||
loadingHistoryMsg.value = false
|
loadingHistoryMsg.value = false
|
||||||
}, 1000)
|
|
||||||
}
|
}
|
||||||
//控制消息滚动
|
//控制消息滚动
|
||||||
const scrollMessageList = (direction) => {
|
const scrollMessageList = (direction) => {
|
||||||
|
Loading…
Reference in New Issue
Block a user