Skip to content

1
1024程序员开源挑战赛

夜猫逐梦 / 1024程序员开源挑战赛
与 Fork 源项目一致

Fork自 GitCode / 1024程序员开源挑战赛（10.23-11.14）

通知 3
Star 1
Fork 0
1
1024程序员开源挑战赛
提交 90daab05 编写于 作者: B baiy 提交者： ninecents
浏览文件
操作

update

上级 951cd909
隐藏空白更改
内联 并排
Showing with 129 addition and 158 deletion
src/views/tool/websocket.vue
浏览文件 @ 90daab05
<template> <template>
<div> <Row :gutter="10">
<Input v-model="current.url" class="page-option-block" style="margin-bottom: 10px"> <Col span="10">
<Row :gutter="6">
<Col span="18">
<Input v-model="current.url">
<span slot="prepend"> <span slot="prepend">
<Badge style="margin-left:10px" :status="status ? 'success' : 'error'"/> <Badge style="margin-left:10px" :status="status ? 'success' : 'error'"/>
</span> </span>
<Button slot="append" v-if="!status" @click="handle()">{{ $t('websocket_connect') }}</Button> </Input>
<Button slot="append" v-else @click="handle()">{{ $t('websocket_close') }}</Button> </Col>
</Input> <Col span="6">
<Row :gutter="10"> <Button long v-if="!status" type="success" @click="handle()">连接</Button>
<Col span="10"> <Button long v-else type="error" @click="handle()">断开</Button>
<input-block top="7px" right="7px"> </Col>
<heightResize :append="['.page-option-block']"> </Row>
<autoHeightTextarea v-model="sendContent" :placeholder="$t('websocket_send_content')"/> <Input style="margin: 10px 0 5px" v-model="sendContent" :rows="14" type="textarea"
</heightResize> placeholder="发送内容"></Input>
<template slot="extra"> <Button type="primary" @click="send()" long>发送</Button>
<Button :disabled="!status" type="primary" size="small" @click="send">{{ </Col>
$t('websocket_send') <Col span="14">
}} <Card>
</Button> <p slot="title">交互内容</p>
</template> <template slot="extra">
</input-block> <Button style="margin-right: 5px" size="small" type="primary" @click="copyAll()">复制全部</Button>
</Col> <Button size="small" type="primary" @click="clear()">清空</Button>
<Col span="14"> </template>
<input-block top="7px" right="7px" :text="$t('websocket_send')" @on-default-right-bottom-click="send">
<heightResize :append="['.page-option-block']" @resize="logHeightSet"> <div class="lists-block" id="log" style="height: 300px;overflow: hidden;overflow-y:auto;">
<Card> <div v-for="(item,key) in lists" :key="key">
<div class="lists-block" id="log" <div class="item" v-if="item.type === 'send'" style="color:green">
:style="`height: ${logHeight}px;overflow: hidden;overflow-y:auto;`"> 你 {{item.time}}
<div v-if="lists.length === 0" style="font-size: 14px;color: #999999"> </div>
{{ $t('websocket_log_content') }} <div class="item" v-else-if="item.type === 'accept'" style="color:blue">
</div> 服务端 {{item.time}}
<div v-else v-for="(item,key) in lists" :key="key"> </div>
<div class="item" v-if="item.type === 'send'" style="color:green"> <div class="item" v-else>
{{ $t('websocket_you') }} {{ item.time }} {{item.time}}
</div> </div>
<div class="item" v-else-if="item.type === 'accept'" style="color:blue"> <div class="item">
{{ $t('websocket_server') }} {{ item.time }} <Icon style="cursor: pointer" type="md-copy" @click="copy(item.content)"/>
</div> {{item.content}}
<div class="item" v-else> </div>
{{ item.time }} </div>
</div> </div>
<div class="item"> </Card>
<Icon style="cursor: pointer" type="md-copy" @click="copy(item.content)"/> </Col>
{{ item.content }} </Row>
</div>
</div>
</div>
</Card>
</heightResize>
<template slot="extra">
<Button style="margin-right: 5px" size="small" type="primary" @click="copyAll()">
{{ $t('websocket_copy') }}
</Button>
<Button size="small" type="primary" @click="clear()">{{ $t('websocket_clear') }}</Button>
</template>
</input-block>
</Col>
</Row>
</div>
</template> </template>
<script> <script>
import moment from 'moment' import moment from 'moment'
import heightResize from "./components/heightResize";
import autoHeightTextarea from "./components/autoHeightTextarea";
export default { export default {
components: { created() {
heightResize, this.current = Object.assign(this.current, this.$getToolData())
autoHeightTextarea
},
created() {
this.$initToolData()
},
methods: {
handle() {
if (this.status) {
return this.close();
}
return this.connect();
},
connect() {
if (!this.current.url.trim()) {
return
}
this.$saveToolData(this.current);
this.log(this.$t('websocket_connect_start', [this.current.url]).toString())
let websocket = new WebSocket(this.current.url);
websocket.onopen = (evt) => {
this.onOpen(evt)
};
websocket.onclose = (evt) => {
this.onClose(evt)
};
websocket.onmessage = (evt) => {
this.onMessage(evt)
};
websocket.onerror = (evt) => {
this.onError(evt)
};
this.ws = websocket;
},
close() {
this.log(this.$t('websocket_close_start', [this.current.url]).toString())
this.ws.close();
},
clear() {
this.lists = [];
},
log(content, type = "other") {
this.lists.push({content, type, time: moment().format("YYYY-MM-DD HH:mm:ss")});
this.$nextTick(() => {
let log = document.getElementById('log');
log.scrollTop = log.scrollHeight;
})
}, },
copy(s) { methods: {
this.$clipboardCopy(s); handle() {
}, if (this.status) {
copyAll() { return this.close();
this.copy(JSON.stringify(this.lists));
},
send() {
try {
if (!this.status) {
throw new Error(this.$t('websocket_error_connect').toString())
} }
if (!this.sendContent) { return this.connect();
throw new Error(this.$t('websocket_error_content').toString()) },
connect() {
let websocket = new WebSocket(this.current.url);
websocket.onopen = (evt) => {
this.onOpen(evt)
};
websocket.onclose = (evt) => {
this.onClose(evt)
};
websocket.onmessage = (evt) => {
this.onMessage(evt)
};
websocket.onerror = (evt) => {
this.onError(evt)
};
this.ws = websocket;
},
close() {
this.ws.close();
},
clear() {
this.lists = [];
},
log(content, type = "other") {
this.lists.push({content, type,time:moment().format("YYYY-MM-DD HH:mm:ss")});
this.$nextTick(() => {
let log = document.getElementById('log');
log.scrollTop = log.scrollHeight;
})
},
copy(s) {
this.$clipboardCopy(s);
},
copyAll() {
this.copy(JSON.stringify(this.lists));
},
send() {
try {
if (!this.status) {
return this.$Message.error("ws还没有连接，或者连接失败，请检测");
}
if (!this.sendContent) {
return this.$Message.error("发送内容不能为空");
}
this.ws.send(this.sendContent);
this.log(this.sendContent, 'send')
} catch (e) {
this.log('错误异常: ' + e)
} }
this.ws.send(this.sendContent); },
this.log(this.sendContent, 'send') onOpen() {
} catch (e) { this.status = true;
this.log(this.$t('websocket_error', [e.message]).toString()) this.log("连接成功")
},
onClose() {
this.status = false;
this.log("连接关闭")
},
onMessage(evt) {
this.log(evt.data, 'accept')
},
onError(evt) {
this.log('错误异常: ' + evt.data())
} }
}, },
onOpen() { data() {
this.status = true; return {
this.log(this.$t('websocket_connect_ok').toString()) current: {
}, url: "wss://echo.websocket.org",
onClose() { },
this.status = false; status: false,
this.log(this.$t('websocket_close_ok').toString()) wx: null,
}, sendContent: "",
onMessage(evt) { lists: [],
this.log(evt.data, 'accept') }
},
onError(evt) {
this.log(this.$t('websocket_error', [evt.data()]).toString())
}, },
logHeightSet(height) { }
this.logHeight = Math.max(height - 34, 100)
}
},
data() {
return {
current: {
url: "wss://echo.websocket.events",
},
status: false,
wx: null,
sendContent: "",
lists: [],
logHeight: 100,
}
},
}
</script> </script>
<style scoped> <style scoped>
.lists-block { .lists-block {
font-size: 14px; font-size: 12px;
line-height: 28px; }
}
</style> </style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或