77 lines
2.0 KiB
Vue
77 lines
2.0 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<el-form label-width="100px" :inline="true">
|
|
<el-row :gutter="8" >
|
|
<el-col :span="12">
|
|
<el-input v-model="url" type="text" style="width: 100%" />
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-button @click="join" type="primary">连接</el-button>
|
|
<el-button @click="exit" type="danger">断开</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="8" class="mt10">
|
|
<el-col :span="24">
|
|
<el-input type="textarea" v-model="message" :rows="5" />
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="8" class="mt10">
|
|
<el-col :span="24">
|
|
<el-button type="info" @click="send">发送消息</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="8" class="mt20">
|
|
<el-col :span="24">
|
|
<el-input type="textarea" v-model="text_content" :rows="5" />
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'WebSocketExample',
|
|
data() {
|
|
return {
|
|
url: "ws://localhost:3334/websocket/message",
|
|
message: "",
|
|
text_content: "",
|
|
ws: null,
|
|
};
|
|
},
|
|
methods: {
|
|
join() {
|
|
const wsuri = this.url;
|
|
this.ws = new WebSocket(wsuri);
|
|
const self = this;
|
|
this.ws.onopen = function (event) {
|
|
self.text_content = self.text_content + "已经打开连接!" + "\n";
|
|
};
|
|
this.ws.onmessage = function (event) {
|
|
self.text_content = event.data + "\n";
|
|
};
|
|
this.ws.onclose = function (event) {
|
|
self.text_content = self.text_content + "已经关闭连接!" + "\n";
|
|
};
|
|
this.ws.onerror = function (event) {
|
|
self.text_content = self.text_content + "连接异常!" + "\n";
|
|
}
|
|
},
|
|
exit() {
|
|
if (this.ws) {
|
|
this.ws.close();
|
|
this.ws = null;
|
|
}
|
|
},
|
|
send() {
|
|
if (this.ws) {
|
|
this.ws.send(this.message);
|
|
} else {
|
|
alert("未连接到服务器");
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|