Skip to content


Subversion checkout URL

You can clone with
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"
<!-- Copyright (c) 2008 Dustin Sallings <> -->
<html lang="en">
<style type="text/css" media="screen">
#messages {
width: 400px;
height: 250px;
overflow: auto;
<h1>Welcome to Chat</h1>
<div id="messages">
<span class="from">First!:</span>
<span class="msg">Welcome to chat. Please don't hurt each other.</span>
<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>
<script type="text/javascript"
<script type="text/javascript">
var lastTimestamp = {};
// method used to update element html
$(document).ready(function() {
setInterval(function() {
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 }
}, 5000);
function onSubmit() {
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>");
function scrollDown() {
var messages = document.getElementById("messages");
messages.scrollTop = messages.scrollHeight;
Jump to Line
Something went wrong with that request. Please try again.