JavaScript - Adding Chat To Our Website

Does anyone know of a good tutorial on how to make a good node.js chat?

I need a chat that a decent VPS server can handle ~100 simultaneous users with and apparently I should be using node.js but have no experience with it.

What should I look at?

Thanks!

So, I need help with a script that swaps out chatango chats and allows you to expand/shrink them. Here's the source:

Code:

<div id="chatWrap">
	<div id="cbox"></div>
	<div id="ccon">
		<button onclick="switchChat();">Switch to <strong id="cnext">Chat Title</strong></button>
		<button id="csize" onclick="resizeChat();">Expand</button>
	</div>
</div><br />
<div id="chatNotice" style="display:none;">Note: When you switch chats, the expand/shrink button stops working until you reload the page. Hopefully this will be fixed soon. <a href="javascript:void(0);" onclick="javascript:get('chatNotice').style.display='none';">[Hide this Notice]</a></div>
<script type="text/javascript"><!-- // --><![CDATA[
	var chats = [];
	chats[0] = ['Forums Chat','dh-forums-chat', 1249524788838];
	chats[1] = ['Main Chat', 'dh-chat', 1247103393344];
	var chat = {
		'opt': 'b=60&f=50&l=999999&q=999999&r=100&s=1',
		'ref': 'www.dubhappy.com',
		'cur': 0,
		'delay': 1.5,
		'params': [['wmode','transparent'] , ['allowscriptaccess','always'] , ['allownetworking','internal']]
	}

	var chatState = 0;
	var chatStates = [];
	chatStates[0] = ['Expand', '300px'];
	chatStates[1] = ['Shrink', '500px'];

	var eles=[''];
	function get(id){eles[id]=eles[id]||document.getElementById(id)||false;return eles[id];}
	function cE(e){return document.createElement(e);}
	function cT(s){return document.createTextNode(s);}

	var ie = false;

	function aO(d, t, src, p, id ){
		var o, e, i;
		if (!ie){ o = cE('object');o.data = src; } 		
		else { o = cE('embed'); o.src = src; }
		o.id = id;
		if (!ie){ p.push( ['movie', src] ); }
		if ( typeof(id) === 'String' ){o.id = id;}
		o.type = t;
		for(i = 0; i < p.length; i++){
			e = cE('param');
			e.name = p[i][0];
			e.value = p[i][1];
			o.appendChild(e);
		}
		d.appendChild(o);
	}

	function switchChat(){
		var x = chat.cur;
		chat.cur = (x + 1) % chats.length;
		var c = chats[x];
		var src = 'http://st.chatango.com/flash/group.swf?ref=' + chat.ref + '&gn=' + c[1] + '.chatango.com&cid=' + c[2] + '&' + chat.opt;
		get('cbox').innerHTML = '';
		aO( get('cbox'), 'application/x-shockwave-flash', src, chat.params, 'chat' );
		get('ccon').style.display = 'block'; // qfix
		get('cnext').innerHTML = chats[chat.cur][0];

		get('chat').style.height = chatStates[chatState][1];
		get('csize').innerHTML = chatStates[chatState][0];
	}
	
	function resizeChat(){
		if(chatState == 0)
			chatState = 1;
		else
			chatState = 0;
		get('chat').style.height = chatStates[chatState][1];
		get('csize').innerHTML = chatStates[chatState][0];
	}

	function chatInit(){
		if (navigator.userAgent.indexOf('MSIE') !== -1){ie = true;}
		if ( chat.delay <= 0 ){
			switchChat();
		} else {
			var i = cE('img');
			i.src = 'http://dubhappy.com/ajax-loader.gif';
			get('cbox').appendChild(i);
			get('cbox').appendChild( cT(' Loading Chat...') );
			window.clk = setTimeout( function(){switchChat(); get('chatNotice').style.display = '';}, chat.delay * 1000 );
		}
		delete chatInit;
	}
	chatInit();
//]]></script>

There's also some CSS:

Code:

/* Chat Styling */
#chatWrap{ 
   width: 235px; 
   margin: 0 auto;
}
   
#chat{
   height: 300px;
   width: 235px;
}
      
#ccon{display: none;}
      
#ccon a{
   text-decoration: none;
   display: block;
}

This is implemented at http://forums.dubhappy.com/
As you can see by the notice under the chatbox, after swapping out the chats, the expand/shrink button no longer works until you reload the page. Do you know how to fix this? I've spent way too much time trying to figure out why this was happening. Much thanks if you manage to figure out the problem.

