websocket 重新封装

This commit is contained in:
YunaiV 2023-11-24 00:33:05 +08:00
parent f74ddf46ae
commit 1744c6ec6f
5 changed files with 125 additions and 43 deletions

View File

@ -4,10 +4,10 @@ NODE_ENV=development
VITE_DEV=true
# 请求路径
VITE_BASE_URL='http://localhost:48080'
VITE_BASE_URL='http://127.0.0.1:48080'
# 上传路径
VITE_UPLOAD_URL='http://localhost:48080/admin-api/infra/file/upload'
VITE_UPLOAD_URL='http://127.0.0.1:48080/admin-api/infra/file/upload'
# 接口前缀
VITE_API_BASEPATH=/dev-api

View File

@ -35,3 +35,8 @@ export const updateNotice = (data: NoticeVO) => {
export const deleteNotice = (id: number) => {
return request.delete({ url: '/system/notice/delete?id=' + id })
}
// 推送公告
export const pushNotice = (id: number) => {
return request.post({ url: '/system/notice/push?id=' + id })
}

View File

@ -437,5 +437,6 @@ export default {
btn_zoom_in: '放大',
btn_zoom_out: '缩小',
preview: '预览'
}
},
'OAuth 2.0': 'OAuth 2.0' // 避免菜单名是 OAuth 2.0 时,一直 warn 报错
}

View File

