In Game Chat System Improvements

[Glenugie]

I'm hoping to improve the chat system I'm using in my game, previously I was using X7, but I chose to write my own script for purposes of adaptability.

One of the major complaints I've had is my messy method of refreshing the chat, the code I'm using is:

Code: [Select]

<script>
  setTimeout("window.location.replace('chatlog.php')",2000);
</script>
Very inefficient, I was hoping that there was a better way to do this, there are a few other issues, but I think I can work them out on my own.

So if anyone has any suggestions for improving it, please tell me. (Just a thought, if it could maintain its position, as in not scroll back to the top of the page on reload, whether that means it loads to the botom (most recent message) or keeps its exact postion).

And for the record, I did search through other posts but none seemed to quite fit my needs.

Thanks in advance

~Glenugie~

[codestryke]

A somewhat general overview

First, yes, have the backend send to the client side what the last message number was set. Then when the chat goes to get more lines from the backend end the lastid as a query string, something like

chatlog.php?last=1023

Now you'll only get the last set of messages posted since the last update, this will save you on some bandwidth.

Now for refreshing, this is easier said then done. To do this I use an AJAX call to the server, the server then posts back the chat in javascript and the client eval's it. The backend would pass back something like:

postChat('this is cool', 'codestryke, 543);

the postChat funciton would be something like

Code: [Select]

function postChat(line, user, id) {
  document.getElementById('chat').innerHTML =   document.getElementById('chat').innerHTML + user ": " + line;
  lastid = id
  window.scrollTo(0,100000);
}

Not 100% on the scrollTo syntax

[Glenugie]

I've never properly worked with AJAX before, so could you explain in a little more detail?

~Glenugie~

[raestlyn]

Ok, here is a simple ajaxed chat tutorial that uses the lastid saving method: click.

With AJAX (thats actually AJAJ because the response is Javascript/JSON instead of XML, but thats not relevant) you send information with HttpRequest to server and get information from it without refreshing the whole page. With AJAX you can get just the chat message(s). So far its easy, right?

After that you have opened the chat page you just save the id of the last message and get new messages (if there is any) after a set period of time. Now, the making the query to the server is the hardest part of this whole thing; do you do it every 2 seconds (and possibly cause lag if there is lots of people using the chat) or some other way.
If you use advanced JS libraries like jQuery or Prototype you can use this very neat thing called PeriodicalUpdater.

PeriodicalUpdater description from Prototype JS lib:
Periodically performs an AJAX request and updates a container’s contents based on the response text. Offers a mechanism for “decay,” which lets it trigger at widening intervals while the response is unchanged.

Hope that helped at all.

[Glenugie]

I think I understand you, just have a few things to clean up, but overall it 'appears' to be working. Hmm, never mind, I tried adapting the tutorial you linked me to, but I haven't suceeded in making it refresh properly, I don't think the queries were running properly.

[Glenugie]

Are there any other good tutorials around that any of you know of?

Or should I just start bribing someone to write it for me?

~Glenugie~

[raestlyn]

There you go

Making one isn't hard really, think of it as a form that shows the input right away.

[Glenugie]

Right, I think I've got it now, quick question though, it uses Javascript to insert the username into the database, how can I make it use a PHP Session Variable as the username?

[raestlyn]

It actually uses PHP as a backend, so you can easily modify it:
change:

Code: [Select]

if(isset($_POST['message']) && $_POST['message'] != '') {
$sql = "INSERT INTO message(chat_id, user_id, user_name, message, post_time) VALUES (" .
db_input($_GET['chat']) . ", 1, '" . db_input($_POST['name]) .
"', '" . db_input($_POST['message']) . "', NOW())";
db_query($sql);
}
to

Code: [Select]

if(isset($_POST['message']) && $_POST['message'] != '') {
$sql = "INSERT INTO message(chat_id, user_id, user_name, message, post_time) VALUES (" .
db_input($_GET['chat']) . ", 1, '" . db_input($_SESSION['name']) .
"', '" . db_input($_POST['message']) . "', NOW())";
db_query($sql);
}
And Javascript:
change

Code: [Select]

function sendChatText() {
if (sendReq.readyState == 4 || sendReq.readyState == 0) {
sendReq.open("POST", 'getChat.php?chat=1&last=' + lastMessage, true);
sendReq.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
sendReq.onreadystatechange = handleSendChat;
var param = 'message=' + document.getElementById('txt_message').value;
param += '&name=Ryan Smith';
param += '&chat=1';
sendReq.send(param);
document.getElementById('txt_message').value = '';
}
}  to
 

Code: [Select]

function sendChatText() {
if (sendReq.readyState == 4 || sendReq.readyState == 0) {
sendReq.open("POST", 'getChat.php?chat=1&last=' + lastMessage, true);
sendReq.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
sendReq.onreadystatechange = handleSendChat;
var param = 'message=' + document.getElementById('txt_message').value;
        param += '&chat=1';
sendReq.send(param);
document.getElementById('txt_message').value = '';
}
}
Just drop sending the name parameter.

[Glenugie]

Cheers

Now I think I can handle the rest myself, I'll keep this topic open for a little while though, in case I can't.

Thanks for all the help

~Glenugie~

[Glenugie]

I'll just have to get around to reading up on AJAX at some point, but if I want to have the div only display messages that were posted since the user logged into the chat? I'd have to grab the time of login, and then compare that to the message timestamp, and in PHP, I'd manage that just fine, but in AJAX?

Not a clue where to start, guess I spoke to soon about handling the rest myself...

~Glenugie~

[raestlyn]

AJAX is just a javascript sending and recieving information from another page ( it can be either in ie. PHP/ASP, html, XML, JSON or just plain text) without reloading the whole page.

You'll do just the same thing with AJAX that you would do with PHP. PHP backend will decide what messages will be seen, just like in normal, non-AJAXed chat. AJAX just adds them to the existing page.Only thing different would be writing a response handler that adds the chat line to the existing page. Do you know any JavaScript? That would help...
For example here is the part from the tutorial that inserts the servers response.

Code: [Select]

function handleReceiveChat() {
if (receiveReq.readyState == 4) {
//Get a reference to our chat container div for easy access
var chat_div = document.getElementById('div_chat');
//Get the AJAX response and run the JavaScript evaluation function
//on it to turn it into a usable object.  Notice since we are passing
//in the JSON value as a string we need to wrap it in parentheses
var response = eval("(" + receiveReq.responseText + ")");
for(i=0;i < response.messages.message.length; i++) {
chat_div.innerHTML += response.messages.message[i].user;
chat_div.innerHTML += '&nbsp;&nbsp;<font class="chat_time">' +  response.messages.message[i].time + '</font><br />';
chat_div.innerHTML += response.messages.message[i].text + '<br />';
chat_div.scrollTop = chat_div.scrollHeight;
lastMessage = response.messages.message[i].id;
}
mTimer = setTimeout('getChatText();',2000); //Refresh our chat in 2 seconds
}
}

That basicly takes the JSON string (response) and loop it trough. It inserts name, time when the message was posted and message to the div_chat by simple JS function called .innerHTML. The whole thing would be easier if the response would in HTML or in text, then you could just update the div with the whole content. Other way doing this would be using .append() instead of .innerHTML(), as it would just add the response to the end (or was it at the begining, I can't remember :/) of the div.

If you really need it, I can make you a simple AJAX chat.

[Glenugie]

I don't think you'll have to make me one, the base is there, I just have to adapt a little now, which basically involves only displaying new messages, and supporting some commands.

I know a little javascript, but not a lot. Enough that lets me refresh pages/frames really.

But if you think it would be easier than answering my constant stream of questions, it would of course be appreciated

~Glenugie~

[Glenugie]

Right, I think I've got it worked out, just have to let the page work out what time the user joined chat

[Glenugie]

Got it

Thanks for the help, Ill work on writing some commands later, I think I can handle that

~Glenugie~