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