@ -1,5 +1,6 @@
<template>
<div class="flex">
<!-- 左侧建立连接发送消息 -->
<el-card :gutter="12" class="w-1/2" shadow="always">
<template #header>
<div class="card-header">
@ -11,28 +12,38 @@
<el-tag :color="getTagColor">{{ status }}</el-tag>
</div>
<hr class="my-4" />
<div class="flex">
<el-input v-model="server" disabled>
<template #prepend> 服务地址</template>
<template #prepend>服务地址</template>
</el-input>
<el-button :type="getIsOpen ? 'danger' : 'primary'" @click="toggle">
<el-button :type="getIsOpen ? 'danger' : 'primary'" @click="toggleConnectStatus">
{{ getIsOpen ? '关闭连接' : '开启连接' }}
</el-button>
</div>
<p class="mt-4 text-lg font-medium">设置</p>
<p class="mt-4 text-lg font-medium">消息输入框</p>
<hr class="my-4" />
<el-input
v-model="sendValue"
v-model="sendText"
:autosize="{ minRows: 2, maxRows: 4 }"
:disabled="!getIsOpen"
clearable
type="textarea"
placeholder="请输入你要发送的消息"
/>
<el-button :disabled="!getIsOpen" block class="mt-4" type="primary" @click="handlerSend">
<el-select v-model="sendUserId" class="mt-4" placeholder="请选择发送人">
<el-option key="" label="所有人" value="" />
<el-option
v-for="user in userList"
:key="user.id"
:label="user.nickname"
:value="user.id"
/>
</el-select>
<el-button :disabled="!getIsOpen" block class="ml-2 mt-4" type="primary" @click="handlerSend">
发送
</el-button>
</el-card>
<!-- 右侧消息记录 -->
<el-card :gutter="12" class="w-1/2" shadow="always">
<template #header>
<div class="card-header">
@ -41,13 +52,13 @@
</template>
<div class="max-h-80 overflow-auto">
<ul>
<li v-for="item in getList" :key="item.time" class="mt-2">
<li v-for="msg in messageList.reverse()" :key="msg.time" class="mt-2">
<div class="flex items-center">
<span class="text-primary mr-2 font-medium">收到消息:</span>
<span>{{ formatDate(item.time) }}</span>
<span>{{ formatDate(msg.time) }}</span>
</div>
<div>
{{ item.res }}
{{ msg.text }}
</div>
</li>
</ul>
@ -57,62 +68,113 @@
</template>
<script lang="ts" setup>
import { formatDate } from '@/utils/formatTime'
import { useUserStore } from '@/store/modules/user'
import { useWebSocket } from '@vueuse/core'
import { getAccessToken } from '@/utils/auth'
import * as UserApi from '@/api/system/user'
defineOptions({ name: 'InfraWebSocket' })
const userStore = useUserStore()
const sendValue = ref('')
const message = useMessage() //
const server = ref(
(import.meta.env.VITE_BASE_URL + '/websocket/message').replace('http', 'ws') +
'?userId=' +
userStore.getUser.id
)
const state = reactive({
recordList: [] as { id: number; time: number; res: string }[]
})
(import.meta.env.VITE_BASE_URL + '/infra/ws').replace('http', 'ws') + '?token=' + getAccessToken()
) // WebSocket
const getIsOpen = computed(() => status.value === 'OPEN') // WebSocket
const getTagColor = computed(() => (getIsOpen.value ? 'success' : 'red')) // WebSocket
/** 发起 WebSocket 连接 */
const { status, data, send, close, open } = useWebSocket(server.value, {
autoReconnect: false,
heartbeat: true
})
/** 监听接收到的数据 */
const messageList = ref([] as { time: number; text: string }[]) //
watchEffect(() => {
if (data.value) {
try {
const res = JSON.parse(data.value)
state.recordList.push(res)
} catch (error) {
state.recordList.push({
res: data.value,
id: Math.ceil(Math.random() * 1000),
if (!data.value) {
return
}
try {
// 1.
if (data.value === 'pong') {
// state.recordList.push({
// text: '',
// time: new Date().getTime()
// })
return
}
// 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 === 'demo-message-receive') {
const single = content.single
if (single) {
messageList.value.push({
text: `【单发】用户编号(${content.fromUserId})${content.text}`,
time: new Date().getTime()
})
} else {
messageList.value.push({
text: `【群发】用户编号(${content.fromUserId})${content.text}`,
time: new Date().getTime()
})
}
return
}
// 2.3 notice-push
if (type === 'notice-push') {
messageList.value.push({
text: `【系统通知】:${content.title}`,
time: new Date().getTime()
})
return
}
message.error('未处理消息:' + data.value)
} catch (error) {
message.error('处理消息发生异常:' + data.value)
console.error(error)
}
})
const getIsOpen = computed(() => status.value === 'OPEN')
const getTagColor = computed(() => (getIsOpen.value ? 'success' : 'red'))
const getList = computed(() => {
return [...state.recordList].reverse()
})
function handlerSend() {
send(sendValue.value)
sendValue.value = ''
/** 发送消息 */
const sendText = ref('') //
const sendUserId = ref('') //
const handlerSend = () => {
// 1.1 JSON message
const messageContent = JSON.stringify({
text: sendText.value,
toUserId: sendUserId.value
})
// 1.2 JSON
const jsonMessage = JSON.stringify({
type: 'demo-message-send',
content: messageContent
})
// 2.
send(jsonMessage)
sendText.value = ''
}
function toggle() {
/** 切换 websocket 连接状态 */
const toggleConnectStatus = () => {
if (getIsOpen.value) {
close()
} else {
open()
}
}
/** 初始化 **/
const userList = ref<any[]>([]) //
onMounted(async () => {
//
userList.value = await UserApi.getSimpleUserList()
})
</script>

View File

@ -87,6 +87,9 @@
>
删除
</el-button>
<el-button link @click="handlePush(scope.row.id)" v-hasPermi="['system:notice:update']">
推送
</el-button>
</template>
</el-table-column>
</el-table>
@ -168,6 +171,17 @@ const handleDelete = async (id: number) => {
} catch {}
}
/** 推送按钮操作 */
const handlePush = async (id: number) => {
try {
//
await message.confirm('是否推送所选中通知?')
//
await NoticeApi.pushNotice(id)
message.success(t('推送成功'))
} catch {}
}
/** 初始化 **/
onMounted(() => {
getList()