128 lines
3.3 KiB
HTML
128 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Chat Example</title>
|
|
<script type="text/javascript">
|
|
window.onload = function () {
|
|
var conn;
|
|
var msg = document.getElementById("msg");
|
|
var log = document.getElementById("log");
|
|
|
|
function appendLog(item) {
|
|
var doScroll = log.scrollTop > log.scrollHeight - log.clientHeight - 1;
|
|
log.appendChild(item);
|
|
if (doScroll) {
|
|
log.scrollTop = log.scrollHeight - log.clientHeight;
|
|
}
|
|
}
|
|
//时间格式化
|
|
Date.prototype.Format = function (fmt) { // author: meizz
|
|
var o = {
|
|
"M+": this.getMonth() + 1, // 月份
|
|
"d+": this.getDate(), // 日
|
|
"h+": this.getHours(), // 小时
|
|
"m+": this.getMinutes(), // 分
|
|
"s+": this.getSeconds(), // 秒
|
|
"q+": Math.floor((this.getMonth() + 3) / 3), // 季度
|
|
"S": this.getMilliseconds() // 毫秒
|
|
};
|
|
if (/(y+)/.test(fmt))
|
|
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
|
|
for (var k in o)
|
|
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
|
|
return fmt;
|
|
}
|
|
|
|
document.getElementById("form").onsubmit = function () {
|
|
if (!conn) {
|
|
return false;
|
|
}
|
|
if (!msg.value) {
|
|
return false;
|
|
}
|
|
conn.send(msg.value);
|
|
|
|
|
|
var item = document.createElement("div");
|
|
var now = new Date().Format("yyyy-MM-dd hh:mm:ss:S")
|
|
item.innerText = "客户端发送消息:\t"+now+"\n\t\t"+msg.value+"\n\n";
|
|
appendLog(item);
|
|
|
|
|
|
msg.value = "";
|
|
return false;
|
|
};
|
|
|
|
if (window["WebSocket"]) {
|
|
conn = new WebSocket("ws://" + document.location.host + "/ws");
|
|
conn.onclose = function (evt) {
|
|
var item = document.createElement("div");
|
|
item.innerHTML = "<b>Connection closed.</b>";
|
|
appendLog(item);
|
|
};
|
|
conn.onmessage = function (evt) {
|
|
var messages = evt.data.split('\n');
|
|
var now = new Date().Format("yyyy-MM-dd hh:mm:ss:S")
|
|
for (var i = 0; i < messages.length; i++) {
|
|
var item = document.createElement("div");
|
|
item.innerText = "服务端回复消息:\t"+now+"\n\t\t"+messages[i]+"\n\n";
|
|
appendLog(item);
|
|
}
|
|
};
|
|
} else {
|
|
var item = document.createElement("div");
|
|
item.innerHTML = "<b>Your browser does not support WebSockets.</b>";
|
|
appendLog(item);
|
|
}
|
|
};
|
|
</script>
|
|
<style type="text/css">
|
|
html {
|
|
overflow: hidden;
|
|
}
|
|
|
|
body {
|
|
overflow: hidden;
|
|
padding: 0;
|
|
margin: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: gray;
|
|
}
|
|
|
|
#log {
|
|
background: white;
|
|
margin: 0;
|
|
padding: 0.5em 0.5em 0.5em 0.5em;
|
|
position: absolute;
|
|
top: 0.5em;
|
|
left: 0.5em;
|
|
right: 0.5em;
|
|
bottom: 3em;
|
|
overflow: auto;
|
|
}
|
|
|
|
#form {
|
|
padding: 0 0.5em 0 0.5em;
|
|
margin: 0;
|
|
position: absolute;
|
|
bottom: 1em;
|
|
left: 0px;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
input{
|
|
height: 50px;
|
|
font-size: larger;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="log"></div>
|
|
<form id="form">
|
|
<input type="submit" value="Send" />
|
|
<input type="text" id="msg" size="64" autofocus />
|
|
</form>
|
|
</body>
|
|
</html>
|