What is the most efficient type of chat to make?

From what I see online most people use a database and limit the number of results they return, but I noticed that some chats, like google and facebook, for some reason are able to load the full chat and get results almost instantly.

How do they do it?

I would love to make a replica of a google chat and just redesign the way it looks. If anyone can help me with the javascript/php part of this, that would be great.

thanks!

I have developed one to one chat in asp.net. Now I wanted a gmail chat like feature in it. In left side of page, a list of online users should be available. When I click on a user, a new div should popup on right bottom corner with close and minimise buttons.
When I click on another user , a second div should popup on right bottom corner of page but left to the first popup div.
I want popping up of divs dynamically. The no of clicked users should decide the no of popped up divs. Also, for each division there should be a separate division ( inside the popped division ) whose innerhtml value is my chat text.
And if three divs are popped up and if I close the second one, the third should get attach to first popup.

Hope, you'll understand my requirements, and will provide a suitable code in javascript.

Hi, I have a problem with max. memory usage,
and I wonder what pingtime in a chat program is for,
I imagine its to refresh to see if person is still there, but not sure,
if anybody can explain.
I have this on all pages where the chat is:
serversession=1&pingtimes=15
I wonder if it makes any difference to change the pingtime,
thanks

Im not sure what type of script it is, but another site i saw had a webcam chat room that was a swf file. I know that flash, but where can i get a script for a Webcam chat room to set up on my site.

Thanks

Hey guys.

