<template>
<div>
<el-button>发送消息</el-button>
</div>
</template>
<script>
export default {
data() {
return {
websocket: null,
path: 'ws://192.168.2.27:8082//websocket?type=order'
}
},
created() {
this.init()
},
methods: {
// websocket初始化
init() {
if (typeof (WebSocket) === 'undefined') {
this.$message({
message: '你的浏览器不支持Websocket!',
type: 'info'
})
} else {
this.websocket = new WebSocket(this.path)
// 监听socket连接
this.websocket.onopen = this.open
// 监听socket错误信息
this.websocket.onerror = this.error
// 监听socket消息
this.websocket.onmessage = this.getMessage
}
},
// websocket错误信息回调
error() {
this.$message({
message: 'websocket连接错误',
type: 'info'
})
},
// websocket连接成功回调
open() {
this.$message({
message: 'websocket连接成功',
type: 'success'
})
this.send()
},
// websocket获取信息回调
getMessage(msg) {
console.log(msg)
},
// 发送信息
send() {
var params = 'order'
this.websocket.send(params)
},
close() {
this.$message({
message: 'websocket已关闭',
type: 'info'
})
}
},
destroyed() {
this.websocket.onclose = this.close
}
}
</script>