JSL Demo - Chatter

Implements a very simple chatting application in around 20 lines of code. Don't believe me? Take a look at the code. The JS code that powers this application is just 20 lines(24 to be exact(22 if you don't count the \n's - but I getting off track here)).

The Code...

var last_fetch = ""; // A global variable that holds the last chat status
function send(e) { //Called on a form submit
	JSL.event(e).stop(); // Stops the form submit event
	var msg = $("msg").value;
	if(!msg) return; //If the chat message is empty, don't send it
	$("msg").value = ""; // Clear the chat text box
	
	JSL.ajax("chat.php?action=send&msg="+msg).load(); //Send the chat message to the server - ajax call.
	JSL.dom("display").innerHTML = msg + "<br />" + JSL.dom("display").innerHTML; //Add the newly added message to the screen.
}
function fetch() { // Called every 3 seconds
	JSL.ajax("chat.php?action=fetch").load(function(txt){ //Ajax call that fetches the chat data as plain text.
		if(txt != last_fetch) {
			last_fetch = txt;
			JSL.dom("display").innerHTML = txt.replace(/\n/g, "<br />"); //And shows in on the screen.
		}
	});
}

function init() {
	$("msg").focus();
	
	JSL.dom("chat").on("submit", send); //Attaches the send() to the form 'chat' 's submit event.
	window.setInterval("fetch()", 3000); // Delay 3 seconds
}
JSL.dom(window).load(init); //Calls the init() on page load

See It In Action...

asd
asd
hello
hello
BEHERE
rtry
nb
12
lllll
ggg
ggg
rtyrty
cool
hello
gat
jhnj
45345
dfdfdf
fdfdfd
test 1,2,3
lol
öl
56
af
salam
salam
blog comments powered by Disqus