scenario question

[squiblo]

How could this be done, (what could I google, what could I look into).

 

There are two end users, person 1 clicks a button and an alert prompt pops up on his screen saying "you clicked the button" but also at the same time, person 2 recieves an alert prompt saying "person 1 click the button" and vice versa

[F1Fan]

I believe the only way to do this is to store something on the server that notes who did what when, either in a file or a database, then have JavaScript that makes a periodic AJAX call checking for that information stored on the server. It won't be instant, but should be close. You'll have to find a good balance between browser performance and frequency of updates.

[squiblo]

what I'm actually trying to do is make a chat, I have it working at the moment and the ajax script gets the chat text from a file I call the function again. But there are two problems with doing this:

 

- cant click links in the chat

- can highlight anything (because it is a calling the chat so quickly)

 

so I only need to call the function when, the end user inputs text into the chat and when person x inputs text into the chat, instead of looping through it all the time. If you don't understand I'll try to explain again.

[F1Fan]

Can't you just not update the div (or whatever you're inputting the text into) unless there is new information to add?

[squiblo]

I am inputting the text into a file like 'chat.txt'  if this is any useful information?

[F1Fan]

Kinda. Before you update the users' chat boxes with new information, check to see if there are any differences between what they have and the chat.txt file. If they are the same, don't do anything.

 

Also, how often are you updating it?

[squiblo]

I'm updating as quick as javascript or the browser can run buy calling the first function at the end of the last function that is why nothing can be highlighted etc :/

[F1Fan]

I think you should do what I suggested before, and call the function again using setTimeout, rather than instantaneously. Create a delay of at least 500 ms. Otherwise you may lock up the user's browser.

[squiblo]

Or maybe I could check MySQL and alert something when a integer value increases by one in the table. How could this be done. Thanks

[F1Fan]

Show me your code. I could show you what I'm talking about if I had something to work with.

 

As far as MySQL, you could create a table that stored chat info. Have an auto-increment ID field, a timestamp field, a field to identify which user sent the message, and a text field for the chat text itself. Then store whatever the current ID is in a JavaScript variable, and like you said, check if there are any newer ones available.

[squiblo]

var xmlhttp1input;

function chat1()
{
showUser1();
}

function showUser1(str)
{
xmlhttp1input=GetXmlHttpObject1();
if (xmlhttp1input==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }
var url1="http://localhost/includes/chat/chat_output/sql_output/sql1.php";
url1=url1+"?q="+str;
url1=url1+"&sid="+Math.random();
xmlhttp1input.onreadystatechange=stateChanged1;
xmlhttp1input.open("GET",url1,true);
xmlhttp1input.send(null);
}

function stateChanged1()
{
if (xmlhttp1input.readyState==4)
{
document.getElementById("chatoneoutput").innerHTML=xmlhttp1input.responseText + " ";
showUser1();

}
}

function GetXmlHttpObject1()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}

 

This is the ajax that is getting the contents of a php file, in the php file there are queries and outputs of the chat. showUser1(); is what i put in to make it loop through infinite times.

[F1Fan]

Try this:

var xmlhttp1input;

function chat1()
{
   showUser1();
}

function showUser1(str)
{
xmlhttp1input=GetXmlHttpObject1();
if (xmlhttp1input==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }
var url1="http://localhost/includes/chat/chat_output/sql_output/sql1.php";
url1=url1+"?q="+str;
url1=url1+"&sid="+Math.random();
xmlhttp1input.onreadystatechange=stateChanged1;
xmlhttp1input.open("GET",url1,true);
xmlhttp1input.send(null);
}

function stateChanged1()
{
if (xmlhttp1input.readyState==4)
{
if (document.getElementById("chatoneoutput").innerHTML != xmlhttp1input.responseText){
  document.getElementById("chatoneoutput").innerHTML = xmlhttp1input.responseText;
}
showUser1();

}
}

function GetXmlHttpObject1()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}

[squiblo]

Still if person 1 inputs text, person 2 cannot see the text unless person 2 manually refreshes the page

[F1Fan]

What? Still? You said it was working:

...I have it working at the moment and the ajax script gets the chat text from a file I call the function again...

[squiblo]

oh no sorry, I'm getting myself confused now, but the code I sent you seems to be doing the same thing you sent me back.

 

extra

And person 2 can only see what person 1 types because I am calling the first function at the end of the last function, which I dont want to do.

[F1Fan]

Then you're gonna have to change to MySQL, which is the best option anyway.

 

To restart the process all over again without just calling it at the end of the function, change this:

function stateChanged1()
{
if (xmlhttp1input.readyState==4)
{
if (document.getElementById("chatoneoutput").innerHTML != xmlhttp1input.responseText){
  document.getElementById("chatoneoutput").innerHTML = xmlhttp1input.responseText;
}
showUser1();

}
}

to this:

function stateChanged1()
{
if (xmlhttp1input.readyState==4)
{
if (document.getElementById("chatoneoutput").innerHTML != xmlhttp1input.responseText){
  document.getElementById("chatoneoutput").innerHTML = xmlhttp1input.responseText;
}
setTimeout("showUser1()", 500);

}
}

 

That will cause a half-second (500 ms) delay.

[squiblo]

Delaying the function call only reduces my problem a little, because when I highlight the text I can only highlight it for 500ms.

 

I think I have a solution if you could please make these two functions into one function. With the 1 big function I will try this.

 

- get response text

- if response text = document.getElementById("chatoneoutput").innerHTML;

- loop through again

 

- if they are not equal go to a separate function that is not in the "loop"

- and then put "document.getElementById("chatoneoutput").innerHTML = xmlhttp1input.responseText;"

 

this way the whole stript is not being looped through, only a section of it is.

 

function showUser1(str)
{
xmlhttp1input=GetXmlHttpObject1();
if (xmlhttp1input==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }
var url1="http://localhost/includes/chat/chat_output/sql_output/sql1.php";
url1=url1+"?q="+str;
url1=url1+"&sid="+Math.random();
xmlhttp1input.onreadystatechange=stateChanged1;
xmlhttp1input.open("GET",url1,true);
xmlhttp1input.send(null);
}

function stateChanged1()
{
if (xmlhttp1input.readyState==4)
{
if (document.getElementById("chatoneoutput").innerHTML != xmlhttp1input.responseText){
  document.getElementById("chatoneoutput").innerHTML = xmlhttp1input.responseText;
}
showUser1();

}
}

[F1Fan]

function showUser1(str)
{
xmlhttp1input=GetXmlHttpObject1();
if (xmlhttp1input==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }
var url1="http://localhost/includes/chat/chat_output/sql_output/sql1.php";
url1=url1+"?q="+str;
url1=url1+"&sid="+Math.random();
xmlhttp1input.onreadystatechange=stateChanged1;
xmlhttp1input.open("GET",url1,true);
xmlhttp1input.send(null);
xmlhttp1input.onreadystatechange = function(){
if (xmlhttp1input.readyState==4)
{
if (document.getElementById("chatoneoutput").innerHTML != xmlhttp1input.responseText){
  document.getElementById("chatoneoutput").innerHTML = xmlhttp1input.responseText;
}
showUser1();

}
}
}

[squiblo]

I have found where the slight problem is, the code is saying they are different even when they are the same, so im trying to find why

[F1Fan]

Well, using a database would really be the best option. Or, you could try trimming the two texts of white spaces. That's probably your problem. Here's a function that will do that: http://www.somacon.com/p355.php

[squiblo]

Solved! Thank you so much F1Fan