| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <template> |
| H | 2 | <div class="flex"> |
| 3 | <!-- 左侧：建立连接、发送消息 --> | |
| 4 | <el-card :gutter="12" class="w-1/2" shadow="always"> | |
| 5 | <template #header> | |
| 6 | <div class="card-header"> | |
| 7 | <span>连接</span> | |
| 8 | </div> | |
| 9 | </template> | |
| 10 | <div class="flex items-center"> | |
| 11 | <span class="mr-4 text-lg font-medium"> 连接状态: </span> | |
| 12 | <el-tag :color="getTagColor">{{ status }}</el-tag> | |
| 13 | </div> | |
| 14 | <hr class="my-4" /> | |
| 15 | <div class="flex"> | |
| 16 | <el-input v-model="server" disabled> | |
| 17 | <template #prepend>服务地址</template> | |
| 18 | </el-input> | |
| 19 | <el-button :type="getIsOpen ? 'danger' : 'primary'" @click="toggleConnectStatus"> | |
| 20 | {{ getIsOpen ? '关闭连接' : '开启连接' }} | |
| 21 | </el-button> | |
| 22 | </div> | |
| 23 | <p class="mt-4 text-lg font-medium">消息输入框</p> | |
| 24 | <hr class="my-4" /> | |
| 25 | <el-input | |
| 26 | v-model="sendText" | |
| 27 | :autosize="{ minRows: 2, maxRows: 4 }" | |
| 28 | :disabled="!getIsOpen" | |
| 29 | clearable | |
| 30 | placeholder="请输入你要发送的消息" | |
| 31 | type="textarea" | |
| 32 | /> | |
| 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"> | |
| 43 | 发送 | |
| 44 | </el-button> | |
| 45 | </el-card> | |
| 46 | <!-- 右侧：消息记录 --> | |
| 47 | <el-card :gutter="12" class="w-1/2" shadow="always"> | |
| 48 | <template #header> | |
| 49 | <div class="card-header"> | |
| 50 | <span>消息记录</span> | |
| 51 | </div> | |
| 52 | </template> | |
| 53 | <div class="max-h-80 overflow-auto"> | |
| 54 | <ul> | |
| 55 | <li v-for="msg in messageReverseList" :key="msg.time" class="mt-2"> | |
| 56 | <div class="flex items-center"> | |
| 57 | <span class="text-primary mr-2 font-medium">收到消息:</span> | |
| 58 | <span>{{ formatDate(msg.time) }}</span> | |
| 59 | </div> | |
| 60 | <div> | |
| 61 | {{ msg.text }} | |
| 62 | </div> | |
| 63 | </li> | |
| 64 | </ul> | |
| 65 | </div> | |
| 66 | </el-card> | |
| 67 | </div> | |
| 68 | </template> | |
| 69 | <script lang="ts" setup> | |
| 70 | import { formatDate } from '@/utils/formatTime' | |
| 71 | import { useWebSocket } from '@vueuse/core' | |
| 72 | import { getAccessToken } from '@/utils/auth' | |
| 73 | import * as UserApi from '@/api/system/user' | |
| 74 | ||
| 75 | defineOptions({ name: 'InfraWebSocket' }) | |
| 76 | ||
| 77 | const message = useMessage() // 消息弹窗 | |
| 78 | ||
| 79 | const server = ref( | |
| 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 连接的展示颜色 | |
| 84 | ||
| 85 | /** 发起 WebSocket 连接 */ | |
| 86 | const { status, data, send, close, open } = useWebSocket(server.value, { | |
| 87 | autoReconnect: true, | |
| 88 | heartbeat: true | |
| 89 | }) | |
| 90 | ||
| 91 | /** 监听接收到的数据 */ | |
| 92 | const messageList = ref([] as { time: number; text: string }[]) // 消息列表 | |
| 93 | const messageReverseList = computed(() => messageList.value.slice().reverse()) | |
| 94 | watchEffect(() => { | |
| 95 | if (!data.value) { | |
| 96 | return | |
| 97 | } | |
| 98 | try { | |
| 99 | // 1. 收到心跳 | |
| 100 | if (data.value === 'pong') { | |
| 101 | // state.recordList.push({ | |
| 102 | // text: '【心跳】', | |
| 103 | // time: new Date().getTime() | |
| 104 | // }) | |
| 105 | return | |
| 106 | } | |
| 107 | ||
| 108 | // 2.1 解析 type 消息类型 | |
| 109 | const jsonMessage = JSON.parse(data.value) | |
| 110 | const type = jsonMessage.type | |
| 111 | const content = JSON.parse(jsonMessage.content) | |
| 112 | if (!type) { | |
| 113 | message.error('未知的消息类型：' + data.value) | |
| 114 | return | |
| 115 | } | |
| 116 | // 2.2 消息类型：demo-message-receive | |
| 117 | if (type === 'demo-message-receive') { | |
| 118 | const single = content.single | |
| 119 | if (single) { | |
| 120 | messageList.value.push({ | |
| 121 | text: `【单发】用户编号(${content.fromUserId})：${content.text}`, | |
| 122 | time: new Date().getTime() | |
| 123 | }) | |
| 124 | } else { | |
| 125 | messageList.value.push({ | |
| 126 | text: `【群发】用户编号(${content.fromUserId})：${content.text}`, | |
| 127 | time: new Date().getTime() | |
| 128 | }) | |
| 129 | } | |
| 130 | return | |
| 131 | } | |
| 132 | // 2.3 消息类型：notice-push | |
| 133 | if (type === 'notice-push') { | |
| 134 | messageList.value.push({ | |
| 135 | text: `【系统通知】：${content.title}`, | |
| 136 | time: new Date().getTime() | |
| 137 | }) | |
| 138 | return | |
| 139 | } | |
| 140 | message.error('未处理消息：' + data.value) | |
| 141 | } catch (error) { | |
| 142 | message.error('处理消息发生异常：' + data.value) | |
| 143 | console.error(error) | |
| 144 | } | |
| 145 | }) | |
| 146 | ||
| 147 | /** 发送消息 */ | |
| 148 | const sendText = ref('') // 发送内容 | |
| 149 | const sendUserId = ref('') // 发送人 | |
| 150 | const handlerSend = () => { | |
| 151 | // 1.1 先 JSON 化 message 消息内容 | |
| 152 | const messageContent = JSON.stringify({ | |
| 153 | text: sendText.value, | |
| 154 | toUserId: sendUserId.value | |
| 155 | }) | |
| 156 | // 1.2 再 JSON 化整个消息 | |
| 157 | const jsonMessage = JSON.stringify({ | |
| 158 | type: 'demo-message-send', | |
| 159 | content: messageContent | |
| 160 | }) | |
| 161 | // 2. 最后发送消息 | |
| 162 | send(jsonMessage) | |
| 163 | sendText.value = '' | |
| 164 | } | |
| 165 | ||
| 166 | /** 切换 websocket 连接状态 */ | |
| 167 | const toggleConnectStatus = () => { | |
| 168 | if (getIsOpen.value) { | |
| 169 | close() | |
| 170 | } else { | |
| 171 | open() | |
| 172 | } | |
| 173 | } | |
| 174 | ||
| 175 | /** 初始化 **/ | |
| 176 | const userList = ref<any[]>([]) // 用户列表 | |
| 177 | onMounted(async () => { | |
| 178 | // 获取用户列表 | |
| 179 | userList.value = await UserApi.getSimpleUserList() | |
| 180 | }) | |
| 181 | </script> | |
