Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Dec 2007
    Posts
    41
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Making my script smoother

    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:

    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

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,294
    Thanks
    10
    Thanked 583 Times in 564 Posts
    Code:
    function sendMessage()
    {
         $.ajax({
              type: "POST",
              url: "chatpost.php",
              async: false,
              data: "message="+$("#myMessage").val(),
          });
      return false;
    }
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #3
    New Coder
    Join Date
    Dec 2007
    Posts
    41
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Whats that do - didnt change much at this end ? The chat still disappears briefly then loads with the new lines =/

  • #4
    New Coder
    Join Date
    Feb 2010
    Posts
    44
    Thanks
    0
    Thanked 3 Times in 3 Posts
    What JS framework are you using? If the page refreshes then you aren't using Ajax.

  • #5
    New Coder
    Join Date
    Dec 2007
    Posts
    41
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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 :

    Code:
    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.

  • #6
    New Coder
    Join Date
    Feb 2010
    Posts
    44
    Thanks
    0
    Thanked 3 Times in 3 Posts
    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

  • #7
    New Coder
    Join Date
    Dec 2007
    Posts
    41
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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..

    Code:
    <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..

  • #8
    New Coder
    Join Date
    Feb 2010
    Posts
    44
    Thanks
    0
    Thanked 3 Times in 3 Posts
    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

  • #9
    New Coder
    Join Date
    Feb 2010
    Posts
    44
    Thanks
    0
    Thanked 3 Times in 3 Posts
    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

  • #10
    New Coder
    Join Date
    Dec 2007
    Posts
    41
    Thanks
    2
    Thanked 0 Times in 0 Posts
    $('#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 ?

  • #11
    New Coder
    Join Date
    Feb 2010
    Posts
    44
    Thanks
    0
    Thanked 3 Times in 3 Posts
    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().


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •