Skip to content

Commit 764e171

Browse files
souvcsouvc
committed
2 parents aceac6d + 1744c6e commit 764e171

File tree

7 files changed

+125
-48
lines changed

7 files changed

+125
-48
lines changed

‎.env.base

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ NODE_ENV=development
44
VITE_DEV=true
55

66
# 请求路径
7-
VITE_BASE_URL='http://localhost:48080'
7+
VITE_BASE_URL='http://127.0.0.1:48080'
88

99
# 上传路径
10-
VITE_UPLOAD_URL='http://localhost:48080/admin-api/infra/file/upload'
10+
VITE_UPLOAD_URL='http://127.0.0.1:48080/admin-api/infra/file/upload'
1111

1212
# 接口前缀
1313
VITE_API_BASEPATH=/dev-api

‎src/api/system/notice/index.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,3 +35,8 @@ export const updateNotice = (data: NoticeVO) => {
3535
export const deleteNotice = (id: number) => {
3636
return request.delete({ url: '/system/notice/delete?id=' + id })
3737
}
38+
39+
// 推送公告
40+
export const pushNotice = (id: number) => {
41+
return request.post({ url: '/system/notice/push?id=' + id })
42+
}

‎src/api/system/sms/smsLog/index.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,6 @@ export interface SmsLogVO {
1515
userType: number | null
1616
sendStatus: number | null
1717
sendTime: Date | null
18-
sendCode: number | null
19-
sendMsg: string
2018
apiSendCode: string
2119
apiSendMsg: string
2220
apiRequestId: string

‎src/locales/zh-CN.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -437,5 +437,6 @@ export default {
437437
btn_zoom_in: '放大',
438438
btn_zoom_out: '缩小',
439439
preview: '预览'
440-
}
440+
},
441+
'OAuth 2.0': 'OAuth 2.0' // 避免菜单名是 OAuth 2.0 时，一直 warn 报错
441442
}

‎src/views/infra/webSocket/index.vue

