<template>
  <div class="webSocket-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
        <el-alert type="success" :closable="false">
          webSocket连接{{ status }}！
        </el-alert>
        <br />
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="地址">
            <el-input v-model="url" disabled></el-input>
          </el-form-item>
          <el-form-item label="消息" prop="message">
            <el-input v-model="form.message"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit">发送消息</el-button>
          </el-form-item>
          <el-form-item label="返回信息汇总">
            {{ data }}
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "WebSocket",
    components: {},
    data() {
      return {
        url: "ws://123.207.136.134:9010/ajaxchattest",
        webSocket: null,
        data: [],
        status: "",
        form: { message: null },
        rules: {
          message: [{ required: true, message: "请输入消息", trigger: "blur" }],
        },
      };
    },
    created() {
      this.init();
    },
    destroyed() {
      this.webSocket.close();
    },
    methods: {
      submit() {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            this.send(this.form.message);
          } else {
            return false;
          }
        });
      },
      init() {
        const wsuri = this.url;
        this.webSocket = new WebSocket(wsuri);
        this.webSocket.onmessage = this.onmessage;
        this.webSocket.onopen = this.onopen;
        this.webSocket.onerror = this.onerror;
        this.webSocket.onclose = this.onclose;
      },
      onopen() {
        this.status = "成功";
      },
      onerror() {
        this.status = "失败";
        this.initWebSocket();
      },
      onmessage({ data }) {
        //截掉测试webSocket地址广告
        this.data.push(data.substring(0, data.length - 66));
      },
      send(Data) {
        this.webSocket.send(Data);
      },
      onclose(e) {
        this.status = "断开";
      },
    },
  };
</script>