creating new message notifications within <title></title> from a chat box

Question

I'm trying to create notifications for my chat box , as seen beside the 'talk' title when ever some one new messages you. I've tried multiple things that never work.

a busy cat http://goawaymom.com/damit.png

here is my code

$(document).ready(function(){
  //If user submits the form
  $("#submitmsg").click(function(){ 
    var clientmsg = $("#usermsg").val();
    $.post("post.php", {text: clientmsg});              
    $("#usermsg").attr("value", "");
    return false;
  });

  //Load the file containing the chat log
  function loadLog(){       
    $.ajax({
      url: "log.html",
      cache: false,
      success: function(html){     
        var chatbox= $("#chatbox");
        var atBottom = (chatbox[0].scrollHeight - chatbox.scrollTop() == chatbox.outerHeight());
        chatbox.html(html);

        if (atBottom )
          chatbox.animate({ scrollTop: 99999 }, 'normal');
      }
    });
  }
  setInterval (loadLog, 2500);  //Reload file every 2.5 seconds

  //If user wants to end session
  $("#exit").click(function(){
    var exit = confirm("Are you sure you want to end the session?");
    if(exit==true){window.location = 'index.php?logout=true';}
  });
});

does any body know how i would go about this. Everything I've tried so far has failed. I tried using a set interval function that didn't work.

Answer 1

So, if I'm understanding correctly, submitting a message will append it to the end of log.html? I don't think that's going to work for what you're trying to do. You need to have a service to keep track of new posts so that you can check for updates, rather than just reloading the innerHTML of a div.

Once you have that in place, you can keep a count of how many new messages you've loaded since the chat had focus and reset it to 0 every time the chat gets focus.

You can update the title using document.title. So whenever you need to update the count, you can do

document.title = 'my normal title (' + newCount + ')';

Simply put, this isn't a problem you can solve with javascript, you need to redesign your app.

Answer 2

Your question is a bit incomplete / unclear. When you say "whenever someone new messages you", do you mean just when a new message appears (not necessary for you, but rather it's for the whole chat room).

Assuming that's the case, then the number is going to keep increasing whenever someone types something, which leads to the question: when do you decrement the number?

Here's a piece of code that will help you get started. It won't decrement the notification number, because in your question you didn't clarify when that number resets.

In $(document).ready add the following line in the end

// Load log and cache number of message on page when it first loaded
// Pass in a callback function to cache the message count. 
loadLog(function(){
  window.lastReadMessageCount = $('.msgln').length;
}); 

Update the loadLog to take in callback:

function loadLog(callback){
  ...
  success: function(html){
    if (callback) callback();
    ...
  }
  ...
}          

Now you know how many message the user has seen when the page loaded. Now whenever the page updates the chat, we want to update the new message count.

In your loadLog() , Add the following lines to the end

newMessagesCount = $('.msgln').length - lastReadMessageCount;
document.title = newMessagesCount > 0 ? 'title (' newMessagesCount ')' : 'title';

That's it! All you have to do now is clarify when you want lastReadMessageCount to be updated.