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...

dsadsadas
aasdsd
moi
My name
5454
124
20
22
cx
cx
cxc
asdasd
ooo
lob
moi
bbbbbb
BBB
asdasdasds
adasd
hALLO
ioioi
wht
kjk;
gfg
we
wearwe
blog comments powered by Disqus