1
0
mirror of https://github.com/astaxie/beego.git synced 2024-12-23 15:50:49 +00:00
Beego/example/chat/views/index.html
astaxie 3ad639e739 support websocket #20
add example chat
2013-04-08 00:28:32 +08:00

81 lines
1.7 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://cdn.sockjs.org/sockjs-0.3.4.min.js"></script>
<script>
$(function() {
var conn = null;
function log(msg) {
var control = $('#log');
control.html(control.html() + msg + '<br/>');
control.scrollTop(control.scrollTop() + 1000);
}
function disconnect() {
if (conn != null) {
log('Disconnecting...');
conn.close();
conn = null;
updateUi();
}
}
function updateUi() {
if (conn == null || conn.readyState != SockJS.OPEN) {
$('#status').text('disconnected');
$('#connect').text('Connect');
} else {
$('#status').text('connected (' + conn.protocol + ')');
$('#connect').text('Disconnect');
}
}
$('form').submit(function() {
var text = $('#message').val();
conn.send(text);
$('#message').val('').focus();
return false;
});
conn = new SockJS('http://' + window.location.host + '/chat');
log('Connecting...');
conn.onopen = function() {
log('Connected.');
updateUi();
};
conn.onmessage = function(e) {
log(e.data);
};
conn.onclose = function() {
log('Disconnected.');
conn = null;
updateUi();
};
$('#message').val('').focus();
});
</script>
<title>Sockjs-go chat</title>
</head>
<body>
<h1>Sockjs-go chat</h1>
<div>
Status: <span id="status">disconnected</span>
</div>
<div id="log" style="width: 60em; height: 20em; overflow:auto; border: 1px solid black">
</div>
<form id="chatform">
<label for="message">Message:</label>
<input id="message" type="text" />
<input type="submit" value="Send" />
</form>
</body>
</html>