Plain old HTML & Javascript.
Include js-chat.js in your layout, then take a look at the examples.
<head> <script src="/path/to/js-chat.js" type="text/javascript"></script> </head>
The server can be customized with a hash of options.
var options = { interval: 10000 };
var server = new Server(options);
See the →API→ docs for all the options.
One attempt of the examples is to provide a global server
instance, which communicates with whatever means you're using to store the chat messages.
Actual code can be found in the examples/ directory.
<!-- Plain HTML/Javascript -->
<head>
<script type="text/javascript">
var server = new Server();
// Setup the server (see below).
server.run();
</script>
</head>
// jQuery
$(document).ready(function() {
var server = new Server();
// Setup the server (see below).
server.run();
// ...other jQuery shit.
});
Now that you have a server object, you must overload a few
methods. After that, what you do with the data is up to you.
First, the server.send() method.
This method takes two arguments; a Person instance and the
message (string).
The second is server.poll(), which is called on the server's
interval to get new messages from the server (or do anything, really).
// Shorthand helper.
function element(id) {
return document.getElementById(id);
}
// This function will be called once the DOM is loaded.
window.onload = function() {
// Create a new server instance.
var server = new Server();
// Overload the send method to just append the person's name
// and the message to an element.
server.send = function(person, message) {
element('chat-log').innerHTML += person.name + ': ' + message + '\n';
// Store the message.
};
// Overload the poll method to get any new messages from the server.
server.poll = function() {
element('chat-log').innerHTML += 'Polling...\n';
// Get some messages and do something...
};
// Now run the server.
server.run();
// ...other UI shit.
element('chat-submit').onclick = function() {
var message = element('chat-input').value;
var name = element('person-name').value;
// Create a new Person; modify as needed.
// Here, we just send 'say' the message.
new Person(name, server).say(message);
return false;
}
} // window.onload()
Here's a simple example, using jQuery.
$(document).ready(function() {
server.send = function(person, message) {
$.Ajax({
type: 'POST',
url: '/messages',
data: {'person_name': person.name, 'message': message },
success: function() { // do something }
});
};
}); // $(document).ready()
You get the idea. Basically server.send() and
server.poll() are open-ended and allow you to insert any
kind of functionality you need.
You can download this project in either zip or tar formats.
You can also clone the project with Git by running:
$ git clone git://github.com/Oshuma/js-chat
The API docs are located here. The test suite (using ScrewUnit) is available here and a simple demo can be found here.
Dale Campbell - http://oshuma.github.com/
WTFPL, bitches.