Lines changed: 102 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<template>
22
<div class="flex">
3+
<!-- 左侧：建立连接、发送消息 -->
34
<el-card :gutter="12" class="w-1/2" shadow="always">
45
<template #header>
56
<div class="card-header">
@@ -11,28 +12,38 @@
1112
<el-tag :color="getTagColor">{{ status }}</el-tag>
1213
</div>
1314
<hr class="my-4" />
14-
1515
<div class="flex">
1616
<el-input v-model="server" disabled>
17-
<template #prepend> 服务地址</template>
17+
<template #prepend>服务地址</template>
1818
</el-input>
19-
<el-button :type="getIsOpen ? 'danger' : 'primary'" @click="toggle">
19+
<el-button :type="getIsOpen ? 'danger' : 'primary'" @click="toggleConnectStatus">
2020
{{ getIsOpen ? '关闭连接' : '开启连接' }}
2121
</el-button>
2222
</div>
23-
<p class="mt-4 text-lg font-medium">设置</p>
23+
<p class="mt-4 text-lg font-medium">消息输入框</p>
2424
<hr class="my-4" />
2525
<el-input
26-
v-model="sendValue"
26+
v-model="sendText"
2727
:autosize="{ minRows: 2, maxRows: 4 }"
2828
:disabled="!getIsOpen"
2929
clearable
3030
type="textarea"
31+
placeholder="请输入你要发送的消息"
3132
/>
32-
<el-button :disabled="!getIsOpen" block class="mt-4" type="primary" @click="handlerSend">
33+
<el-select v-model="sendUserId" class="mt-4" placeholder="请选择发送人">
34+
<el-option key="" label="所有人" value="" />
35+
<el-option
36+
v-for="user in userList"
37+
:key="user.id"
38+
:label="user.nickname"
39+
:value="user.id"
40+
/>
41+
</el-select>
42+
<el-button :disabled="!getIsOpen" block class="ml-2 mt-4" type="primary" @click="handlerSend">
3343
发送
3444
</el-button>
3545
</el-card>
46+
<!-- 右侧：消息记录 -->
3647
<el-card :gutter="12" class="w-1/2" shadow="always">
3748
<template #header>
3849
<div class="card-header">
@@ -41,13 +52,13 @@
4152
</template>
4253
<div class="max-h-80 overflow-auto">
4354
<ul>
44-
<li v-for="item in getList" :key="item.time" class="mt-2">
55+
<li v-for="msg in messageList.reverse()" :key="msg.time" class="mt-2">
4556
<div class="flex items-center">
4657
<span class="text-primary mr-2 font-medium">收到消息:</span>
47-
<span>{{ formatDate(item.time) }}</span>
58+
<span>{{ formatDate(msg.time) }}</span>
4859
</div>
4960
<div>
50-
{{ item.res }}
61+
{{ msg.text }}
5162
</div>
5263
</li>
5364
</ul>
@@ -57,62 +68,113 @@
5768
</template>
5869
<script lang="ts" setup>
5970
import { formatDate } from '@/utils/formatTime'
60-
import { useUserStore } from '@/store/modules/user'
6171
import { useWebSocket } from '@vueuse/core'
72+
import { getAccessToken } from '@/utils/auth'
73+
import * as UserApi from '@/api/system/user'
6274
6375
defineOptions({ name: 'InfraWebSocket' })
6476
65-
const userStore = useUserStore()
66-
67-
const sendValue = ref('')
77+
const message = useMessage() // 消息弹窗
6878
6979
const server = ref(
70-
(import.meta.env.VITE_BASE_URL + '/websocket/message').replace('http', 'ws') +
71-
'?userId=' +
72-
userStore.getUser.id
73-
)
74-
75-
const state = reactive({
76-
recordList: [] as { id: number; time: number; res: string }[]
77-
})
80+
(import.meta.env.VITE_BASE_URL + '/infra/ws').replace('http', 'ws') + '?token=' + getAccessToken()
81+
) // WebSocket 服务地址
82+
const getIsOpen = computed(() => status.value === 'OPEN') // WebSocket 连接是否打开
83+
const getTagColor = computed(() => (getIsOpen.value ? 'success' : 'red')) // WebSocket 连接的展示颜色
7884
85+
/** 发起 WebSocket 连接 */
7986
const { status, data, send, close, open } = useWebSocket(server.value, {
8087
autoReconnect: false,
8188
heartbeat: true
8289
})
8390
91+
/** 监听接收到的数据 */
92+
const messageList = ref([] as { time: number; text: string }[]) // 消息列表
8493
watchEffect(() => {
85-
if (data.value) {
86-
try {
87-
const res = JSON.parse(data.value)
88-
state.recordList.push(res)
89-
} catch (error) {
90-
state.recordList.push({
91-
res: data.value,
92-
id: Math.ceil(Math.random() * 1000),
94+
if (!data.value) {
95+
return
96+
}
97+
try {
98+
// 1. 收到心跳
99+
if (data.value === 'pong') {
100+
// state.recordList.push({
101+
// text: '【心跳】',
102+
// time: new Date().getTime()
103+
// })
104+
return
105+
}
106+
107+
// 2.1 解析 type 消息类型
108+
const jsonMessage = JSON.parse(data.value)
109+
const type = jsonMessage.type
110+
const content = JSON.parse(jsonMessage.content)
111+
if (!type) {
112+
message.error('未知的消息类型：' + data.value)
113+
return
114+
}
115+
// 2.2 消息类型：demo-message-receive
116+
if (type === 'demo-message-receive') {
117+
const single = content.single
118+
if (single) {
119+
messageList.value.push({
120+
text: `【单发】用户编号(${content.fromUserId})：${content.text}`,
121+
time: new Date().getTime()
122+
})
123+
} else {
124+
messageList.value.push({
125+
text: `【群发】用户编号(${content.fromUserId})：${content.text}`,
126+
time: new Date().getTime()
127+
})
128+
}
129+
return
130+
}
131+
// 2.3 消息类型：notice-push
132+
if (type === 'notice-push') {
133+
messageList.value.push({
134+
text: `【系统通知】：${content.title}`,
93135
time: new Date().getTime()
94136
})
137+
return
95138
}
139+
message.error('未处理消息：' + data.value)
140+
} catch (error) {
141+
message.error('处理消息发生异常：' + data.value)
142+
console.error(error)
96143
}
97144
})
98145
99-
const getIsOpen = computed(() => status.value === 'OPEN')
100-
const getTagColor = computed(() => (getIsOpen.value ? 'success' : 'red'))
101-
102-
const getList = computed(() => {
103-
return [...state.recordList].reverse()
104-
})
105-
106-
function handlerSend() {
107-
send(sendValue.value)
108-
sendValue.value = ''
146+
/** 发送消息 */
147+
const sendText = ref('') // 发送内容
148+
const sendUserId = ref('') // 发送人
149+
const handlerSend = () => {
150+
// 1.1 先 JSON 化 message 消息内容
151+
const messageContent = JSON.stringify({
152+
text: sendText.value,
153+
toUserId: sendUserId.value
154+
})
155+
// 1.2 再 JSON 化整个消息
156+
const jsonMessage = JSON.stringify({
157+
type: 'demo-message-send',
158+
content: messageContent
159+
})
160+
// 2. 最后发送消息
161+
send(jsonMessage)
162+
sendText.value = ''
109163
}
110164
111-
function toggle() {
165+
/** 切换 websocket 连接状态 */
166+
const toggleConnectStatus = () => {
112167
if (getIsOpen.value) {
113168
close()
114169
} else {
115170
open()
116171
}
117172
}
173+
174+
/** 初始化 **/
175+
const userList = ref<any[]>([]) // 用户列表
176+
onMounted(async () => {
177+
// 获取用户列表
178+
userList.value = await UserApi.getSimpleUserList()
179+
})
118180
</script>

‎src/views/system/notice/index.vue

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,9 @@
8787
>
8888
删除
8989
</el-button>
90+
<el-button link @click="handlePush(scope.row.id)" v-hasPermi="['system:notice:update']">
91+
推送
92+
</el-button>
9093
</template>
9194
</el-table-column>
9295
</el-table>
@@ -168,6 +171,17 @@ const handleDelete = async (id: number) => {
168171
} catch {}
169172
}
170173
174+
/** 推送按钮操作 */
175+
const handlePush = async (id: number) => {
176+
try {
177+
// 推送的二次确认
178+
await message.confirm('是否推送所选中通知？')
179+
// 发起推送
180+
await NoticeApi.pushNotice(id)
181+
message.success(t('推送成功'))
182+
} catch {}
183+
}
184+
171185
/** 初始化 **/
172186
onMounted(() => {
173187
getList()

‎src/views/system/sms/log/SmsLogDetail.vue

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,6 @@
3737
<el-descriptions-item label="发送时间">
3838
{{ formatDate(detailData.sendTime) }}
3939
</el-descriptions-item>
40-
<el-descriptions-item label="发送结果">
41-
{{ detailData.sendCode }} | {{ detailData.sendMsg }}
42-
</el-descriptions-item>
4340
<el-descriptions-item label="API 发送结果">
4441
{{ detailData.apiSendCode }} | {{ detailData.apiSendMsg }}
4542
</el-descriptions-item>

0 commit comments

Comments
 (0)