|
JavaScript - Chat Client
Hey guys. Didnt know what forum to put this in, but i figured i would put it here.
Basically im making an ajax chat client. I dont know if anyone here as ever looked at googles chat client code, but if anyone knows how to make one function the same way as it, I would love if you would help me figure it out. I tried making a chat client, but it ended up being slow, buggy, and you couldnt select text because the innerhtml was refresshing so much. So how can I make a good chat client like googles? Thanks! Similar TutorialsHey 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 Hello. I'm currently playing with some projects, and one of them is creating a simple 2D chat, where users have an avatar, that they can move around and chat with. I want to do this with PHP and jQuery. Question here is, if I set it to auto-update the chat every 1 second, and get the new values in the database (if user has moved position), will it suck up too much bandwidth if there's 5 - 30 users online at the same time? I know there's other better ways of creating a 2D chat, but I'm just doing this for practice of my programming skills. 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! 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 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?
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 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. Hello, I am very new to javascript, and I'm having a hard time finding a way to easily add some chat code to our website without manually adding it to every page. Here's the deal: I need to add this code to every page of our website: Code: <div id="cihfi9" style="z-index:100;position:absolute;"></div><div id="schfi9" style="display:inline;float:right;"></div><div id="sdhfi9" style="display:none"></div><script type="text/javascript">var sehfi9=document.createElement("script");sehfi9.type="text/javascript";var sehfi9s=(location.protocol.indexOf("https")==0?"https://secure.providesupport.com/image":"http://image.providesupport.com")+"/js/mrcuser/safe-standard.js?ps_h=hfi9\u0026ps_t="+new Date().getTime();setTimeout("sehfi9.src=sehfi9s;document.getElementById('sdhfi9').appendChild(sehfi9)",1)</script><noscript><div style="display:inline"><a href="http://www.providesupport.com?messenger=mrcuser">Live Support</a></div></noscript>
I would like the chat icon to appear at the top of each page next to our main menu links. Our main menu links are called from one javascript file. I would like to figure out a way to add this code to the javascript file, so I only have to add it once. The javascript file only has one line of code: document.write(all of our main menu links). Is there a way to add the chat code to the main menu javascript file so that the chat icon will appear on every page, or is this impossible? Thanks for your help! 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 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, 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?
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();
}
}
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! 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? i have an ajax/comet chat setup and working and i added the following line to it to play a sound when a new message is received... however every time it plays the sound, it unfocuses the textbox that the user is typing a new chat msg in.... Code: $('soundbox').innerHTML="<embed src='WAVE_358.wav' hidden=true autostart=true loop=false>";
Hi, I think the problem I am having is an event not a css issue, so I hope I posted in the right forum. What I am trying to achieve is the capability to provide multiple instant chat messages. I have the php/ajax for the instant messages, what I am not sure is how to be able to view multiple chats. What I have started to do is limit it to five possible instant chat messages and have five divs in place with visibility hidden. It works fine for one. But if someone clicks on the name of a person they wish to chat with, the way I am currently doing it, I would need to find out: 1. which divs were free to start an instant chat in (I have no idea how to do this with divs)? 2. Having identified it I will need to change the visibility so it suddenly becomes visible I guess firstly am I going about this the right way to be able to host/view multiple chats? My code is below. Main Page PHP Code: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function (){ $('#submitchat').live('click',function(){ var data = $('#chatmessage').serialize(); $.post ('insertChat.php',data, function(){ $('#chatmessage').each (function(){ this.reset(); }); return false; }); }); }); </script> <script type="text/javascript"> function loadChat(File,ID,Msg,TID,Cile){ loadXMLDoc1(File,ID,Msg); delay = setTimeout(function(){loadChatRefresh(Cile,TID,Msg)},5000); } </script> <script type="text/javascript"> function loadChatRefresh(File,ID,Msg){ if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { try{ xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } } xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById(ID).innerHTML=xmlhttp.responseText; timer = setInterval(function(){loadChatRefresh(File,ID,Msg)},3000); } } var params=Msg; xmlhttp.open("POST",File,true); xmlhttp.setRequestHeader("Pragma", "Cache-Control:no-cache"); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.setRequestHeader("Content-length", params.length); xmlhttp.setRequestHeader("Connection", "close"); xmlhttp.send(params); } </script> <script type="text/javascript"> function loadXMLDoc1(File,ID,Msg){ if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { try{ xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } } xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById(ID).innerHTML=xmlhttp.responseText; } } var params=Msg; xmlhttp.open("POST",File,true); xmlhttp.setRequestHeader("Pragma", "Cache-Control:no-cache"); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.setRequestHeader("Content-length", params.length); xmlhttp.setRequestHeader("Connection", "close"); xmlhttp.send(params); } </script> </head> <body> <h1>Test</h1> <?php include("dbconnect.php"); $result = mysql_query("SELECT *, signedin.PId as SIPId FROM signedin INNER JOIN friends ON signedin.PId=friends.invited OR signedin.PId=friends.invitee WHERE ((friends.invitee={$_SESSION['MyPId']} AND friends.statae='accepted') OR (friends.invited={$_SESSION['MyPId']} AND friends.statae='accepted')) AND signedin.LogOff IS NULL AND signedin.PId !={$_SESSION['MyPId']}"); while($row = mysql_fetch_array($result)){ $mugwort= $row['SIPId'] . ';'; } $motherwort=explode(';',$mugwort); foreach ($motherwort as $mulberry){ $result = mysql_query("SELECT * FROM allusers WHERE PId='{$mulberry}'"); while($row = mysql_fetch_array($result)){ $nosegay=rand(). rand(). rand(). rand(). rand(); $nightshade="{$_SESSION['MyPId']};{$mulberry};{$nosegay}"; echo '<div class="img"><img src="thumbs/' . $row['pphoto'] . '" height="80px" width="80px" onclick="loadChat(\'chat.php\',\'chat1\',\'olivier=' . urlencode($nightshade) . '\',\'chatdisplay\',\'getDisplayChat.php\')";><div class="desc">' . $row['fullname'] . '</div></div><br />'; } } echo '<br /><div class="clear"></div><br /><br />'; ?> <div class="chat1" id="chat1"></div> <div class="chat2" id="chat2"></div> <div class="chat3" id="chat3"></div> <div class="chat4" id="chat4"></div> <div class="chat5" id="chat5"></div> <br /> <br /> Chat Page PHP Code: <?php include("dbconnect.php"); $blossom=explode(';',$_POST['olivier']); $periwinkle=$blossom[0]; $peppermint=$blossom[1]; $pine=$blossom[2]; global $periwinkle; global $peppermint; global $pine; echo '<div class="chatbanner" width="100%"> <table width="100%"> <tr> <td width="90%">'; echo '<center><b>This Name</b></center>'; echo '</td> <td width="5%">'; echo '<input type="button" class="buttonchat" name="minimize" id="minimize" value="−">'; echo '</td> <td width="5%">'; echo '<input type="button" class="buttonchat" name="minimize" id="minimize" value="X">'; echo '</td> </tr> </table></div>'; echo '<div class="chattext" id="chatdisplay" overflow="scroll">'; $result = mysql_query("SELECT * FROM chat INNER JOIN allusers ON chat.chatter=allusers.PId WHERE (chat.chatter={$periwinkle} AND chat.chattee={$peppermint}) OR (chat.chatter={$peppermint} AND chat.chattee={$periwinkle}) AND ref={$pine} ORDER BY chat.date DESC"); while($row = mysql_fetch_array($result)){ echo '<table width="100%"><tr><td width="20%"><img src="thumbs/' . $row['pphoto'] . '" width="40px" height="40px"></td>'; echo '<td width="80%" valign="top">' . nl2br($row['message']) . '</td></tr></table><hr />'; } echo '</div><br /><br />'; echo '<form action="insertChat.php" method="post" name="chatmessage" id="chatmessage"> <input type="text" class="hidden" name="from" id="from" value="' . $_SESSION['MyPId'] . '"> <input type="text" class="hidden" name="to" id="to" value="'; echo ($_SESSION['MyPId']==$peppermint) ? $periwinkle : $peppermint . '"> <input type="text" class="hidden" name="ref" id="ref" value="' . $pine . '">'; echo '<div class="textchat">'; echo '<textarea cols="21" row="5" name="message" id="message"></textarea>'; echo '<input type="button" name="submitchat" id="submitchat" value=" "></div></form>'; ?> Style Sheet: Code:
div.chat1 {
position:fixed;
bottom:1px;
right:50px;
width:200px;
height:250px;
float:right;
border:2px solid black;
background-color:#fdf5e6;
scrolling:auto;
}
div.chat2 {
position:fixed;
bottom:1px;
right:260px;
width:200px;
height:250px;
float:right;
border:2px solid black;
background-color:#fdf5e6;
scrolling:auto;
}
div.chat3 {
position:fixed;
bottom:1px;
right:470px;
width:200px;
height:250px;
float:right;
border:2px solid black;
background-color:#fdf5e6;
scrolling:auto;
}
div.chat4 {
position:fixed;
bottom:1px;
right:680px;
width:200px;
height:250px;
float:right;
border:2px solid black;
background-color:#fdf5e6;
scrolling:auto;
}
div.chat5 {
position:fixed;
bottom:1px;
right:890px;
width:200px;
height:250px;
float:right;
border:2px solid black;
background-color:#fdf5e6;
scrolling:auto;
}
.chatbanner {
background-color:#4b0082;
text-decoration:none;
color:white;
}
.textchat {
position:fixed;
bottom:0.5px;
}
.chatbutton {
position:fixed;
bottom:0.5px;
right:0.5px;
border:none;
}
If I have left anything out which might be helpful please let me know. I just got stuck on the logistics side of figuring out how was the best way to make this happen, any pointers would be great. |
|||||||