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

}

}