<template>
  <div>
    <el-input v-model="username" placeholder="用户"></el-input>
    <el-input v-model="content" placeholder="信息内容"></el-input>
    <button @click="send">发消息</button>
  </div>
</template>

<script>
export default {
  name: 'WebSocket',
  data () {
    return {
      username: 'vue',
      content: '',
      path: 'ws://localhost:9000/api/websocket/',
      socket: ''
    }
  },
  mounted () {
    // 初始化
    this.init()
  },
  methods: {
    // 生成随机字符
    createUniqueString() {
      const timestamp = +new Date() + ''
      const randomNum = parseInt((1 + Math.random()) * 65536) + ''
      return (+(randomNum + timestamp)).toString(32)
    },
    init: function () {
      if (typeof (WebSocket) === 'undefined') {
        alert('您的浏览器不支持socket')
      } else {
        this.username = this.createUniqueString()
        const wsUrl = this.path + this.username
        // 实例化socket
        this.socket = new WebSocket(wsUrl)
        // 监听socket连接
        this.socket.onopen = this.open
        // 监听socket错误信息
        this.socket.onerror = this.error
        // 监听socket消息
        this.socket.onmessage = this.getMessage
      }
    },
    open: function () {
      console.log('socket连接成功')
    },
    error: function () {
      console.log('连接错误')
    },
    getMessage: function (msg) {
      const result = msg.data
      const obj = JSON.parse(result)
      this.showMsg(obj)
      console.log(obj)
    },
    send: function () {
      var message = {
        username: this.username,
        content: this.content,
        to: 'all'
      }
      this.socket.send(JSON.stringify(message))
    },
    close: function () {
      console.log('socket已经关闭')
    },
    showMsg(data) {
      if (data.type === 1) {
        this.$confirm(data.message + '， 请尽快处理！', '警告', {
          confirmButtonText: '确定',
          showCancelButton: false, // 不显示取消按钮
          closeOnClickModal: false, // 是否可通过点击遮罩关闭 MessageBox
          // cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // })
        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // })
        })
      }
    }
  },
  unmounted () {
    // 销毁监听
    this.socket.onclose = this.close
  }
}
</script>

<style>

</style>