86 lines
2.2 KiB
Vue
86 lines
2.2 KiB
Vue
<template>
|
||
<div class="webSocket-container">
|
||
<el-row :gutter="20">
|
||
<el-col :lg="8" :md="12" :sm="24" :xl="8" :xs="24">
|
||
<el-alert :closable="false" type="success">webSocket连接{{ status }}！</el-alert>
|
||
<br />
|
||
<el-form ref="form" label-width="100px" :model="form" :rules="rules">
|
||
<el-form-item label="地址">
|
||
<el-input v-model="url" disabled />
|
||
</el-form-item>
|
||
<el-form-item label="消息" prop="message">
|
||
<el-input v-model="form.message" />
|
||
</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>
|