64 lines
1.6 KiB
Vue
64 lines
1.6 KiB
Vue
|
<template>
|
||
|
|
<div class="p-2">
|
||
|
|
<el-row>
|
||
|
|
<el-col :span="24" class="card-box">
|
||
|
|
<el-card shadow="hover">
|
||
|
|
<el-row :gutter="24">
|
||
|
|
<el-col :span="24" class="mt10">
|
||
|
|
<el-input v-model="conf.url" placeholder="请输入连接地址"></el-input>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="24" class="mt10">
|
||
|
|
<el-button type="primary" @click="start">连接</el-button>
|
||
|
|
<el-button type="primary" @click="websocketclose()">断开</el-button>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="24" class="mt10">
|
||
|
|
<el-input type="textarea" v-model="conf.send" placeholder="请输入发送内容"></el-input>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="24" class="mt10">
|
||
|
|
<el-button type="primary" @click="sendMessage">发送</el-button>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</el-card>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script setup lang="ts" name="webSocket">
|
||
|
|
import { initWebSocket, sendMsg, websocketclose } from '@/utils/websocket';
|
||
|
|
|
||
|
|
import { reactive } from 'vue';
|
||
|
|
interface Conf {
|
||
|
|
url: string;
|
||
|
|
send: string;
|
||
|
|
message: {
|
||
|
|
time: string;
|
||
|
|
type: string;
|
||
|
|
data: string;
|
||
|
|
}[];
|
||
|
|
}
|
||
|
|
|
||
|
|
const conf = reactive(<Conf>{
|
||
|
|
url: import.meta.env.VITE_APP_WEBSOCKET_URL, // 连接地址
|
||
|
|
send: '123', // 发送信息
|
||
|
|
message: [], // 消息列表
|
||
|
|
});
|
||
|
|
|
||
|
|
const start = () => {
|
||
|
|
initWebSocket(conf.url);
|
||
|
|
};
|
||
|
|
|
||
|
|
const sendMessage = () => {
|
||
|
|
sendMsg(conf.send);
|
||
|
|
};
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
start();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.mt10 {
|
||
|
|
margin-top: 10px;
|
||
|
|
}
|
||
|
|
</style>
|