私はチャットプログラムのために「タイピングの検出」機能を作ろうとしています。remove()が機能しません
ユーザーが入力またはメッセージを送信しているときはすべて検出されますが、$("#"+data.person+"").remove();
は機能しません。
コンソールで「タイピング機能が停止しています - 削除しています」というメッセージが表示されているので、動作するはずです。
私には何が欠けていますか?また、コードを追加する必要がある場合はお知らせください。私はちょうどこれが起こっていることのアイデアを得るのに十分であると仮定しています。
クライアント側
var myUserName;
var myUserPassword;
var myUserID;
var currentConversation;
var conversationInvite;
$(document).ready(function() {
\t var socket = io.connect("localhost:3000");
var typing = false;
var timeout = undefined;
function timeoutFunction() {
typing = false;
socket.emit("typing", false, currentConversation);
}
$(document).on('pageshow', '#chat', function(e,data){
$('.chatContent').height(getRealContentHeight());
});
function getRealContentHeight() {
\t var header = $.mobile.activePage.find("div[data-role='header']:visible");
\t var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
\t var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
\t var viewport_height = $(window).height();
\t var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
\t if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
\t \t content_height -= (content.outerHeight() - content.height());
\t }
\t return content_height;
}
//-----Chat
\t // Sending the message
$("#msg").keypress(function(e){
var msg = $("#msg").val();
if (e.which === 13) {
if (msg.trim() == "") {
return;
} else {
var timeInMs = Date.now();
function fulldate(date) {
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
return months[date.getUTCMonth()] + ' ' + date.getUTCDate() + ', ' + date.getUTCFullYear();
}
var message = {
\t \t message_id: currentConversation,
\t \t message_sender: myUserName,
\t message_body: msg,
\t time: timeInMs,
\t date: fulldate(new Date(timeInMs))
};
socket.emit("send message", message, currentConversation);
$("#msg").val("");
$("#msg").focus();
clearTimeout(timeout);
timeoutFunction();
}
} else if (e.which !== 13) {
if (typing === false && $("#msg").is(":focus")) {
typing = true;
socket.emit("typing", true, currentConversation, myUserName);
clearTimeout(timeout);
timeout = setTimeout(timeoutFunction, 3000);
} else {
console.log("Timeout function started");
//clearTimeout(timeout);
timeoutFunction();
}
}
});
socket.on("isTyping", function(data) {
if (data.isTyping) {
if ($("#"+data.person+"").length === 0) {
$(".chatContent").append("<div id='"+ data.person +"'><span class='grey'>" + data.person + " is typing...</div>");
timeout = setTimeout(timeoutFunction, 5000);
console.log(data.person);
}
} else {
\t console.log(data.person);
$("#"+ data.person +"").remove();
console.log("is typing function stopped - remove");
}
});
});
else句が実行され
\t // Detect typing
socket.on("typing", function(data, currentConversation, myUserName) {
socket.broadcast.to(currentConversation).emit("isTyping", {isTyping: data, person: myUserName});
console.log("Someone is typing");
});
あなたは 'console.log(data.person)'を使って、 –
の値をチェックしてみて、検査して生成されたhtmlをチェックしましたか? –
@CarstenLøvboAndersen最新のコードをご覧ください。見てわかるように、最初に正しい名前を表示しますが、 'else'関数では未定義に表示されます。何が問題なの? – JonasSH