...

View Full Version : Making my script smoother



SirChick
06-10-2010, 11:25 PM
Hey,

I recently made my first ever ajax chat, and works given im a noob im quite happy about it :P

How ever, sadly - its not smooth like some ajax chat's i've seen out there. And when i submit a message to teh chat the page refreshes.

I was wondering if some one could help me by explaining how i can improve the efficientcy of it so it won't refresh and reacts alot quicker to create a live effect - its not totally as good as i hoped.

This is what i got for my code:



<script type="text/JavaScript">

function sendMessage()
{
$.ajax({
type: "POST",
url: "chatpost.php",
async: false,
data: "message="+$("#myMessage").val(),
});
}

function updateShouts(){
$('#chatArea').load('chat.php');
}
setInterval( "updateShouts()", 2000 );
</scrip>


/////////////////////////FORM//////////////////////////


<div id="chatArea" style="height:500px;"></div>
<form onSubmit="sendMessage()" method="POST">
<input type="texT" id="myMessage" class="blank" style="width:74%;">

<input type="button" class="blank" value="Send Message" onclick="sendMessage();">
</form>


The PHP is chat.php loads the chat (a MYSQL query getting latest 20 chat messages and loops them out into the div)
chatpost inserts the message to the table!

Hope you can give this newbie some guidance :)

rnd me
06-10-2010, 11:52 PM
function sendMessage()
{
$.ajax({
type: "POST",
url: "chatpost.php",
async: false,
data: "message="+$("#myMessage").val(),
});
return false;
}

SirChick
06-11-2010, 12:03 AM
Whats that do - didnt change much at this end ? The chat still disappears briefly then loads with the new lines =/

Skychan
06-11-2010, 03:51 AM
What JS framework are you using? If the page refreshes then you aren't using Ajax.

SirChick
06-11-2010, 04:00 AM
Oh, that proves how much a noob i am then xD

Well this is a total rework of it i think it works along side JQuery :



function sendMessage()
{
$.ajax({
type: "POST",
url: "chatpost.php", //for posting a message
async: false,
data: "message="+$("#myMessage").val(),

});
$("#myMessage").val(""); //clear form
return false;
}



function updateShouts(){
$('#chatArea').load('chat.php'); //loading messages
}
setInterval( "updateShouts()", 500 ); //load every half second


Is this just javascript? my concern was my setInterval( "updateShouts()", 500 ); would cause performance issues with hundreads of users using it as the chat is stored in a database.

I would of thought it would be smart to only update when the logs are changed but ive pretty much exhausted my knowledge of the language.

Skychan
06-11-2010, 04:02 AM
Oh sorry, I only barely glanced at your code. Regardless of what JS framework you are doing, you are clearly calling the sendMessage() function incorrectly. You don't want to use a form at all. Submitting a form causes (in this case) a POST, which will refresh your page. The other guy should be correct that returning false should prevent the form from submitting, so I'm not entirely sure why that didn't help. But you simply shouldn't be using a form.

Your input button already calls sendMessage(), so that's all you need... provided that syntax you are using for sending a message indeed uses XMLHTTPRequest properly, it should work once you get rid of the form.

cheers

SirChick
06-11-2010, 04:07 AM
So how would i load the chat efficiently :S ?

equally if i put the function on the submit button a user cannot hit enter to submit - you have to physically click the button which gets quite frustrating when you want to chat live..



<form onSubmit="javascript: sendMessage(); return false;" method="POST">
<input type="texT" id="myMessage" class="blank" style="width:74%;">
<input type="button" class="blank" value="Send Message" onclick="sendMessage();">
</form>


If i remove the form it won't work when a user hits enter from the text area, but would like both to there for users..

Skychan
06-11-2010, 04:18 AM
Ok, I'm not doing a good job of helping you, cuz again I didn't consider what you were doing with updateShouts().

This looks like a big part of your problem. I've never used JQuery so I don't know what
$('#chatArea').load('chat.php');
does. I don't know how a div element can "load", but I guess this is the line that is telling the whole page to load the chat.php.

You need to find out exactly what that load() function is doing. If it is indeed refreshing the page, you do not want to be doing that.

I think you need significant more knowledge of general programing as well as JS before you attempt a chat program. You need to be using Ajax to ask the server frequently (at least every 500ms as you've got it) if there is any new messages. The server should respond (with ajax) with an empty string if there are no new messages, or else a string with the new messages and who they were from all encoded into it. This should NOT be heavy for a server at all. When you get that string with all the messages encoded in it (maybe JQuery provides mechanisms for encoding/decoding JS objects in ajax requests/responses easily??) then you need to manipulate the DOM to include the new messages.

If this doesn't make any sense, you need to start learning a heck of a lot more about JS, DOM manipulation and Ajax.

gl

Skychan
06-11-2010, 04:21 AM
Well, to answer your latest question... typically Enter is used to create a new line in a text area... oh you aren't using a text area you are using a textbox (input type=text). So ok, that's fine if you want that behavior. Just add an onkeyup event on the input element and check if the key hit is the Enter key, then run sendMessage()

cheers

I gotta go for now, but I'll be back later. gl

SirChick
06-11-2010, 04:22 AM
$('#chatArea').load('chat.php');

To break this up

It executes "chat.php" which has a mysql query with a simle SELECT message from table LIMIT 20

then while loops the 20 messages and the script displays the output of the PHP to the div "chatArea".

It doesn't keep refreshing, but im calling the function that loads chat.php with the setinterval.

As for the communication aspect, thats something im trying to figure out how to get chat.php's response to be assigned in the calling JS is there a name for that precise thing so i can google a tutorial on it ?

Skychan
06-11-2010, 05:27 AM
Ok, well that sounds like it will work. Not the best DOM manipulation but I'll let it slide. Might as well stick with that since it's so simple and it apparently does exactly what you want it to. Then again, the server is sending a heavier response... a bigger string than it would have to if it only send the messages and you used JS to manipulate the DOM... but you'll have to figure out if that causes noticeable delay and bandwidth. For smoother server checking you should probably do the setinterval with a small wait time, like 50ms. The more often it updates, the faster the other person's message will reach this user's screen.

So, does removing the form and just clicking the Send Message button make it work without refreshing? If so, you just gotta google how to to onkeyup and get the keycode from the event and test if it equals the Enter key. When it equals the Enter key, you run sendMessage().



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum