2013-10-16 20:41:47 +04:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<title>Chat Example</title>
|
|
|
|
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
|
|
|
|
|
<script type="text/javascript">
|
2016-05-26 20:19:40 +03:00
|
|
|
$(function () {
|
2013-10-16 20:41:47 +04:00
|
|
|
var conn;
|
|
|
|
|
var msg = $("#msg");
|
|
|
|
|
var log = $("#log");
|
|
|
|
|
|
|
|
|
|
function appendLog(msg) {
|
2016-05-26 20:19:40 +03:00
|
|
|
var d = log[0];
|
|
|
|
|
var doScroll = d.scrollTop === d.scrollHeight - d.clientHeight;
|
|
|
|
|
msg.appendTo(log);
|
2013-10-16 20:41:47 +04:00
|
|
|
if (doScroll) {
|
|
|
|
|
d.scrollTop = d.scrollHeight - d.clientHeight;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2016-05-26 20:19:40 +03:00
|
|
|
$("#form").submit(function () {
|
2013-10-16 20:41:47 +04:00
|
|
|
if (!conn) {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
if (!msg.val()) {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
conn.send(msg.val());
|
|
|
|
|
msg.val("");
|
2016-05-26 20:19:40 +03:00
|
|
|
return false;
|
2013-10-16 20:41:47 +04:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (window["WebSocket"]) {
|
|
|
|
|
conn = new WebSocket("ws://{{$}}/ws");
|
2016-05-26 20:19:40 +03:00
|
|
|
conn.onclose = function (evt) {
|
|
|
|
|
appendLog($("<div><b>Connection closed.</b></div>"));
|
|
|
|
|
};
|
|
|
|
|
conn.onmessage = function (evt) {
|
|
|
|
|
appendLog($("<div/>").text(evt.data));
|
|
|
|
|
};
|
2013-10-16 20:41:47 +04:00
|
|
|
} else {
|
2016-05-26 20:19:40 +03:00
|
|
|
appendLog($("<div><b>Your browser does not support WebSockets.</b></div>"));
|
2013-10-16 20:41:47 +04:00
|
|
|
}
|
2016-05-26 20:19:40 +03:00
|
|
|
});
|
2013-10-16 20:41:47 +04:00
|
|
|
</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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="log"></div>
|
|
|
|
|
<form id="form">
|
|
|
|
|
<input type="submit" value="Send" />
|
|
|
|
|
<input type="text" id="msg" size="64"/>
|
|
|
|
|
</form>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
