<template>
|
<PageWrapper title="WebSocket 示例">
|
<div class="flex">
|
<div class="w-1/3 bg-white p-4">
|
<div class="flex items-center">
|
<span class="text-lg font-medium mr-4"> 连接状态: </span>
|
<Tag :color="getTagColor">{{ status }}</Tag>
|
</div>
|
<hr class="my-4" />
|
|
<div class="flex">
|
<a-input v-model:value="state.server" addon-before="服务地址" disabled />
|
<a-button :type="getIsOpen ? 'danger' : 'primary'" @click="toggle">
|
{{ getIsOpen ? '关闭连接' : '开启连接' }}
|
</a-button>
|
</div>
|
<p class="text-lg font-medium mt-4">设置</p>
|
<hr class="my-4" />
|
|
<InputTextArea
|
placeholder="需要发送到服务器的内容"
|
:disabled="!getIsOpen"
|
v-model:value="state.sendValue"
|
allowClear
|
/>
|
|
<a-button type="primary" block class="mt-4" :disabled="!getIsOpen" @click="handlerSend">
|
发送
|
</a-button>
|
</div>
|
|
<div class="w-2/3 bg-white ml-4 p-4">
|
<span class="text-lg font-medium mr-4"> 消息记录: </span>
|
<hr class="my-4" />
|
|
<div class="max-h-80 overflow-auto">
|
<ul>
|
<li v-for="item in getList" class="mt-2" :key="item.time">
|
<div class="flex items-center">
|
<span class="mr-2 text-primary font-medium">收到消息:</span>
|
<span>{{ formatToDateTime(item.time) }}</span>
|
</div>
|
<div>
|
{{ item.res }}
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
</PageWrapper>
|
</template>
|
<script lang="ts" setup>
|
import { reactive, watchEffect, computed } from 'vue';
|
import { Tag, Input } from 'ant-design-vue';
|
import { PageWrapper } from '@/components/Page';
|
import { useWebSocket } from '@vueuse/core';
|
import { formatToDateTime } from '@/utils/dateUtil';
|
|
const InputTextArea = Input.TextArea;
|
|
const state = reactive({
|
server: 'ws://localhost:3300/test',
|
sendValue: '',
|
recordList: [] as { id: number; time: number; res: string }[],
|
});
|
|
const { status, data, send, close, open } = useWebSocket(state.server, {
|
autoReconnect: false,
|
heartbeat: true,
|
});
|
|
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),
|
time: new Date().getTime(),
|
});
|
}
|
}
|
});
|
|
const getIsOpen = computed(() => status.value === 'OPEN');
|
const getTagColor = computed(() => (getIsOpen.value ? 'success' : 'red'));
|
|
const getList = computed(() => {
|
return [...state.recordList].reverse();
|
});
|
|
function handlerSend() {
|
send(state.sendValue);
|
state.sendValue = '';
|
}
|
|
function toggle() {
|
if (getIsOpen.value) {
|
close();
|
} else {
|
open();
|
}
|
}
|
</script>
|
