AJAX Chat

[NXArmada]

Im working on a simple AJAX chat script. I have 2 text boxs one for the username and one for the user message. Everytime a user sends a message it clears both the username and message box. What i want it to do is keep the Username the user had entered and clear the message box after every send like it already does.

JavaScript Code:

<script type="text/javascript">
/* Writing Ajax Requests */
var http_request=false;var http_request2=false;var intUpdate;function ajax_request(url){http_request=false;if(window.XMLHttpRequest){http_request=new XMLHttpRequest();if(http_request.overrideMimeType){http_request.overrideMimeType('text/xml');}}else if(window.ActiveXObject){try{http_request=new ActiveXObject("Msxml2.XMLHTTP");}catch(e){try{http_request=new ActiveXObject("Microsoft.XMLHTTP");}catch(e){}}}
if(!http_request){alert('Giving up :( Cannot create an XMLHTTP instance');return false;}
http_request.onreadystatechange=alertContents;http_request.open('GET',url,true);http_request.send(null);}
function alertContents(){if(http_request.readyState==4){if(http_request.status==200){rec_response(http_request.responseText);}else{}}}

/* Reading Ajax Requests */
function ajax_request2(url){http_request2=false;if(window.XMLHttpRequest){http_request2=new XMLHttpRequest();if(http_request2.overrideMimeType){http_request2.overrideMimeType('text/xml');}}else if(window.ActiveXObject){try{http_request2=new ActiveXObject("Msxml2.XMLHTTP");}catch(e){try{http_request2=new ActiveXObject("Microsoft.XMLHTTP");}catch(e){}}}
if(!http_request2){alert('Giving up :( Cannot create an XMLHTTP instance');return false;}
http_request2.onreadystatechange=alertContents2;http_request2.open('GET',url,true);http_request2.send(null);}
function alertContents2(){if(http_request2.readyState==4){if(http_request2.status==200){rec_chatcontent(http_request2.responseText);}else{}}}

/* Chat Stuff */
waittime=2000;
intUpdate=window.setTimeout("read_cont()", waittime);
chatwindow.value = "connecting...";

	function display_msg(msg1) {
		/* Fill Textarea with the Content */
		chatwindow.value = msg1;
	}

	function write_msg(msg1) {
		ajax_request("w.php?m=" + escape(msg1));
	}
		
	function submit_msg() {
		/* Send My Message */
		write_msg(chatname.value + chatnms.value + chatmsg.value);
		chatname.value="";
		chatnms.value=": ";
		chatmsg.value="";
	}
			
	function rec_response(str1) {
		/* Response From w.php */
	}

	function rec_chatcontent(cont1) {
		if (cont1 != "") { 
			out1 = "";
			/* Display Last Message First */
			while (cont1.indexOf("\n") > -1) {
				out1 = cont1.substr(0, cont1.indexOf("\n")) + "\n" + out1;
				cont1 = cont1.substr(cont1.indexOf("\n") + 1);
			}
			out1 = unescape(out1);
			if (chatwindow.value != out1) { display_msg(out1); }
			intUpdate=window.setTimeout("read_cont()", waittime);
		}		
	}

	function read_cont() { 
		/* Prevent Buffering by using ?x=timeinms */
			zeit = new Date();
		   ms = (zeit.getHours() * 24 * 60 * 1000) + (zeit.getMinutes() * 60 * 1000) + (zeit.getSeconds() * 1000) + zeit.getMilliseconds();
		ajax_request2("chat.txt?x=" + ms); 
	}
	function keyup(arg1) { 	if (arg1 == 13) { 	submit_msg(); } }
</script>

chatname.value=""; - Username
chatnms.value=": "; - Spacer Between Username and Message
chatmsg.value=""; - User Message

Heres the Form:

		<textarea id="chatwindow" rows="10" cols="80" style="border:1px solid #aaaaaa; padding:4px;" readonly></textarea><br>
		<input id="chatname" type="text" size="20" style="border:1px solid #aaaaaa;"><input id="chatnms" type="hidden" value=": "><input id="chatmsg" type="text" size="20" style="border:1px solid #aaaaaa;" onkeyup="keyup(event.keyCode);"> <input type="button" value="ok" onclick="submit_msg()" style="cursor:pointer;border:1px solid gray;">

[shachi]

Do you see the chatname.value = "" on the submit_msg() function?? Remove that line and it should work.

chatname.value="";
chatnms.value=": ";
chatmsg.value="";

[NXArmada]

Thank You for your reply. It Works now.

[shachi]

No Problem.

[NXArmada]

Using the same JAVASCRIPT code i provided above is there a way i can have the textarea replaced with a DIV tag so if I input HTML into the send message box it gets parsed into html say:

<b>name</B>

comes out in the DIV tag as name

I am new to JAVASCRIPT but i am learning fast.

[shachi]

Try this:

	<div id="chatwindow" style="border:1px solid #aaaaaa;padding:4px;height: 300px;width:300px;"></div>

[NXArmada]

I tried that when i first started but it never worked.

I have it working now I re-wrote the part of the code that displays the messages and this what i have come up with.

function display_msg(msg1) {
		/* Fill Textarea with the Content */
		document.getElementById("chatdiv").innerHTML=msg1 ;
	}

<div id="chatdiv"></div>

Once I made those changes everything I asked about above works now.

Thanks for the reply though.

[shachi]

Hey, I knew that the only thing was that I thought you were using things like document.textarea[0].... Anyways there is a problem I need to tell you. If anyone sends a message a message with an open tag, the following messages will be bold.

For e.g if I send the message : this is a <b>test
then the messages following that will be bold.

[NXArmada]

Yea that is one flaw but no one that will use the chat box will know HTML or that they can use it.

Its a Simple chat, I wanted the HTML support so I can make the ADMINS in the room name Bold.

[shachi]

It is not important that the one who uses the chat must not know HTML, he/she may know it too and if that happens then people may even place img tags so I suggest you to strip tags using the PHP strip_tags function or just doing it using regexps.

I have made a chatting system too(with ajax and php but unfortunately only works in FF, it's somewhere in the DD script library dunno where) and I had to do a lot of bugfixes because of those things.


To do that you can simply tell javascript to make the admin's name bold something like this: if(document.chatform.guestname.value == "Admin" || document.chatform.guestname.value == "admin"){ajaxrequest.send("name=<b>admin</b>&someotherthing=something")}

Just a suggestion though.