<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>
