新しいメッセージを受信するたびにタイトルの値を更新する

Question

ユーザーが自分のページ/タブをクリックして新しいメッセージを通知するときにタイトルの値を更新しようとしています。何らかの理由で、たとえその機能の残りの部分が適切に実行されたにもかかわらず、ユーザがタブを再びアクティブにしたときに値を0に設定していても、値は常に増加します。document.titleを 'Chat' 。

$(document).ready(function(){ 
    var unreadMessages = 0; 
    var ws = new WebSocket("ws://localhost:8080/ws"); 
    ws.addEventListener("message", function(e){ 
    createMessage(e.data); 
    unreadMessages = updateNotification(unreadMessages); 

    }); 
}); 

function updateNotification(unreadMessages){ 
    unreadMessages++; 
    $(window).blur(function(){ 
    if(unreadMessages>0){ 
     document.title = "("+ unreadMessages + ") Chat"; 
    } 
    }); 
    $(window).focus(function(){ 
    unreadMessages=0; 
    document.title = 'Chat'; 
    }); 
    return unreadMessages; 
} 

Answer 1

あなたの全体の構造は間違っており、そのようには機能しません。 @ mpf82のコメントのように、メッセージを受け取るたびに新しいイベントハンドラを設定しないでください。

$(document).ready(function(){ 
    var unreadMessages = 0; 
    var blurred = false; 
    var ws = new WebSocket("ws://localhost:8080/ws"); 
    ws.addEventListener("message", function(e){ 
    createMessage(e.data); 
    if(blurred) document.title = "("+ ++unreadMessages + ") Chat"; 
    }); 
    $(window).blur(function(){ 
    blurred = true; 
    }); 
    $(window).focus(function(){ 
    document.title = 'Chat'; 
    blurred = false; 
    unreadMessages = 0; 
    }); 
});