I made a chat client today (my first one and it's pretty sweet so far)

I have a speed problem though

http://xonicgames.com/hudson/chat.php

Once there are ~20+ posts it starts getting slow (at least on my connection)

It does an ajax request every 500 seconds (dont know if that should be slowed down or not)

What can I do to speed it up?

Thanks

I want to make a chat-box so people can log in under a nickname and talk to eachother, anyone have any idea how i can go about doing this?

Sorry if this post is very noobish, its because I am a noob.

Ok, so I have a forum with Proboards and want to add a chat using the "headers/footers" but as Ive been having some trouble on my forum, I need the chat to have an admin panel (ban, warn, even see IP's if possible etc). I also need it to be streaming, not a refresh chat room. I cant seem to find a chat with this function anywhere, can anyone help?

P.S I know you can have AddonChat with Proboards but that does not have the admin tools that I need and I cant afford to pay for these priveleges.

If this is not possible, does anyone know any codes I could use with my AddonChat to at least give me some kind of admin control?

Cheers xx

I have got a script for chat room from hotscripts however the author has left the site and I am not able to contact him. So if anyone here can guide me a bit? It is basically a php/ajax chat room script using javascript. It runs fine here is a demo:


Code:

http://sharinganuser.freeiz.com/Test/chat/

i have set it up properly and it is even using mysql database. My question is that I want to make log of what ever the chat is happening (even the private ones) as I am admin. I am very good at php and understand what he has done in php but I when it comes to javascript i am not a person for it. So if anyone can help me with javascript? Cause when I see the msg send button source code it shows onclick is javascript:void(0) means it is using a java script. And there are total of 4 js files used:


Code:

http://sharinganuser.freeiz.com/Test/chat/js/

Note: log saved in database only remains for 15 minutes or somewhat like that cause i checked the data the old conversation was gone so I am now trying to use PHP fwrite code. i know how to write and implement it but again it has to go in some js file where the send button is related and I am not sure which file and exactly where. So any help would be appreciated.

Regards,

Hi,

Im not sure if this is in the right place, but anyway, what im trying to achieve is turning an x7 chat application into a paid to chat service, i know it can be done but im just not sure how to code it, what i was wanting to do is have an earnings bar that updates itself when a member types a line of chat and credits that user with the current line pot ie 0.01 per line written on the chat

(example) Users current earnings 0.0001c

current written line pot 0.0003

Hope this makes sense

Can anyone help me please

Thanks in advance

Baz

I've made a ajax chat system. Works fine all browser but opera. Opera seems to have a problem with double posting the same message over and over again. I can't seem to figure out why it's doing this. Is it a known opera bug?

So the way the chat works is that you type in your message, your press enter, it then sends it to the server so that it can later be fetched by ajax to append it to the chat window. This seems to all work fine with all browser but opera. Please note that my Javascript isn't the best in the world, so any comments about the way I'm coding it and pointing out errors in my code would be awesome. Maybe someone here can explain to me why this is happening. Here is the code. Thanks for anytime spent into looking at this.


Code:

var refresh_rate = 1000; //Every second		
var idleTime = 1200000; //20 minutes
var prev;

	function fade(obj, duration, toggle) {
	this.steps = 300;
	this.elem = document.getElementById(obj);
		
	function fadeIn() {
		for(var i = 0; i <= 1; i+=(1/this.steps)) {
			if(document.getElementById && !document.all) {
				setTimeout("this.elem.style.opacity = "+ i +"", i * duration);
			}
			else {
				setTimeout("this.elem.style.filter='alpha(opacity="+ i * 102 +"'", i * duration);
			}
		}
	}
	
	function fadeOut() {
		for(var i = 0; i <= 1; i+=(1/this.steps)) {
			if(document.getElementById && !document.all) {
				setTimeout("this.elem.style.opacity = "+ (1-i) +"", i * duration);
			}
			else {
				setTimeout("this.elem.style.filter='alpha(opacity="+ (1-i) * 102 +"'", i * duration);
			}
		}
	}
	
	/* One for Fade in and anything will be fade out*/
	if(toggle == 1) {
	fadeIn();
	}
	else {
	fadeOut();
	}
	
}
		function $(elem) {
			var obj = document.getElementById(elem);
			if(!obj) return;
			return obj;
		}
		
		function addEvent(elem, typ, func) {
		var obj = document.getElementById(elem);
			if(document.getElementById && !document.all) {
				obj.addEventListener(typ, func, false);
			}
			else if(document.all) {
				obj.attachEvent("on"+typ, func);
			}
		}
		
			var http = createAjax();
			function createAjax() {
				if(!this.http && window.ActiveXObject) {
					try {
						this.http = new ActiveXObject("Msxml2.XMLHTTP" || "Microsoft.XMLHTTP");
					}
					catch(e1) {
						this.http = false;
					}
					
				}
				
				if(!this.http && window.XMLHttpRequest) {
					try {
						this.http = new XMLHttpRequest();
					}
					catch(e2) {
						alert("Sorry we was unable to make a request between your browser.");
					}
				}
			return this.http;
			}

	function cancelInterval() {
		this.canInterval = window.setTimeout("stopInterval();", idleTime);
		
	}
	
	function stopInterval() {
		window.clearInterval(this.refreshChat);
		this.refreshChat = null;
		this.canInterval = null;
		
		var sp = document.createElement("span");
		sp.style.cssText = "color:#D83E3E; font-size:0.8em; font-style:italic;";
		sp.setAttribute("id","idleMsg");
		sp.innerHTML = 'Your chat has gone idle.';
		
		$('chat-window').appendChild(sp);
		$('chat-window').scrollTop = $('chat-window').scrollHeight;
		fade('idleMsg',1000,1);
	}
	
	function canTimeout() {
		window.clearTimeout(this.canInterval);
		this.canInterval = null;
	}
	
	function startRefresh() {
		this.refreshChat = window.setInterval("rh()", refresh_rate);
	}
			
	
	function pressEnter(e) {
	if($('textbox').value.length >= 1) {
	if(this.canInterval) {
		canTimeout();	
	}
	
	if($('idleMsg')) {
		$('chat-window').removeChild(document.getElementById('idleMsg'));
	}
		
	var textbox = $('textbox').value;
		if(e.keyCode == 13) { //press enter
			http.open('post','scripts/php/chat.php',true);
			http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			http.send('textbox='+encodeURIComponent(textbox));
			$('textbox').value = '';
		}
		
		if(!this.refreshChat) {
			startRefresh();
		}
	  }
	}
	
	function sendText() {
	if(this.canInterval) {
		canTimeout();	
	}
		
	var textbox = $('textbox').value;
	alert(textbox);
			var params = 'textbox='+ encodeURIComponent(textbox);
			http.open('post','scripts/php/chat.php',true);
			http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			http.setRequestHeader('Content-length', params.length);
			http.setRequestHeader('Connection','close');
			http.send(params);
			$('textbox').value = '';
		
		if(!this.refreshChat) {
			startRefresh();
		}
	}
	
	
	var cc = 0;
	var nm = 0;
	function rh() {
	
	if(!this.canInterval) {
	cancelInterval();
	}
		
		var rmd = Math.random();
	
		http.open('get','scripts/php/chat.php?s=true&rmd='+rmd, true);
		http.send(null);
		
		http.onreadystatechange = refresh;
		
		function refresh() {
		
		var scrollT;
		
		($('expand').innerHTML == 'Expand +') ? scrollT = 133 : scrollT = 233;
		
			if(http.readyState == 4 && http.status == 200 && http.responseText != null && http.responseText.length >= 1 && http.responseText != prev) {

			if(http.responseText == prev) {
				alert("testing...");
			}
			
			var span = document.createElement("span");
			span.setAttribute("id",cc);
			span.innerHTML = http.responseText;
				$('chat-window').appendChild(span);
				

				if($('chat-window').scrollTop+36 >= $('chat-window').scrollHeight-scrollT) {
				   $('chat-window').scrollTop = $('chat-window').scrollHeight;
				   
				}
				
				 prev = http.responseText;
				 cc++;
				 
				 if(cc >= 70) { //Start removing old chat after 70 messages
							 if($('wel')) {
							 $('chat-window').removeChild(document.getElementById('wel'));
							 }
				 var n = cc - cc+nm;
				 $('chat-window').removeChild(document.getElementById(n));
				 nm++;
				 }
			}
		}	
		
	}
	
		this.refreshChat = window.setInterval("rh()", refresh_rate);
		
		function addEvent(elem, typ, func) {
		var obj = document.getElementById(elem);
			if(document.getElementById && !document.all) {
				obj.addEventListener(typ, func, false);
			}
			else if(document.all) {
				obj.attachEvent("on"+typ, func);
			}
		}
		
	function expand() {
		var chatWindow = $('chat-window');
		var chat = $('chat');
		var spanExpand = $('expand');
		
		if(spanExpand.innerHTML == 'Expand +') {
			chatWindow.style.height='230px';
			chat.style.height='300px';
			spanExpand.innerHTML = 'Collapse -';
			$('chat-window').scrollTop = $('chat-window').scrollHeight;
		}
		else {
			spanExpand.innerHTML ='Expand +';
			chatWindow.style.height='130px';
			chat.style.height='200px';
			$('chat-window').scrollTop = $('chat-window').scrollHeight;
		}
		
	}

	var i = 0;
	function fixTextBox(k) {
		var str = document.getElementById('textbox');
		
		
	}	
	
	function changeColor(id) {
	
		var colors = new Array();
		colors[1] = '#f1f1f1';
		colors[2] = '#ff593f';
		colors[3] = '#A51792';
		colors[4] = '#4E9258';
		colors[5] = '#2B65EC';
		colors[6] = '#DE954B';
		colors[7] = '#36b3e1';
		colors[8] = '#FD13DE';
		colors[9] = '#6eb361';

		
		var rmd = Math.random();
		var params = "c="+id+"&rmd="+rmd;
		http.open("post","scripts/php/chat.php", true);
		
		$('color').style.backgroundColor = colors[id];
		http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		http.setRequestHeader('Content-length', params.length);
		http.send(params);
		document.getElementById('colorPicker').removeChild(document.getElementById('colorTree'));
		document.getElementById('colorPicker').removeChild(document.getElementById('colorBox'));
		$('textbox').focus();
	}
	
	function popColors() {
	if(!$('colorTree') && !$('colorBox')) {
		var colorBox = document.createElement("div");
		colorBox.style.cssText="background:#000000; border:2px solid #333333; width:135px; height:60px; position:absolute; left:8px; bottom:15px; opacity:0.5; filter:alpha(opacity:50); z-index:1;";
		colorBox.setAttribute("id","colorBox");
		
		
		var colorTree = document.createElement("div");
		colorTree.setAttribute("id","colorTree");
		colorTree.innerHTML = "<span style=\"background:#f1f1f1; cursor:pointer; float:left; width:15px; height:15px; margin:2px;; display:block;\" title=\"White\" onclick=\"changeColor(1)\"></span> <span style=\"background:#ff593f; cursor:pointer; float:left; width:15px; height:15px; margin:2px;; display:block;\" onclick=\"changeColor(2)\" title=\"Red\"></span> <span style=\"background:#A51792; cursor:pointer; float:left; width:15px; height:15px; margin:2px;; display:block;\" onclick=\"changeColor(3)\" title=\"Purple\"></span> <span style=\"background:#4E9258; cursor:pointer; float:left; width:15px; height:15px; margin:2px;; display:block;\" onclick=\"changeColor(4)\" title=\"Green\"></span> <span style=\"background:#2B65EC; cursor:pointer; float:left; width:15px; height:15px; margin:2px;; display:block;\" onclick=\"changeColor(5)\" title=\"Blue\"></span> <span style=\"background:#DE954B; cursor:pointer; float:left; width:15px; height:15px; margin:2px;; display:block;\" onclick=\"changeColor(6)\" title=\"Orange\"></span> <span style=\"background:#36b3e1; cursor:pointer; float:left; width:15px; height:15px; margin:2px;; display:block;\" onclick=\"changeColor(7)\" title=\"Teal\"></span> <span style=\"background:#FD13DE; cursor:pointer; float:left; width:15px; height:15px; margin:2px;; display:block;\" onclick=\"changeColor(8)\" title=\"Pink\"></span> <span style=\"background:#6eb361; cursor:pointer; float:left; width:15px; height:15px; margin:2px;; display:block;\" onclick=\"changeColor(9)\" title=\"Lime Green\"></span>";
		$('colorPicker').appendChild(colorTree);
		$('colorPicker').appendChild(colorBox);
		}
		else {
		document.getElementById('colorPicker').removeChild(document.getElementById('colorTree'));
		document.getElementById('colorPicker').removeChild(document.getElementById('colorBox'));
		$('textbox').focus();
		}
	}
	

	function popColorsClose() {
	 if($('colorTree') && $('colorBox')) {
		document.getElementById('colorPicker').removeChild(document.getElementById('colorTree'));
		document.getElementById('colorPicker').removeChild(document.getElementById('colorBox'));
		$('textbox').focus();
	 }
	}

I want to alter the script in a way where there are 2 different kinds of users that get matched up in pairs, and so that it is not entirely random. In other words, instead of just click on "Start Chat", there would be a start chat as user A, or Start chat as user B. Where by user A and B would get paired up to chat, instead of AA or BB.

Here is the code for the main functions:

Code:

<script>
            var xmlHttp;

            var xmlHttp2;
            var xmlHttp3;
            var xmlHttp4;
            var xmlHttp5;
            var xmlHttp6;
            var xmlHttp7;
            var xmlHttp8;
            var xmlHttp9;
            var xmlHttp10;

            var userId = 0;
            var strangerId = 0;
            var playTitleFlag = false;

            // Generic function to create xmlHttpRequest for any browser //
            function GetXmlHttpObject()
                {
                var xmlHttp = null;

                try
                    {
                    // Firefox, Opera 8.0+, Safari
                    xmlHttp = new XMLHttpRequest();
                    }
                catch (e)
                    {
                    //Internet Explorer
                    try
                        {
                        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                        }
                    catch (e)
                        {
                        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                    }

                return xmlHttp;
                }


            // Ajax part to get number of online chat //
            function getNumberOfOnlineUsers()
                {
                xmlHttp = GetXmlHttpObject();

                if (xmlHttp == null)
                    {
                    alert("Browser does not support HTTP Request");
                    return;
                    }

                var url = "getNumberOfUsers.php";
                xmlHttp.open("POST", url, true);
                xmlHttp.onreadystatechange = stateChanged;
                xmlHttp.send(null);
                }

            function stateChanged()
                {
                if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete")
                    {
                    var count = xmlHttp.responseText;
                    document.getElementById("onlinecount").innerHTML = count + " users online";
                    window.setTimeout("getNumberOfOnlineUsers();", 2000);
                    }
                }

            // End of get number of online users//

            // Ajax part start chat //
            function startChat()
                {
                xmlHttp2 = GetXmlHttpObject();

                if (xmlHttp2 == null)
                    {
                    alert("Browser does not support HTTP Request");
                    return;
                    }

                var url = "startChat.php";
                xmlHttp2.open("POST", url, true);
                xmlHttp2.onreadystatechange = stateChanged2;
                xmlHttp2.send(null);
                }

            function stateChanged2()
                {
                if (xmlHttp2.readyState == 4 || xmlHttp2.readyState == "complete")
                    {
                    userId = trim(xmlHttp2.responseText);

                    document.getElementById("chatbox").style.display = 'block';
                    document.getElementById("sendbtn").disabled = true;
                    document.getElementById("chatmsg").disabled = true;
                    document.getElementById("disconnectbtn").disabled = true;

                    document.getElementById("intro").style.display = 'none';
                    document.getElementById("sayHi").style.display = 'none';

                    if (document.getElementById("chatDisconnected") != undefined)
                        document.getElementById("chatDisconnected").style.display = 'none';

                    if (document.getElementById("startNew") != undefined)
                        document.getElementById("startNew").style.display = 'none';

                    randomChat();
                    }
                }

            // End of start chat//

            // Ajax part leave chat //
            function leaveChat()
                {
                playTitleFlag = false;
                xmlHttp3 = GetXmlHttpObject();

                if (xmlHttp3 == null)
                    {
                    alert("Browser does not support HTTP Request");
                    return;
                    }

                var url = "leaveChat.php?userId=" + userId;
                xmlHttp3.open("POST", url, true);
                xmlHttp3.onreadystatechange = stateChanged3;
                xmlHttp3.send(null);
                }

            function stateChanged3()
                {
                }

            // End of leave chat//

            // Ajax part random chat //
            function randomChat()
                {
                xmlHttp4 = GetXmlHttpObject();

                if (xmlHttp4 == null)
                    {
                    alert("Browser does not support HTTP Request");
                    return;
                    }

                var url = "randomChat.php?userId=" + userId;
                xmlHttp4.open("POST", url, true);
                xmlHttp4.onreadystatechange = stateChanged4;
                xmlHttp4.send(null);
                }

            function stateChanged4()
                {
                if (xmlHttp4.readyState == 4 || xmlHttp4.readyState == "complete")
                    {
                    strangerId = trim(xmlHttp4.responseText);

                    if (strangerId != "0")
                        {
                        document.getElementById("sendbtn").disabled = false;
                        document.getElementById("chatmsg").disabled = false;
                        document.getElementById("disconnectbtn").disabled = false;
                        document.getElementById("sayHi").style.display = 'block';
                        document.getElementById("connecting").style.display = 'none';
                        document.getElementById("looking").style.display = 'none';

                        listenToReceive();
                        isTyping();
                        }

                    else
                        {
                        window.setTimeout("randomChat();", 2000);
                        }
                    }
                }

            // End of random chat//

            // Ajax part random chat //
            function listenToReceive()
                {
                xmlHttp5 = GetXmlHttpObject();

                if (xmlHttp5 == null)
                    {
                    alert("Browser does not support HTTP Request");
                    return;
                    }

                var url = "listenToReceive.php?userId=" + userId;
                xmlHttp5.open("POST", url, true);
                xmlHttp5.onreadystatechange = stateChanged5;
                xmlHttp5.send(null);
                }

            function stateChanged5()
                {
                if (xmlHttp5.readyState == 4 || xmlHttp5.readyState == "complete")
                    {
                    var msg = xmlHttp5.responseText;

                    if (trim(msg) == "||--noResult--||")
                        {
                        // other party is disconnected//
                        document.getElementById("sendbtn").disabled = true;
                        document.getElementById("chatmsg").disabled = true;
                        document.getElementById("disconnectbtn").disabled = true;
                        document.getElementById("sayHi").style.display = 'none';
                        document.getElementById("chatDisconnected").style.display = 'block';
                        document.getElementById("logbox").innerHTML
                            += "<div id='startNew' class='logitem'><div><input value='Start New Chat' onclick='startNewChat();' type='button'></div></div>";
                        document.getElementById("logbox").scrollTop = document.getElementById("logbox").scrollHeight;
                        leaveChat();

                        return;
                        }

                    else if (trim(msg) != "" && msg != undefined)
                        {
                        // Message received //
                        document.getElementById("logbox").innerHTML
                            += "<div class='logitem'><div class='strangermsg'><span class='msgsource'>Friend:</span>"
                                   + msg + "</div></div>";
                        document.getElementById("logbox").scrollTop = document.getElementById("logbox").scrollHeight;

                        playTitleFlag = true;
                        playTitle();
                        }

                    window.setTimeout("listenToReceive();", 2000);
                    }
                }

            // End of random chat//

            // Ajax part send chat message //
            function sendMsg()
                {
                var msg = document.getElementById("chatmsg").value;

                if (trim(msg) != "")
                    {
                    appendMyMessage();
                    xmlHttp6 = GetXmlHttpObject();

                    if (xmlHttp6 == null)
                        {
                        alert("Browser does not support HTTP Request");
                        return;
                        }

                    document.getElementById("chatmsg").value = "";
                    var url = "sendMsg.php?userId=" + userId + "&strangerId=" + strangerId + "&msg=" + msg;
                    xmlHttp6.open("POST", url, true);
                    xmlHttp6.onreadystatechange = stateChanged6;
                    xmlHttp6.send(null);
                    }
                }

            function stateChanged6()
                {
                }

            // End of send chat message//

            //function to append my message to the chat area//
            function appendMyMessage()
                {
                var msg = document.getElementById("chatmsg").value;

                if (trim(msg) != "")
                    {
                    document.getElementById("logbox").innerHTML
                        += "<div class='logitem'><div class='youmsg'><span class='msgsource'>You:</span> " + msg
                               + "</div></div>";
                    document.getElementById("logbox").scrollTop = document.getElementById("logbox").scrollHeight;
                    }
                }

            //function to disconnect
            function disconnect()
                {
                var flag = confirm("Are you sure you want to disconnect?");

                if (flag)
                    {
                    leaveChat();
                    document.getElementById("sendbtn").disabled = true;
                    document.getElementById("chatmsg").disabled = true;
                    document.getElementById("disconnectbtn").disabled = true;

                    document.getElementById("sayHi").style.display = 'none';
                    document.getElementById("chatDisconnected").style.display = 'block';
                    }
                }

            //function to send on pressing Enter Key//
            function tryToSend(event)
                {
                var key = event.keyCode;

                if (key == "13")
                    {
                    sendMsg();
                    return;
					}

                var msg = document.getElementById("chatmsg").value;

                if (trim(msg) != "")
                    {
                    typing();
                    }

                else
                    {
                    stopTyping();
                    }
                }


            // Ajax part to indicat user is typing //
            function typing()
                {
                xmlHttp7 = GetXmlHttpObject();

                if (xmlHttp7 == null)
                    {
                    alert("Browser does not support HTTP Request");
                    return;
                    }

                var url = "typing.php?userId=" + userId;
                xmlHttp7.open("POST", url, true);
                xmlHttp7.onreadystatechange = stateChanged7;
                xmlHttp7.send(null);
                }

            function stateChanged7()
                {
                if (xmlHttp7.readyState == 4 || xmlHttp7.readyState == "complete")
                    {
                    }
                }

            // End of indicat user is typing //


            // Ajax part to indicat user is not typing //
            function stopTyping()
                {
                xmlHttp8 = GetXmlHttpObject();

                if (xmlHttp8 == null)
                    {
                    alert("Browser does not support HTTP Request");
                    return;
                    }

                var url = "stopTyping.php?userId=" + userId;
                xmlHttp8.open("POST", url, true);
                xmlHttp8.onreadystatechange = stateChanged8;
                xmlHttp8.send(null);
                }

            function stateChanged8()
                {
                if (xmlHttp8.readyState == 4 || xmlHttp8.readyState == "complete")
                    {
                    }
                }

            // End of indicat user is not typing //

            // Ajax to see if stranger is typing//
            function isTyping()
                {
                xmlHttp9 = GetXmlHttpObject();

                if (xmlHttp9 == null)
                    {
                    alert("Browser does not support HTTP Request");
                    return;
                    }

                var url = "isTyping.php?strangerId=" + strangerId;
                xmlHttp9.open("POST", url, true);
                xmlHttp9.onreadystatechange = stateChanged9;
                xmlHttp9.send(null);
                }

            function stateChanged9()
                {
                if (xmlHttp9.readyState == 4 || xmlHttp9.readyState == "complete")
                    {
                    if (trim(xmlHttp9.responseText) == "typing")
                        {
                        //alert("stranger is typing");
                        document.getElementById("typing").style.display = 'block';
                        }

                    else
                        {
                        document.getElementById("typing").style.display = 'none';
                        }

                    window.setTimeout("isTyping();", 2000);
                    }
                }

            //Ajax to see if stranger is typing//

            // to start new chat //
            function startNewChat()
                {
                document.getElementById("logbox").innerHTML = "";
                document.getElementById("logbox").innerHTML
                    = "<div id='connecting' class='logitem'><div class='statuslog'>Connecting to server...</div></div><div id='looking' class='logitem'><div class='statuslog'>Searching for someone for you to chat with...</div></div><div id='sayHi' class='logitem'><div class='statuslog'>You're now chatting with someone new!</div></div><div id='chatDisconnected' class='logitem'><div class='statuslog'>Your partner has ended the chat.</div></div>";
                startChat();
                }

            // function to trim strings
            function trim(sVal)
                {
                var sTrimmed = "";

                for (i = 0; i < sVal.length; i++)
                    {
                    if (sVal.charAt(i) != " " && sVal.charAt(i) != "\f" && sVal.charAt(i) != "\n" && sVal.charAt(i)
                                                                                                         != "\r"
                        && sVal.charAt(i) != "\t")
                        {
                        sTrimmed = sTrimmed + sVal.charAt(i);
                        }
                    }

                return sTrimmed;
                }

            // function to play title //
            function playTitle()
                {
                document.title = "BlahTherapy";
                window.setTimeout('document.title="|| BlahTherapy || ";', 1000);
                window.setTimeout('document.title="__ Blah Therapy __";', 2000);
                window.setTimeout('document.title="BlahTherapy";', 3000);

                if (playTitleFlag == true)
                    {
                    window.setTimeout('playTitle();', 4000);
                    }
                }

            // function to detect if browser has focus
            window.onfocus = function()
                {
                playTitleFlag = false;
                }


            // Ajax part to save log //
            function saveLog()
                {
                xmlHttp10 = GetXmlHttpObject();

                if (xmlHttp10 == null)
                    {
                    alert("Browser does not support HTTP Request");
                    return;
                    }

                var url = "saveLog.php?userId=" + userId + "&strangerId=" + strangerId;
                xmlHttp10.open("POST", url, true);
                xmlHttp10.onreadystatechange = stateChanged10;
                xmlHttp10.send(null);
                }

            function stateChanged10()
                {
                if (xmlHttp10.readyState == 4 || xmlHttp10.readyState == "complete")
                    {
                    var log = xmlHttp10.responseText;
                    var generator = window.open('', '', 'height=400,width=500,top=100,left=100');
                    generator.document.write('<html><head><title>Log File</title>');
                    generator.document.write('<link type="text/css" rel="stylesheet" href="files/style.css">');
                    generator.document.write('</head><body>');
                    generator.document.write(log);
                    generator.document.write('</body></html>');
                    generator.document.close();
                    }
                }
            // End of save log//
</script>

Any ideas?

Hi,

I'm still in the early stages of learning Javascript so I'm not sure how (or if it's possible) to do this. I know HTML, CSS, etc... just not too familiar with Javascript. Here's the deal.... I run a website that features a chat room written in Perl for CGI. The chat room will automatically email a user their password if it's forgotten but there is one issue.....it does not have the "Forgot Password?" link. To achieve the Lost Password page, the user must enter an invalid password FIRST on the login screen, otherwise they cannot get to that option and are often requesting assistance.

What I had in mind was an easier way for the user to get their password since new novice members are not sure how to get to the lost password page. I'm not trying to edit the Perl code for the chat, but I wanted to build a "Forgot Password?" page using a Javascript code that will automatically take their username from the "username" login field and direct them to the lost password page which would be "chat2.cgi?action=send_pwd&name=..."

I'm sorry if this is confusing, I'm not sure that I am explaining this right. When the user enters an invalid password, it takes them to the lost password page which contains a link "lost password" and will automatically email them their login details when clicked on. When they click that link, the URL contains the string "chat2.cgi?action=send_pwd&name=username"

What I would like to do is put a link on the login page (like most normal chat rooms have) that says "Forgot Password?". When clicked on, I want it to take them to a page where all they have to do is enter their username in a form and click Submit, then have a Javascript code automatically extract their username from that field and insert their username automatically to the end of that URL (chat2.cgi?action=send_pwd&name=...) where ... would be the name extracted from that form field. This would result in the browser taking them to that URL which would trigger the chat to automatically email the password. Can I do this with Javascript?? If so, any help would be greatly appreciated!

Here is my website... www.thepriceoflust.com You need to log into my website as a user... User Name is: supramaniac Password is: lakeella On the top bar you can click on the chat tab... Enter into one of the chat rooms... As you will see the chat room window turns into like its own web browser and displays a copy of my index page... The chat rooms used to do that before and someone fixed it and said that my permissions were wrong on my installation folder. I don't know if that is right or not. Why would it go back to doing the same thing. Anyway does anybody know how to fix this issue?