Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
tree: 510220cda7
Fetching contributors…

Cannot retrieve contributors at this time

82 lines (74 sloc) 2.376 kB
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Copyright (c) 2008 Dustin Sallings <dustin+html@spy.net> -->
<html lang="en">
<head>
<title>chat</title>
<style type="text/css" media="screen">
#messages {
width: 400px;
height: 250px;
overflow: auto;
}
</style>
</head>
<body>
<h1>Welcome to Chat</h1>
<div id="messages">
<div>
<span class="from">First!:</span>
<span class="msg">Welcome to chat. Please don't hurt each other.</span>
</div>
</div>
<form id="chat-form" onsubmit="onSubmit(); return false;">
<div><label for="from">Nick:</label> <input id='from' type="text" name="from" value="Foo"/></div>
<div><label for="msg">Message:</label></div>
<div><textarea id='msg' name="msg" rows="3" cols="50"></textarea></div>
<div><input type="submit" value="Say it" id="submit"/></div>
</form>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
var lastTimestamp = {};
// method used to update element html
$(document).ready(function() {
$("#msg").focus();
setInterval(function() {
$.ajax({
url: "http://<%= request.host_with_port %>/retrieve",
type: "GET",
data: lastTimestamp,
dataType: "json",
success: function(data) {
$.each(data, function(i, item) {
$("#messages").append( "<div><span class=\"from\">" + item.from + ":</span>\n<span class=\"msg\">" + item.msg + "</span></div>");
lastTimestamp = { last_timestamp: item.timestamp }
});
scrollDown();
},
})
}, 5000);
});
function onSubmit() {
$.ajax({
url: "http://<%= request.host_with_port %>/receive",
type: "POST",
dataType: "json",
data: $("#chat-form").serialize(),
success: function(data) {
$.each(data, function(i, item){
$("#messages").append( "<p>" + item.message + "</p>");
})
scrollDown();
},
});
$("#msg").val("").focus();
}
function scrollDown() {
var messages = document.getElementById("messages");
messages.scrollTop = messages.scrollHeight;
}
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.