<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="referrer" content="origin" />
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>WebSocket Demo</title>
<style type="text/css">
body{margin:0;padding:0;}
*{box-sizing:border-box;}
#wrapper{font-size:14px;}
#wrapper>*{display:block;margin:5px;padding:5px;border:1px #ccc solid;word-wrap:break-word;word-break:break-all;white-space:pre-wrap;}
#wrapper>p{border-color:#999;}
#wrapper b{margin-right:1em;}
#wrapper a{float:right;font-size:14px;text-decoration:none;}
form{margin:0 5px 5px;}
textarea{display:block;width:100%;margin:0 0 5px;border:1px #ccc solid;outline:none;vertical-align:bottom;}
textarea:focus{border-color:#999;}
button{display:inline-block;padding:5px;outline:none;}
</style>
</head>
<body>
<div id="wrapper">
</div>
<div id="last"></div>
<form id="msgfrm">
<textarea name="msg" rows="10"></textarea>
<button name="smt" type="submit" disabled="disabled">Send</button>
<button name="reconn" type="button" style="display:none;">Reconnect</button>
<button name="close" type="button" style="display:none;">Close</button>
</form>
<script type="text/javascript">
const wrapper = document.getElementById('wrapper');
const msgfrm = document.getElementById('msgfrm');
const last = document.getElementById('last');
let I = 0;
const append = function(data, tag) { // append event or message to element
const p = document.createElement(tag||'p');
const b = document.createElement('b');
const a = document.createElement('a');
p.innerText = data;
p.id = p.name = 'msg' + I;
b.innerText = new Date().toLocaleTimeString();
a.innerText = 'next';
a.href = '#msg' + (++I);
p.prepend(b);
p.prepend(a);
wrapper.appendChild(p);
last.id = last.name = 'msg' + I;
};
let ws = null;
const WS = function() { // WebSocket connect
ws = new WebSocket('ws://' + location.host + '/ws');
ws.onopen = function(e) {
append('Connected');
msgfrm.reconn.style.display = 'none';
msgfrm.close.style.display = 'inline-block';
msgfrm.smt.disabled = '';
};
ws.onerror = function(e) {
append('Error', 'p');
};
ws.onmessage = function(e) {
append(e.data, 'pre');
};
ws.onclose = function(e) {
append('Closed');
msgfrm.reconn.style.display = 'inline-block';
msgfrm.close.style.display = 'none';
msgfrm.smt.disabled = 'disabled';
ws = null;
};
};
// element event
msgfrm.onsubmit = function() {
const val = this.msg.value;
if(val && ws) {
ws.send(val);
this.msg.value = '';
}
return false;
};
msgfrm.reconn.onclick = function() {
WS();
};
msgfrm.close.onclick = function() {
ws.close();
ws = null;
};
WS(); // auto connect
</script>
</body>
</html>