<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebSocket测试</title>
<style>
* {
box-sizing: border-box;
}
h1 {
font-size: 26px;
}
#app {
padding: 0 15px;
}
.text-1 {
display: inline-block;
400px;
height: 34px;
line-height: 34px;
padding: 0 12px;
font-size: 14px;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
outline: 0;
margin-bottom: 15px;
}
.text-1:focus {
border-color: rgba(51, 51, 51, 0.5);
}
.btn {
display: inline-block;
padding: 0 12px;
font-size: 14px;
font-weight: 400;
height: 34px;
line-height: 32px;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-radius: 4px;
color: #eee;
outline: 0;
border: 0;
margin-right: 10px;
background: #09c;
}
.online {
margin: 0 10px;
background-color: #337ab7;
border: 1px solid #337ab7;
color: #fff;
}
.offline {
background-color: #c9302c;
outline: 0;
border: 1px solid #c9302c;
color: #fff;
}
.msg-alert-show {
animation: msg-alert-show 0.1s ease-in forwards;
}
.msg-alert-hide {
animation: msg-alert-hide 0.1s ease-in forwards;
}
@keyframes msg-alert-show {
0% {
transform: translate(-50%, -50%) scale(0);
}
100% {
transform: translate(-50%, -50%) scale(1);
}
}
@keyframes msg-alert-hide {
0% {
transform: translate(-50%, -50%) scale(1);
}
100% {
transform: translate(-50%, -50%) scale(0);
}
}
.msg {
display: inline-block;
border: 1px solid #ccc;
vertical-align: top;
height: 600px;
400px;
border-radius: 3px;
margin: 0 0 20px;
overflow: auto;
}
.msg-inner {
padding: 0 0 20px;
}
.msg .item {
font-size: 13px;
padding: 4px 10px;
margin: 0;
}
.msg .item:nth-child(odd){
background: #f5f5f5;
}
.msg .item time {
font-size: 12px;
color: #5FB878;
}
.msg .item p {
margin: 0;
padding: 5px 0 4px;
}
.content {
400px;
height: 600px;
display: inline-block;
vertical-align: top;
margin: 0 10px 20px 0;
position: relative;
}
.content textarea {
100%;
height: 100%;
border: 1px solid #ccc;
border-radius: 3px;
resize: none;
padding: 6px 10px;
font-size: 15px;
outline: 0;
font-family: popin;
}
.content textarea:focus {
border-color: rgba(51, 51, 51, 0.5);
}
[v-cloak] {
display: none;
}
.disabled {
cursor: not-allowed;
opacity: 0.3;
}
</style>
<script src="tool/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1>WebSocket测试</h1>
<div>
<input type="text" class="text-1" v-model="wsAddress">
<button :class="['online','btn',flag ? 'disabled' :'']" @click="online">连接</button>
<button :class="['offline','btn',!flag ? 'disabled' :'']" @click="offline">断开</button>
</div>
<div class="content">
<textarea v-model="inputText" placeholder="请输入发送内容"></textarea>
</div>
<div class="msg" ref="msgBox" v-cloak>
<div class="msg-inner">
<div class="item" v-for="item in msgList">
<time>{{ item.time }}</time>
<p v-html="item.msg"></p>
</div>
</div>
</div>
<div class="btn-box">
<button class="btn" @click="cleanLog">清空消息记录</button>
<button class="btn" @click="cleanInput">清空输入</button>
<button class="btn" @click="send">发送</button>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
wsAddress: 'ws://192.168.1.85:8094/ws?uname=1',
msgList: [],
flag: false, // 是否连接成功
inputText: '',
ws: null
},
methods: {
online: function () {
var that = this;
if (that.flag) {
return;
}
if (/^ *$/.test(that.wsAddress)) {
return that.addMsg('请输入地址');
}
that.ws = new WebSocket(that.wsAddress);
that.addMsg('连接中...');
// 绑定连接事件
that.ws.onopen = function (e) {
that.addMsg(that.wsAddress + ' 连接成功');
that.flag = true;
};
//绑定收到消息事件
that.ws.onmessage = function (e) {
console.log(e)
that.addMsg('【服务器返回】' + e.data);
};
//绑定关闭或断开连接事件
that.ws.onclose = function (e) {
that.flag = false;
console.log(e)
if (e.currentTarget.readyState === 3) {
that.addMsg('WebSocket 已关闭或连接不能打开');
}
};
// error
that.ws.onerror = function (e) {
console.log(e)
that.flag = false;
that.addMsg('WebSocket 已关闭或连接不能打开');
}
},
offline: function () {
if (this.flag) {
this.ws.close();
this.flag = false;
this.ws = null;
}
},
send: function () {
if (this.ws === null) {
return this.addMsg('WebSocket 未连接');
}
if (/^ *$/.test(this.inputText)) {
return this.addMsg('请输入发送内容');
}
this.ws.send(this.inputText);
this.addMsg(this.inputText);
},
cleanInput: function () {
this.inputText = '';
},
cleanLog: function () {
this.msgList = [];
},
addMsg: function (msg) {
var that = this;
this.msgList.push({
time: this.getTime(),
msg: msg
});
setTimeout(function () {
that.$refs.msgBox.scrollTop = that.$refs.msgBox.scrollHeight;
}, 5)
},
getTime: function () {
var date = new Date(),
year = date.getFullYear(),
month = date.getMonth() + 1,
day = date.getDate(),
hour = date.getHours(),
minute = date.getMinutes(),
second = date.getSeconds();
return year + '-' + (month < 10 ? '0' + month : month) + '-' +
(day < 10 ? '0' + day : day) + ' ' +
(hour < 10 ? '0' + hour : hour) + ':' +
(minute < 10 ? '0' + minute : minute) + ':' +
(second < 10 ? '0' + second : second);
}
}
})
</script>
</body>
</html>
学习资料
js中WebSocket
vue项目使用websocket技术